/*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;
}

body {
    font-family: sans-serif;
    background-color: #222;
}


div.container, div.home-container, div.gallery, div.subscription {
    max-width:40em;
    margin: auto;
    /* position: relative; */
}


h1 {
	width: 13em;
    margin-top: 2em;
    margin-bottom:1em;
}

nav {
    margin-bottom: 1em;
}


nav ul li {
    list-style-type:none;
}

nav ul li a {
    color: rgb(243, 249, 215);
    font-family: "bd-orange-variable", sans-serif;
    font-variation-settings: "wght" 600;
    font-size: 1.5em;
    margin-right: 0.7em;
}

nav ul li a:hover {
    color: rgb(26, 127, 243);
}


header {
    margin: .2rem .5rem 0;
}

h2 {
    /* text-decoration: none; */
    color: rgb(246, 177, 66);
    font-family: "bd-orange-variable", sans-serif;
    font-variation-settings: "wght" 600;
    /* padding-top:0.5rem; */
    margin-top: 1rem;
    font-size: 3.3em;
    /* margin: 0.75em 0em 0.5em 0em; */
    margin-bottom: .5em;
}


article p {
    margin-bottom: 1em;
    font-size: 1.3em;
}

section.mainstory p, section.secondary p, section.tertiary p{
    font-size: 1em;
} 

section.mainstory h2 {
    font-size: 2.5em;
    line-height: 90%;
}

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


section.tertiary h2{
    padding-top: 0.5em;
    border-top: 1px solid rgb(26, 127, 243);
    font-size: 1.5rem;
}

section.tertiary p{
    margin-bottom: 1em;
}

a{
    text-decoration: none;
    color: #222;
}

figcaption{
    /* font-family: "newsserif-huge-variable", sans-serif;
    font-variation-settings: "wght" 100; */
    font-family: "newsserif-text-variable", sans-serif;
    font-variation-settings: "wght" 400;
	/* line-height: 1.4em; */
	color: rgb(26, 127, 243);
    /* padding-bottom: 1rem; */
    
}

p{
    color: rgb(243, 249, 215);
    font-family: "acumin-pro", sans-serif;
    font-weight: 200;
    font-style: normal;
    line-height: 120%;
}

/* photo gallery */

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),
input:nth-of-type(9):checked ~ main figure:nth-of-type(9),
input:nth-of-type(10):checked ~ main figure:nth-of-type(10),
input:nth-of-type(11):checked ~ main figure:nth-of-type(11){
    opacity: 1;
}

div.gallery {
    max-width: 60em;
    margin: auto;
    padding: 1em;
}

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

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

nav.gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 0.2em;
}


input[type=radio] {
    display: none;
}

/* Subscription page */

section.personal-info ul li input[type="text"],
section ul li input[type="email"],
section ul li input[type="tel"],
section ul li select {
	flex: 4 0 30em; 
	box-sizing: border-box;
}

form {
    margin-bottom: 1em;
}

form ul {
    list-style-type: none;
}

form section.personal-info li {
    display: grid;
}

form li {
    margin: 0.25em 0;
}

form section {
    margin-top: 0.75em;
}

form section label{
    color: rgb(243, 249, 215);
    font-family: "acumin-pro", sans-serif;
    font-weight: 200;
    font-style: normal;
    line-height: 120%;
}

/* form section.personal-info input {
    max-width: 25em;
    padding: 0.25em;
} */

/* h2.mag-description, h2.page-title {
    font-size: 1.8em;
    font-weight: 300;

} */

button {
    font-family: new-kansas, sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #FAF4EF;
    background-color: #d33d18;
    width: 8em;
    height: 3em;
    border-style: none;
    margin: 0.75em 0;
    transition-duration: 0.2s;
    border-radius: 2px;
}

button:hover {
    background-color: #FAF4EF;
    color: #d33d18;
    border: 1px solid #d33d18;
}

/* form section h2, button, form ul, form textarea {
    margin-left: 0.75em;
} */


/* input[type=text] {
    font-family: neulis-sans, sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #280004;
} */


footer p {
    width: 100%;
    padding-top:0.5em;
    padding-bottom: 1.5em;
    color: rgb(243, 249, 215);
    border-top: 1px solid rgb(26, 127, 243);
    margin-top: 2.5em;
    
}

@media only screen and (min-width: 40em) {
  
    header,p { 
        margin: .2rem 0 0 ;
    }

    figcaption {
        margin: .5rem 0.5rem 1em;
    }

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

    form section h2, button, form ul, form textarea{
        margin-left: 0;
    }
}

    @media only screen and (min-width: 60em){

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

        div.container{
            max-width: 70em;
            padding: 0 1em;
            display: grid;
            grid-template-columns: 5fr 2fr;
            grid-gap: 1em;
        }

        div.subscription{
            max-width:70em;
        }

        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;
            margin-top: 0;
        }

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

        section.mainstory {
            grid-column: 2/4;
            grid-row: 1/3;
            display: flex;
        }

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

        section.mainstory a figure {
            flex: 1 0 12em;
            display: flex;
        }

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

        section.mainstory a h2 {
            flex: 0 0 0.5em;
        }

        section.mainstory a p {
            flex: 0 0 4em;
        }


        section.secondary {
            display: flex;
        }

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

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

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

        section.secondary a h2 {
            flex: 0 0 1em;
        }

        section.secondary a p {
            flex: 0 0 4em;
        }

        form {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-column-gap: 2em;
        }
        
        section.personal-info {
            grid-row: 1/4; 
        }
    
        section.subscription-type {
            grid-row: 1/2;
        }
        
        section.feedback {
            grid-row: 2/3;
        }
    
        button {
            grid-row: 3/4;
        }
    }


    @media screen and (prefers-color-scheme: light ) {

        h1 {  
            background-image: url("whitewashed\ logo\ outline\ dark.svg");  
            background-repeat: no-repeat;  
            background-size: contain;  
            }  

        h1 img {  
                opacity: 0;  
                }  


        body {
            font-family: sans-serif;
            background-color: #f7f6db;
        }

        nav ul li a {
            color: #222;
            font-family: "bd-orange-variable", sans-serif;
            font-variation-settings: "wght" 600;
            font-size: 1.5em;
            margin-right: 0.7em;
        }
        
        nav ul li a:hover {
            color: rgb(26, 127, 243);
        }
        
        
        header {
            margin: .2rem .5rem 0;
        }
        
        h2 {
            /* text-decoration: none; */
            color: rgb(242, 123, 25);
            font-family: "bd-orange-variable", sans-serif;
            font-variation-settings: "wght" 600;
            /* padding-top:0.5rem; */
            margin-top: 1rem;
            font-size: 3.3em;
            /* margin: 0.75em 0em 0.5em 0em; */
            margin-bottom: .5em;
        }

        section.tertiary h2{
            padding-top: 0.5em;
            border-top: 1px solid rgb(26, 127, 243);
            font-size: 1.5rem;
        }
        
        section.tertiary p{
            margin-bottom: 1em;
        }
        
        a{
            text-decoration: none;
            color: #222;
        }

        footer p {
            width: 100%;
            padding-top:0.5em;
            padding-bottom: 1.5em;
            color: #222;
            border-top: 1px solid rgb(26, 127, 243);
            margin-top: 2.5em;
            
        }

        p{
            color: #222;
            font-family: "acumin-pro", sans-serif;
            font-weight: 200;
            font-style: normal;
            line-height: 120%;
        }


    }