/*CSS document*/
/* ------------------------------------------------- DIV ------------------------------------------------- */

div.container {
    max-width: 100%;
    margin: auto;
    background-color: rgb(243, 243, 234);
}

body {
    background-color: rgb(243, 243, 234); /* Not totally white. */
    color: rgb(30, 30, 30); /* Not totally black. */
    line-height: 140%; /* A little extra leading. */
    font-family: "elza", sans-serif;
    font-weight: 400;
    font-style: normal;
}

img {
    width: 100%;
}


li {
    display: inline;
}
li a:hover {
    color: rgb(83, 134, 174);
}
li a {
    margin: 1rem 1.5rem 1rem 0rem;
    color: rgb(25, 25, 25);
    text-decoration: none;
    font-family: "elza", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
}

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

a:link,
a:visited,
a:active {
    color: #000000;
    text-decoration: none;
}

a:hover {
    color: rgb(83, 134, 174);
}
/* ------------------------------------------------- NAV ------------------------------------------------- */

nav ul li {
    font-family: "elza", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: rgb(81, 121, 146);
    width: max-content;
    text-transform: uppercase;
    padding-left: .5em;
}

ul {
    list-style-type: none;
    padding: 0;
    padding-left: 0.5em;
}

nav ul li a:hover {
    color: rgb(83, 134, 174);
}

/* ------------------------------------------------------------------------------------------------------- */



/* ------------------------------------------------- TEXT ------------------------------------------------- */

h1 {
    width: 15em;
    padding-left: 1.2em;
}

h2 {
    font-family: "elza", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    color: rgb(83, 134, 174);
    padding-right: 4rem;
    padding-left: 1.75em;
}

h3 {
    font-family: "elza", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    padding-right: 4rem;
    padding-left: 2em;
}

h4 {
    width: 20em;
}

p {
    font-family: "elza", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding-right: 4em;
    padding-left: 3em;
}

figcaption {
    font-family: "elza", sans-serif;
    font-weight: 100;
    font-style: italic;
    padding-right: 4em;
    padding-bottom: 2em;
    padding-left: 0em;
}

footer {
    font-family: "elza", sans-serif;
    font-weight: 100;
    font-style: italic;
    color: rgb(83, 134, 174);
    display: grid;

}
/* ------------------------------------------------- ASIDE ------------------------------------------------- */

aside.extras {
    padding-top: 2em;
    border-top: 1.5px solid rgb(25, 25, 25);
    border-bottom: 1.5px solid rgb(25, 25, 25);
}

aside h3 {
    padding-left: 2em;
}

aside figure {
    display: grid;
    padding-right: 3em;
}

aside p {
    padding-left: 2.5em;
}

/* ------------------------------------------------------------------------------------------------------- */



/* -----------------------------------------------SECONDARY----------------------------------------------- */

section.secondary h3 {
    padding-left: 2em;
}

section.secondary p {
    padding-left: 2.5em;
}

section.personal-info img {
    padding-left: 2em;
}
/* ------------------------------------------------------------------------------------------------------- */

/* -----------------------------------------------FORM----------------------------------------------- */
form ul {
    padding-left: 2em;
}
section.personal-info {
    padding-left: .5em;
}

div.newsletter {
    max-width: 40em;
    margin: 1em;
    padding: 1em;
}

/* ------------------------------------------------------------------------------------------------------- */


@media screen and (min-width: 60em) {
    div.container {
        display: grid;
        grid-template-columns: 8fr 3fr;
        grid-gap: 0 1em;
    }

    header {
        grid-column: 1/3;
    }

    main {
        grid-column: 1/2;
        display: grid;
        grid-gap: 0em;
    }
    
    /* ----MAINSTORY------------------------------------------------ */

    section.mainstory {
        grid-column: 1/3;
        grid-row: 1/2;
        display: flex;
        flex-direction: column;
        grid-template-rows: auto;
        flex: 1 auto 100%;
    }

    section.mainstory figure {
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    section.mainstory figure div {
        flex: 1 auto 100%;
        grid-column: 1/3;
        background-image: url(MG2.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 65em;
    }

    section.mainstory figure div img {
        height: 100%;
        width: 100%;
        opacity: 0;
    }

    section.mainstory h3 {
        flex: 2 auto 100%;
        padding-top: 2rem;
        min-width: 75ch;
        margin-left: 0em;
    }

    section.mainstory p {
        flex: 0 0 auto;
        min-width: 75ch;
        padding-left: 2.5em;
    }
    /* ----ASIDE------------------------------------------------ */
    aside {
        grid-column: 2/3;
    }

    aside.extras {
        border: none;
        padding-left: 1em;
    }
/* ----PHOTOGALLERY------------------------------------------------ */
    section.photogallery {
        grid-row: 2/3;
        position: relative;
        overflow: hidden;
        padding-bottom: calc(72% + 1em);
    }

    section.photogallery img {
       width: fit-content;
       height: auto;
    }

    section.photogallery figure div {
        flex: 1 auto 100%;
        grid-column: 1/3;
        width: 68em;
    }

    section.photogallery figure div img {
        height: 100%;
        opacity: 0;
    }

    section.photogallery h3 {
        flex: 2 auto 100%;
        flex-wrap: wrap;
        margin: 0;
        padding-top: 2rem;
        min-width: 75ch;
    }

    section.photogallery p {
        flex: 0 0 auto;
        margin: 2em 0 0 0;
        min-width: 75ch;
    }

    div.gallery {
        max-width: 60em;
        margin: 0 auto;
        padding-left: 1em;
        display: grid;
        grid-template-rows: repeat(4, auto);
    }

    main.photogallery {
        grid-row: 2/3;
        position: relative;
        overflow: hidden;
        padding-bottom: calc(72% + 1em);
    }

    figure.displayedphoto {
        margin-top: 6em;
        padding-left: 0em;
        width: 100%;
        position: absolute;
        opacity: 0;
        transition: 1s ease-in-out;
        display: grid;
        overflow: hidden;
    }

    figure.displayedphoto img {
        width: 100%;
        height: 100%;
        grid-row: 1/2;
    }

    figure.displayedphoto figcaption {
        margin-top: 2em;
        margin-bottom: 1em;
        grid-row: 2/3;
    }

    nav.photo {
        grid-row: 3/4;
        display: flex;
        flex-wrap: wrap;
        margin-right: -4em;
        padding-inline-start: 3em;
    }

    .box img {
        width: 6.499em;
        height: 6.3em;
        margin-right: 1em;
        margin-top: 1em;
        object-fit: cover;
    }

    label {
        display: block;
        flex-basis: 10em;
    }

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

    input.gallerynav {
        display: none;
    }

    footer {
        display: inline-grid;
        grid-row: 5/5;
    }

    div.newsletter {
        margin: auto;
    }

    p {
        min-width: 50ch;
        max-width: 75ch;
    }
}