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

    .News {
        display: flex;
        flex-direction: column;
    }


    section.section-1, section.section-2, section.section-3, section.section-4 ul {
        list-style-type: none;
        font-family: "warnock-pro", serif;
    }

    div.subscription{
        display: flex;
        flex-direction: column;    
        grid-column: 1 / -1; 
        justify-self: center;
        align-self: center; 
        text-align: left; 
        padding-bottom: 2em;
    }

    .subscription a {
        text-decoration: none;
        font-weight: bold;
        font-size: 1.5em; 
        color: rgb(84, 102, 47);
        margin: .5em 0em;  
        padding: 0.2em 0.5em; 
        border: 2px solid rgb(84, 102, 47);
        border-radius: .5em;
        width: fit-content;
    }

    .subscription a:hover{
        background-color:rgb(84, 102, 47); 
        color: rgb(248, 242, 233);
        border: 2px solid rgb(84, 102, 47); 
        border-radius: .5em;
    }

    section.section-1 {
        padding-top: 2em;
        padding-left: 2em;
    }

    section.section-2{
        padding-top: 2em;
        padding-left: 2em;
    }

    section.section-3{
        padding-top: 2em;
        padding-left: 2em;
    }

    section.section-4{
        padding-top: 4em;
        padding-left: 2em;
        padding-bottom: 2em;
    }


    main.News h2{
        padding-left: 1em;
        padding-top: 1em;
    }


    input[type="checkbox"] {
        display: inline-block; 
    }

    input[type="text"] {
        display: inline-block; 
    }


    ul {
        list-style-type: none;

    }
    li {
        margin-bottom: 1em;
    }


    main.Photo_Gallery {
        position: relative;
        overflow: hidden;
        padding-bottom: calc(66% + 3em);
        grid-column: 1/3;
    }

    figure.gallery{
        width: calc(100% + 1em); 
        opacity: 0;
        position: absolute;
        transition: opacity .5s;
    }

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


    .Photo-nav {
        display: grid;
        grid-column: 1/3;
        grid-template-columns: repeat(8, 1fr);
        grid-gap: .2em;
    }

    input {
        display: none;
    }


    div.container, div.home-container{ 
        position: relative;
        max-width: 40em;
        margin: 0 auto;
        background-color: rgb(248, 242, 233);
    }

    body{
        background-color: rgb(248, 242, 233);
    }

    a{
        text-decoration: none;
    }

    header{
        padding-left: .25em;
        padding-right: .25em;
    }

    h1 {
        width: 15em; 
        height: auto;
        padding-top: 1em;
    }

    h2{
        font-family: "nocturne-serif", serif;
        font-weight: 500;
        font-style: normal;
        font-size: 2em;
        color: rgb(59, 100, 133);
        padding-left: .25em;
        padding-right: .25em;

    }

    section.mainstory h2 {
        font-size: 3em;
        padding-left: .25em;
        padding-right: .25em;
        }

    section.secondary h2{
        font-size: 2em; 
        padding-left: .25em;
        padding-right: .25em;
    }

    section.teasers h2{
        font-size: 1em;  
        border-top: 1.5px solid rgb(59, 100, 133);
        padding-top: .5em;
        padding-left: .5em;
        padding-right: .5em;
        color: rgb(59, 100, 133);
    }

    .section-4 button {
        font-family: "nocturne-serif", serif;
        font-size: 1em;
        color: #ffffff;
        background-color:  rgb(59, 100, 133);
        padding: .5em 1em;
        border: none;
        border-radius: .5em;
        cursor: pointer;
    }

    .section-4 button:hover {
        background-color:  rgb(115, 169, 213);
    }

    aside h2{
        font-size: 1em;
        padding-left: .5em;
        padding-right: .25em;
        color: rgb(59, 100, 133);
    }


    p{
        font-size: 1em;
        font-family: "warnock-pro", serif;
        font-weight: 300;
        font-style: normal;
        color: rgb(11, 11, 11);
        padding-bottom: 2em;
        padding-left: .5em;
        padding-right: .25em;
        padding-top: .25em;
    }

    .secondary .special:hover {
        color: rgb(59, 100, 133);
    }

    .mainstory .special:hover {
        color: rgb(59, 100, 133);
    }

    .secondary .h-special:hover{
        color: rgb(138, 172, 201);
    }

    .mainstory .h-special:hover{
        color: rgb(138, 172, 201);
    }
    
    aside{
        background-color: rgb(248, 242, 233);
        padding: 1em .5em 1em;
    }

    figcaption{
        font-size: 1em;  
        font-style: italic;	
        font-family: sans-serif;
        color: rgb(11, 11, 11);
        padding-bottom: 1.5em;
        padding-left: .5em;
        padding-right: .5em;
        padding-top: .5em;
    }

    nav {
        padding-left: 0em;
        padding-right: .25em;
    }

    nav ul li a:hover {
        color: rgb(48, 67, 16); 
    }

    nav ul{	
        margin-top: 1em;
        margin-bottom: 1em;
        list-style: none;
    }

    nav ul li {
        font-size: 1.25em;
        font-family: "nocturne-serif", serif;
        font-weight: 600;
        font-style: normal;
        margin-top: .25em;
        }

    nav ul li a{
        text-decoration: none;
        color: rgb(84, 102, 47);
    }

    footer {
        background-color: rgb(84, 102, 47);
        box-sizing: border-box;
        padding: .5em;
    }

    footer p{
        color: rgb(242, 232, 216);
    }

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


        div.header-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        body{
            background-color: rgb(248, 242, 233);
        }

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

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

        section.section-1 {
            padding-top: 2em;
            padding-left: 18em;
        }
        
        section.section-2{
            padding-top: 2em;
            padding-left: 18em;
        }
        
        section.section-3{
            padding-top: 2em;
            padding-left: 18em;
        }
        
        section.section-4{
            padding-top: 4em;
            padding-left: 18em;
            padding-bottom: 2em;
        }

        main.News h2{
            padding-left: 9em;
            padding-top: 1em;
        }

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

        .photo-header{
            text-align: center;
            padding: 1em;
        }

        div.container aside{
            margin-top: 0;
            background-color: rgb(242, 227, 205);
            }

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

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

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


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


        h2{
            padding-left: 0em;
            padding-right: 0em;
        }

        section.mainstory h2 {
            flex: 0 0 1em;
            padding-left: 0em;
        }

        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 p{
            flex: 0 0 auto;
        }

        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 p{
            flex: 0 0 auto;
        }

        section.secondary h2{
            padding-left: 0em;
            padding-right: 0em;
        }
        section.teasers h2{
            padding-left: 0em;
            padding-right: 0em;
        }



        aside h2{
            padding-left: 0em;
            padding-right: 0em;
        }

        p{
            padding-left: 0em;
            padding-right: 0em;
        }

        figcaption{
            padding-left: 0em; 
            padding-right: 0em;
        }
}
@media screen and (prefers-color-scheme: dark) {

    h1 {  
        background-image: url("logo2.svg");  
        background-repeat: no-repeat;  
        background-size: contain;  
        }  
    h1 img {  
        opacity: 0;  
        }  

    .secondary .special:hover {
        color: rgb(138, 172, 201);
        }
    
    .mainstory .special:hover {
        color: rgb(138, 172, 201);
        }
    
    .secondary .h-special:hover{
        color: rgb(23, 39, 53);
        }
    
    .mainstory .h-special:hover{
        color: rgb(23, 39, 53);
        }   


    nav ul li a{
        color: rgb(136, 165, 68);
    }

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

    figcaption{
        color: rgb(185, 182, 179);
    }

    div.container, div.home-container{ 
        background-color: rgb(21, 20, 19);
    }

    body{
        background-color: rgb(21, 20, 19);
    }

    .subscription a {
        color:  rgb(136, 165, 68);
        border: 2px solid  rgb(136, 165, 68);

    }
    section.teasers h2{
        border-top: 1.5px solid rgb(138, 172, 201);
        color: rgb(138, 172, 201);
    }

    .photo-header{
        color: rgb(138, 172, 201);
    }


    h2{
        color: rgb(138, 172, 201);
    }

    aside h2{
        color: rgb(138, 172, 201);
    }

    aside{
        background-color: rgb(23, 39, 53);
    }

    div.container aside{
        margin-top: 0;
        background-color: rgb(23, 39, 53);
        }

    .News {
            color: rgb(248, 242, 233);
    }


    footer {
        background-color: rgb(136, 165, 68);
    }

    footer p{
        color: rgb(242, 232, 216);
    }

    .subscription a:hover{
        background-color:  rgb(136, 165, 68);
        color: rgb(248, 242, 233);
        border: 2px solid  rgb(136, 165, 68);
    }

    .subscription a {
        color: rgb(136, 165, 68);
        border: 2px solid rgb(136, 165, 68);
    }

    .section-4 button {
        color: #ffffff;
        background-color:  rgb(138, 172, 201);
    }

    .section-4 button:hover {
        background-color:  rgb(72, 90, 105);
    }


    nav ul li a:hover {
        color: rgb(44, 70, 0); 
    }




}