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

/* @media only screen and (min-width: 20em) { */

    div.container, div.home-container {
        max-width: 60em;
        margin: auto;
        padding-top: 2em;
    }

    header {
        margin: 0 0.5em;
    }

    nav {
        padding-bottom: 1em;
    }

    nav a {
        color: rgb(228, 51, 51);
    }

    nav a:hover {
        color:rgb(241, 134, 20);
    }


    nav li {
        list-style: none;
        font-size: 1em;
        font-family: "alfarn-2", sans-serif;
        font-weight: 700;
        font-style: normal;
        padding: 0.2em 0;
    }

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

    a {
        text-decoration: none;
    }

    p {
        font-family: "arial-narrow", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgb(0, 0, 0); 
        line-height: 1.2em;
    }

    article {
        padding: 0 0.5em;
    }

    .primary {
        margin: 0 0.5em;
        padding-bottom: 3em;
    }

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

    .secondary {
        margin: 0.5em;
        padding-bottom: 3em;
    }

    section.secondary h2 {
        font-size: 1.5em;
        margin-top: 0.5em;
    }

    .tertiary {
        padding: 0.5em;
        border-top: 3px dotted rgb(135, 197, 172);
    }

    section.tertiary h2 {
        font-size: 1.5em;
        line-height: 1.2em;
        margin-top: 0.5em;
        color: rgb(53, 116, 91);    
    }

    h1 {
        max-width: 12em;
        padding-bottom: 1em;
    }

    h2 {
        color: rgb(0, 0, 0);
        font-family: "liebling", sans-serif;
        font-weight: 500;
        font-style: normal;
        padding-top: 0.5em;
    }

    h3 {
        font-family: "liebling", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 0.8em;
        color: rgb(255, 236, 204);
    }

    article {
        padding-bottom: 2em;
        border-bottom: 8px dotted rgb(228, 51, 51);
    }

    article h2 {
        font-size: 3em;
        padding-bottom: 0.25em;
    }

    article p {
        font-size: 1.2em;
        line-height: 1.5em;
        padding-bottom: 1.25em;
    }

    figcaption {
        font-size: 0.8em;
        font-family: sans-serif;
        font-style: italic;
        color: rgb(123, 123, 123);
        padding-top: 0.5em;
        padding-bottom: 1em;
    }

    aside {
        padding-top: 2em;
    }

    aside h2 {
        font-size: 1.25em;
        padding: 0.25em 0;
        color: rgb(53, 116, 91);
    }

    aside p {
        padding-bottom: 3em;
        color: rgb(123, 123, 123);
    }

    p.writer {
        color: rgb(95, 94, 100);
        margin-top: auto;
        font-size: 0.75em;
    }

    footer {
        width: 100%;
        background-color: rgb(228, 51, 51);
        padding: 0.5em;
        box-sizing: border-box;
    }

    p.third {
        margin-top: auto;
        padding-bottom: 0.5em;
        font-size: 0.75em;
        color: rgb(95, 94, 100);
    }

    ul {
        list-style-type: none;
        padding: 0;
    }
    
    .personal-info ul li {
        display: flex;
        flex-wrap: wrap;
        font-family: "arial-narrow", sans-serif;
        font-weight: 400;
        font-style: normal;
    }
    
    .personal-info ul li label {
        flex: 0 0 8em;
    }
    
    .subscription ul {
        display: inline;
    }
    
    .subscription ul li {
        margin: 0 1em 0 0;
        font-family: "arial-narrow", sans-serif;
        font-weight: 400;
        font-style: normal;
    }

    .requests label {
        font-family: "liebling", sans-serif;
        font-weight: 500;
        font-style: normal;
    }
    
    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 25em; /*toggled with flex basis to make sure mobile size was fitting*/
        box-sizing: border-box;
    }
    
    main.newsletter {
        grid-column: 1/4;
    }

    main.newsletter form {
        grid-column: 1/4;
        padding: 1em;
    }

    main.newsletter figure {
        grid-column: 1/4;
        padding: 0 5em;
    }

    main.newsletter section {
        background: rgb(255, 218, 218);
        padding: 1em;
        margin-bottom: 1em;
    }
    
    main.newsletter section p {
        margin-top: 0;
    }
    
    textarea {
        box-sizing: border-box;
        display: block;
        width: 70%;
        height: 6em;
        background: #fcfcfc;
        border: 1px solid rgb(255, 254, 216);
        padding: 0.4em;
        font-family: "arial-narrow", sans-serif;
        font-weight: 400;
        font-style: normal;        
        color: rgb(123, 123, 123);
    }

    /*Beginning code for photo gallery*/

    figure {
        margin: 0;
    }

    main.gallery h2 {
        grid-column: 1/4;
    }

    main.gallery figure {
        margin: 0;
        width: 100%;
        position: absolute;
        left: 100%;
        transition: left 1s;
        top: 4em;
    }

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

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

    nav.gallery {
        display: flex;
        flex-wrap: wrap;
        grid-column: 1/3;
        grid-template-columns: 0.25em 0.25em 0.25em 0.25em;
        grid-gap: 0.2em;
    }

    label {
        flex: 1 0 8em;
    }

    input.gallery {
        display: none;
    } 
/* } */


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

    .primary {
        margin: 0 0.5em;
        padding-bottom: 1em;
    }

    .secondary {
        margin: 0.5em;
        padding-bottom: 1em;
    }

    .tertiary {
        border: 3px dotted rgb(135, 197, 172);
        border-top: none;
    }

    aside {
        padding: 1em 0;
    }

    article {
        border-bottom: none;
    }

    div.container aside {
        border: 3px dotted rgb(135, 197, 172);
        border-top: none;
    }

    aside p {
        padding-bottom: 5em;
    }

    nav li {
        display: inline;
        padding: 0 1.5em;
        border-left: 1.5px solid rgb(123, 123, 123);
        font-size: 1.25em;
    }

    main h2 {
        font-size: 1.75em;
    }

    section.primary h2 {
        font-size: 3em;
        line-height: 1.2em;

    }

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

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

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

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

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

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

    section.primary {
        grid-column: 2/4;
        grid-row: 1/3;
        display: flex;
        padding-bottom: 4em;
    } 

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

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

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

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

    section.primary 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;
    }

    main.newsletter figure {
        padding: 0 10em;
    }
}

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

    body {
        background:rgb(35, 35, 37);
    }

    nav a {
        color: rgb(241, 134, 20);
    }

    p {
        font-family: "arial-narrow", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: rgb(231, 243, 240); 
        line-height: 1.2em;
    }

    h1 {  
        background-image: url("alternate-logo.svg");  
        background-repeat: no-repeat;  
        background-size: contain;
    }  

    h1 img {  
        opacity: 0;  
    }  

    h2 {
        color: rgb(231, 243, 240); 
        font-weight: 600;
        font-family: "liebling", sans-serif;
        font-weight: 500;
        font-style: normal;
    }

    figcaption {
        font-size: 0.8em;
        font-family: sans-serif;
        font-style: italic;
        color: rgb(178, 178, 178);
        padding-top: 0.5em;
        padding-bottom: 1em;
    }

    aside h2 {
        color: rgb(255, 255, 255);
    }

    aside p {
        color: rgb(178, 178, 178);
    }

    p.third {
        color: rgb(178, 178, 178);
    }

    p.writer {
        color: rgb(178, 178, 178);
    }

    section.tertiary h2 {
        color: rgb(255, 255, 255);
    }

    main.newsletter section {
        background: none;
        border: 3px dotted rgb(135, 197, 172);
    }

    label {
        color: rgb(178, 178, 178);
    }

}