/*CSS document*/

@import url("https://use.typekit.net/oco5xve.css");

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

body {
    background-color: #F1EDEE;
}

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

div.container, div.home-container{
    max-width: 40em;
    margin: auto;
    
}

main.photogallery img{
    background-color: #8AA29E;
}

a{
    text-decoration: none;
    color: #000000;
    /* padding: 1em; */
}

nav a{
    font-family: sans-serif;
    font-weight: 700;
    color: #3D5467;
    padding: 0.6em;


}

nav a:hover{
    color:#DB5461;
}

nav {
    margin-bottom: 1em;
}


li{
    list-style: none;
    font-family: raleway;
}

h2{
    font-size: 2em;
    padding-left: 0.2em;
    color: #3D5467;
    font-weight: 700;
    padding-top: 0.2em;
    font-family: study-variable;
    
}

main a:hover{
    color: #8AA29E;
}

article h2{
    font-size: 3em;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.secondaryarticle h2{
    font-size: 1em;
    padding-left: 0.4em;
}

.secondary h2{
    font-size: 1.5em;

}

.secondary aside h2{
    font-size: 1em;
}

.tertiary h2{
    border-top: 0.1em solid;
    font-size: 1em;
    padding-top: 0.5em;

}

p, figcaption {
    padding-left: 0.4em;
    font-family: study-variable;  
    padding-bottom: 1em;
}

article p{
    margin-top: 1em;
    font-size: 1.3em;
    line-height: 1.4em;
    
}

figcaption {
    color:#5e5e5e; 
    margin-bottom: 1em;

}


h1 img{
    width: 15em;
    margin: 0.5em;
}



aside{
    background-color: #8AA29E;
    padding: 0.5em;
}

footer{
    background-color: #3D5467;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 0.2em;
    color:#F1EDEE;
    box-sizing: border-box;
    
}

footer p{
    padding-left: 0.2em;
    color:#F1EDEE;
    font-family: study-variable;
}

/*Photogallery*/

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

div.photo input{
    display: none;
}

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

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;
}
figure.photogallery{
    margin: 0;
    width: calc(66.5%-2em);
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s;
}

nav.photogallery-select {
    display: flex;
    grid-template-columns: 4;
    grid-gap: 0.2em;
    flex: 1 0 1em;
    padding-top: 0em;    
}


div.photo img{
	width: 100%;
}

div.photogallery input{
    display: none;
}

/*Newletter*/

label{
    font-family: study-variable;
}

section.personal-info{
    margin-bottom: 2em;
}

section.subscription-option{
    margin-bottom: 2em;
}

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

}


section.personal-info ul li{
	display: flex;
	flex-wrap: wrap;
    padding: 1em 0em 0em 1em;

}

button a{
    color: #F1EDEE;
}

button a:hover{
    color: #F1EDEE;
}

section.personal-info ul li label{
	flex: 0 0 8em; 
}

section.subscription-option ul li{
	margin: 0 1em 0 0; 
	flex: 1 0 15em;
    display: flex;
	flex-wrap: wrap; 
    padding: 1em 0em 0em 1em;

}

textarea {
	box-sizing: border-box;
	display: flex;
	resize: vertical;
	width: 100%;
	height: 6em;
	background: #fcfcfc;
	border: 1px solid #e8e8e8;
	padding: 0.4em;
	font-family: sans-serif;
	color: #777;
    margin-top: 1em;
	}

button {
    margin-top: 2em;
    margin-bottom: 1em;
    font-size: 1em;
    font-family: study variable;
    background-color: #3D5467;
    color: #F1EDEE;
    border-radius: 2em;
    border: none;
    padding: 0.5em;
}

button:hover{
    background-color: #8AA29E;
}

h3 {
    font-size: 1.5em;
}

@media screen and (min-width: 45em) {
    li{
        display: inline-block;
    }
    h2, p, nav a, header img, footer, .secondaryarticle h2{
        padding-left: 0em;
        margin-left: 0em;
    }

}

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

    div.container {
        max-width: 80em;
        padding: 0 1em;
        display: grid;
        grid-template-columns:3fr 1fr;
        grid-gap: 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;
        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 1em;
    }

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

    
}

@media screen and (prefers-color-scheme: dark){
    body{
        background-color: #1a1a1a;
    }

    p{
        color:#F1EDEE;
    }

    nav a{
        color:#8AA29E;
    }

    aside{
        background-color:#3D5467
    }

    h2{
        color:#8AA29E;     
    }
    
    footer{
        background-color: #5e5e5e;
    }

    div.container section{
        color:#F1EDEE;
    }

    div.container h3{
        color:#8AA29E;
    }

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

    h1 img{
        opacity: 0;
    }

    main.photogallery img{
        background-color: #3D5467;
    }

}

/* Make alternate logo!*/