/*CSS document*/

html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;}

img {
    width: 100%;
    display: block;
}

div.container, div.home-container { 
	max-width: 50em;
    margin: auto;
    position: relative;
	min-height: 100vh;
    background-color: rgb(255, 255, 255); 
	width: 100%;
}

header{
    padding: 1em;
}

.main-story, article, .secondary-story, .tertiary-story {
        padding: 0em 1em;
}

.tertiary-story a {
    display: block;
    margin-top: 2em;
    margin-bottom: 2em;
	border-top: 1px solid rgb(208, 0, 0);
}

.tertiary-story a h2{
    margin-top: 0em;
}

h1 {
    width: 15em;
    background-image: url("Ramona\ Drive\ logo\ alt.svg");  
    background-repeat: no-repeat;  
    background-size: contain;  
}

div.photo-gallery-container {
    background-color: rgb(255, 255, 255);
    max-width: 60em;
    margin: auto;
    padding: 1em;
}

h2.photo-gallery-title {
    font-size: 3em;
    color: rgb(208, 0, 0);
    font-family: pf-fuel-grime, sans-serif;
        font-weight: 400;
        font-style: normal;
}

figcaption.photo-gallery-figcaption {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0em 0;
    color: rgb(77, 108, 147);
}

article h2 {
    font-size: 3em;
    color: rgb(208, 0, 0);
    font-family: pf-fuel-grime, sans-serif;
        font-weight: 400;
        font-style: normal;
}

section.main-story h2 {
    font-size: 3em;
    color: rgb(208, 0, 0);
    font-family: pf-fuel-grime, sans-serif;
        font-weight: 400;
        font-style: normal;
}

section.secondary-story h2 {
    font-size: 2em;
    color: rgb(208, 0, 0);
    font-family: pf-fuel-grime, sans-serif;
        font-weight: 400;
        font-style: normal;
}

.tertiary-story h2 {
    font-size: 1.5em;
    color: rgb(208, 0, 0);
    font-family: pf-fuel-grime, sans-serif;
        font-weight: 400;
        font-style: normal;
}

figcaption {
    font-size: 1em;
    font-family: darkmode-on, sans-serif;
        font-weight: 400;
        font-style: italic;
    padding-top: 1em;
    padding-bottom: 2em;
    color: rgb(77, 108, 147);
}

p {
    font-size: 1em;
    color: rgb(43, 43, 43);
    padding-bottom: 2em;
    font-family: darkmode-on, sans-serif;
        font-weight: 400;
        font-style: normal;
}

.tertiary-story p {
    padding-bottom: 0em;
}

ul {
    padding-top: 1em;
    padding-bottom: 0.8em;
}

nav ul li {
    padding-bottom: 0.2em;
    display: block;
    font-family: pf-fuel-grime, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 1.5em;
}

section.main-story figure img,
main section.secondary-story figure img,
article figure img {
    width: calc(100% + 2em);
    margin-left: -1em;
    margin-right: -1em;
}
	
nav ul li a {
	color: rgb(208, 0, 0);
}

a {
	text-decoration: none;
}

aside {
    background-color: rgb(191, 150, 79);
    padding-top: 1em;
}

footer {
    background-color: rgb(191, 150, 79);
    color: rgb(248, 248, 248);
    box-sizing: border-box;
    
}

footer p{
    color: rgb(248, 248, 248);
    padding: 1em;
    font-family: darkmode-on, sans-serif;
        font-weight: 400;
        font-style: normal;

}

main.photo-gallery-main {
    position: relative;
    overflow: hidden;
    padding-bottom: calc(67% + 3em);
}

figure.photo-gallery-main {
    margin: 0;
    width: calc(100%-2em);
    position: absolute;
    opacity: 0;
    transition: opacity 1s;
}

input:nth-of-type(1):checked ~ main figure:nth-of-type(1),
input:nth-of-type(2):checked ~ main figure:nth-of-type(2),
input:nth-of-type(3):checked ~ main figure:nth-of-type(3),
input:nth-of-type(4):checked ~ main figure:nth-of-type(4),
input:nth-of-type(5):checked ~ main figure:nth-of-type(5),
input:nth-of-type(6):checked ~ main figure:nth-of-type(6),
input:nth-of-type(7):checked ~ main figure:nth-of-type(7),
input:nth-of-type(8):checked ~ main figure:nth-of-type(8){
    opacity: 1;
}

nav.photo-gallery-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.2em;
}

input {
    display: none;
}

.newsletter-form {
    margin: 2em 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.newsletter-form > li {
    list-style: none;
    margin-bottom: 1.5em;
    display: flex;
    flex-direction: column;
}

.name-and-email {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0 0 1.5em 0;
  padding: 0;
}

li.name-and-email input{
    list-style: none;
    margin-bottom: 0;
    display: block;
}

.newsletter-form label {
    font-family: darkmode-on, sans-serif;
    font-size: 1em;
    color: rgb(43, 43, 43);
    margin-bottom: 0.5em;
    font-weight: 600;
    display: block;
}

li.name-and-email input[type="text"],
li.name-and-email input[type="email"] {
    display: block;
    width: 100%;
    padding: 0.75em;
    font-size: 1em;
    border: 1px solid rgb(209, 209, 209);
    border-radius: 0.25em;
    background-color: rgb(255, 255, 255);
    font-family: darkmode-on, sans-serif;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

li.name-and-email input[type="text"]:focus,
li.name-and-email input[type="email"]:focus {
    outline: none;
    border-color: rgb(208, 0, 0);
}

.newsletter-form h3 {
    font-family: darkmode-on, sans-serif;
    font-size: 1em;
    color: rgb(43, 43, 43);
    font-weight: 600;
    margin: 1em 0 1em 0;
    padding-top: 0.5em;
}

.newsletter-form > ul {
    padding: 0;
    margin: 0 0 1.5em 0;
    list-style: none;
}

li.name-and-email label {
    margin: 0 0 0.8em 0;
    font-weight: 600;
    cursor: pointer;
    color: rgb(43, 43, 43);
    font-size: 1em;
    text-align: left;
}

.newsletter-form ul li {
    list-style: none;
    padding: 0.75em 0;
    display: flex;
    align-items: center;
}

.newsletter-form input[type="checkbox"] {
    display: block !important;
    width: 1.2em;
    height: 1.2em;
    margin-right: 1em;
    cursor: pointer;
    accent-color: rgb(208, 0, 0);
}

.newsletter-form ul li label {
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

.newsletter-form button {
    padding: 0.85em 2em;
    background-color: rgb(208, 0, 0);
    color: rgb(255, 255, 255);
    border: none;
    border-radius: 0.25em;
    font-size: 1em;
    font-weight: bold;
    font-family: pf-fuel-grime, sans-serif;
    cursor: pointer;
    width: fit-content;
    transition: all 0.3s ease;
    box-shadow: 0 0.125em 0.5em rgba(208, 0, 0, 0.2);
}

.newsletter-form button:hover {
    background-color: rgb(208, 0, 0);
    box-shadow: 0 0.25em 0.75em rgba(208, 0, 0, 0.3);
    transform: translateY(-2em);
}

.newsletter-form button:active {
    transform: translateY(0);
}

article ul {
    padding-top: 0;
    padding-bottom: 2em;
    padding-left: 1.5em;
}

article ul li {
    padding-bottom: 0.5em;
}

@media screen and (min-width: 60em) {
    .newsletter-form > ul:first-of-type {
        display: flex;
        flex-direction: column;
        margin-bottom: 1.5em;
    }

    .newsletter-form > ul:first-of-type > li.name-and-email {
        margin: 0 0 1.5em 0;
    }

    section.main-story figure img,
    main section.secondary-story figure img,
    article figure img {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    section.secondary-story h2 {
        font-size: 1.5em;
    }

    header, .main-story, article, .secondary-story, .tertiary-story {
        padding: 0em 0em;
    }

    .tertiary-story a {
        display: block;
        margin-top: 0em;
    }

    nav ul li {
        display: inline;
        padding-right: 1em;
    }

    div.home-container {
        max-width: 80em;
        padding: 0 1em;
        padding-top: 1em;
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-gap: 1em;
    }
    
    div.container {
        max-width: 60em;
        padding: 0 1em;
        padding-top: 1em;
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-gap: 1em;
    }    

    div.container aside .secondary-story {
        padding: 0 1em;
    }

    header, footer {
        grid-column: 1/3;
    }

    div.home-container main {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1em;
    }

    div.home-container aside {
        background: none;
        padding: 0 0 0 0;
        margin-top: 0;
    }

    div.container aside {
        margin-top: 0;
    }

    section.main-story {
        grid-column: 2/4;
        grid-row: 1/3;
        display: flex;
        padding: 0 0 0 0;
    }

    section.main-story a {
        flex: 1 0 12em;
        display: flex;
        flex-direction: column;
    }

    section.main-story a figure {
        flex: 1 0 12em;
        display: flex;
    }

    section.main-story a figure img {
        object-fit: cover;
    }

    section.main-story a h2 {
        flex: 0 0 1em;
    }
    
    section.main-story a p {
        flex: 0 0 4em;
    }

    section.secondary-story {
        display: flex;
        padding: 0 0 0 0;

    }

    section.secondary-story a {
        flex: 1 0 12em;
        display: flex;
        flex-direction: column;
    }

    section.secondary-story a figure {
        flex: 1 0 12em;
        display: flex;
    }

    section.secondary-story a figure img {
        object-fit: cover;
    }

    section.secondary-story a h2 {
        flex: 0 0 1em;
    }
    
    section.secondary-story a p {
        flex: 0 0 4em;
    }
}

@media screen and (prefers-color-scheme: dark) {
    html, body {
        background-color: rgb(43, 43, 43);
    }

    div.container, div.home-container {
        background-color: rgb(43, 43, 43);
    }

    div.photo-gallery-container {
        background-color: rgb(43, 43, 43);
    }

    .name-and-email {
        background: none;
    }

    li.name-and-email label {
        color: rgb(248, 248, 248);
    }

    li.name-and-email input[type="text"],
    li.name-and-email input[type="email"] {
        background-color: rgb(55, 55, 55);
        border-color: rgb(100, 100, 100);
        color: rgb(248, 248, 248);
    }

    li.name-and-email input[type="text"]::placeholder,
    li.name-and-email input[type="email"]::placeholder {
        color: rgb(180, 180, 180);
    }

    p {
        color: rgb(248, 248, 248);
    }

    .newsletter-form h3, form.newsletter-form ul li, form.newsletter-form ul li.name-and-email label, form.newsletter-form ul li label {
        color: rgb(248, 248, 248);
    }

    li.name-and-email {
        color: rgb(248, 248, 248);
    }
    
    form.newsletter-form {
        color: rgb(248, 248, 248);
    }

    h1 img {  
        opacity: 0;  
    }  
}