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

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

header {
    padding: 1rem .5rem 0;
}

nav, div.container nav {
    padding: 1rem 0;
    font-family: "copal-std-solid", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem; 
}

nav.label{
    flex: auto;
}

h1 {
    width: 6rem;;
}

h2{
    font-family: "copal-std-solid", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem; 
}

a {
    text-decoration: none;
}

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

section.main h2{
    padding-top: .5rem;
    font-size: 3em;
}

section.secondary h2 {
    padding-top: .5rem;
    font-size: 2em;
}

section.tertiary h2 {
    border-top: 1px solid rgb(84, 119, 157);
    padding-top: .5em;
    font-size: 1em;
}

h2, li a {
    color: #2d2e2e;
}

li, div.container li {
    line-height: 1.4em;
    font-family: "copal-std-solid", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem; 
}

p {
    color: rgb(34 34 34);
    font-family: "private-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding-bottom: 1.8rem;
    line-height: 1.2em;
}

figcaption {
    font-style: italic;
    font-family: sans-serif;
    color: rgb(113, 113, 113);
    padding: .5rem 0 1.2rem;
}

aside h2 {
    padding-top: .3rem;
}

article h2 {
    font-size: 2.5em;
    padding: 1.5rem 0 .5rem 0;
}

h2, p, figcaption {
    margin: 0 .5rem;
}

aside {
    background-color: #Bcabae;
    padding: 1rem .5rem;
}

footer {
    background-color: #Bcabae;
    box-sizing: border-box;
}

footer p {
    color: #fafafa;
    padding: auto;
    padding-top: .75rem;
}


div.gallery h1{
    padding-top: 2em;
	margin-bottom: 1em;
}



div.gallery h1 {
    padding-top: 2em;
    margin-bottom: 1em;
}

div.gallery article {
    position: relative;
    overflow: hidden;
    padding-bottom: calc(100% + 2em);
}

div.gallery figure {
    margin: 0;
    width: 100%;
    position: absolute;
    opacity: 0;
    transition: opacity 1s;
}

div.gallery main{
	display:block;
	overflow: hidden;
	position: relative;
    max-width: 70%;
	margin: auto;
	grid-template-columns: 1fr;
	grid-column-gap: 3em; 
}

div.gallery nav {
    display: grid;
    grid-template-columns: repeat(8, 2fr);
    grid-gap: 0.8em;
    overflow: hidden;
}

input {
    display: none;
}  

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


section.form input{
    color: rgb(3, 3, 3);
  text-decoration: none;
  font-family: "termina", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 13px;
  border-color:#Bcabae;
  box-sizing: 4em;
}

textarea{
    color: rgb(3, 3, 3);
  text-decoration: none;
  font-family: "termina", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 13px;
}

h3{
    color: rgb(23, 22, 22);
   text-decoration: none;
   font-family: "termina", sans-serif;
   font-weight: 700;
   font-style: normal;
   font-size: 13px;}

nav.label{
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 1em 0em;
    grid-gap: 0.2em;
	margin-left: 5em;
    margin-top: 10em;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: rgb(34, 34, 34);
    }

    h1 {
        background-image: url("Skulproof logo fashion dark1.png");
    }

    nav ul li a {
        color:  rgb(249, 192, 192);
    }

    nav ul li a:hover {
        color: #f6e8e8;
    }

    h3 {
        color: #f6e8e8;
    }

    header h1 img {
        opacity: 0;
    }

    h2 {
        color:#f6e8e8;
    }

    p, li {
        color: #Bcabae;
    }

    figcaption {
        color: rgb(249, 192, 192);
    }

    section.tertiary-story {
        border-top: 2px solid rgb(249, 192, 192);
    }

    form {
        background-color:rgb(34, 34, 34);
    }

    textarea {
        background: rgb(34, 34, 34);
        border: 3px solid #Bcabae;
        color: #f6e8e8;
    }

    button[type = subscribe] {
        font-family: circe-slab-a, serif;
        font-weight: 500;
        font-style: normal;
        color: rgb(34,34,34);
        background-color: #f6e8e8;
        margin: 0 .5rem 0 .5rem;
    }
    
    section.personal-info ul li input[type="text"] {
        border: 2px solid #Bcabae;
        color: #f6e8e8;
        background: rgb(34, 34, 34); 
    }

    section.personal-info ul li select {
        background-color: rgb(34, 34, 34);
    }

    section label[for = feedback] {
        display: block;
        font-family: circe-slab-a, serif;
        font-weight: 500;
        font-style: normal;
        margin: 0 .5rem 0 .5rem;
        color:#f6e8e8;
    }
    
    footer {
    background-color: rgb(249, 192, 192); 
    padding: .75rem .5rem .75rem .5rem;;
    width: 100%;
    color: rgb(249, 192, 192);
    box-sizing: border-box;
}

    footer p {
    color: rgb(34, 34, 34);
}
}


@media screen and (min-width: 40em) {
    nav ul li {
        display: inline;
        margin-right: 0.75rem;
    }

    header, footer {
        padding: 1rem 0 0 0;
    }

    h2, p, figcaption {
        margin: 0;
    }

    p {
        padding-bottom: .8em;
    }

    main p {
        margin: 0 0 1rem 0;
    }

    aside p {
        margin: 0 0 0.7rem 0;
    }

}


@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: 60em;
    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.gallery main{
	display: block;
	overflow: hidden;
	position: relative;
	max-width: 100%;
	margin: auto;
}

div.gallery nav{
	display: grid;
	grid-template-columns: repeat(8,1fr);
	grid-gap:.5em;
}

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

}