/*CSS document*/

body {
    font-family: "canto", serif;
    background-color: rgb(251, 250, 246);
}

div.container {
    max-width: 66em;
    margin: 0 auto;
}

section{
    max-width: 40em;
    margin: 0 auto 3em;
}

header {
	padding: .5em .5em .5em 0em;
	}

nav ul  {
    font-family: "questa-grande", serif;
    font-weight: 400;
    font-style: normal;     
    text-align: left;
    }

ul li 	{
    list-style-type: none;
}
nav ul li {
    display: inline;
	text-transform: uppercase;
	font-weight: bold;
	}
	
nav ul li a {
	color: rgb(131, 123, 173);
	padding: 0em 1em 0em 0em;
	}

a {
    text-decoration: none;
    height: 0;
    }


h1 {
	width: 5em;
    margin: 0em 0em 0em 0em;
	}

h3{
    color:rgb(74, 91, 132);
    font-size: 1.2em;
    font-style: normal;
    padding-top: .5em;
}

p{
    font-size: 1.1em;
    color:rgb(46, 46, 56);
}
    
figure {
    margin: 0;
}

img {
    width: 100%;
}

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

div.container-gallery{
    max-width: 60em;
    margin: 0 auto;
}

main.gallery{
    position: relative;
    overflow: hidden;
    padding-bottom: calc(72%);
}

main.gallery figure{
    margin: 0;
    width: calc(100%-2em);
    position: absolute;
    opacity: 0;
    transition: opacity .2s;
}

nav.gallery{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: .2em;
}
input.gallery{
    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;
}

h2.newsletter{
    color: rgb(50, 66, 138);
   margin-top: 1em;
}

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

section.personal-info li label{
    padding-right: 1em;
}

section p {
	margin-top: 0;
}

textarea {
	box-sizing: border-box;
	width: 20em;
	height: 10em;
	background: #fcfcfc;
	border: 1px solid #e8e8e8;
	font-family: sans-serif;
	color: rgb(131, 129, 135);
	}

section.personal-info ul {
    padding: 1.5em;
    margin-bottom: 1em;
    border: solid;
    border-color: #c3bfd8;
}

section.learn-more ul{
    padding: 1.5em;
    margin-bottom: 1.5em;
    border: solid;
    border-color: #c3bfd8;
}

section.area {
    padding: 1.5em;
    margin-bottom: 1em;
    border: solid;
    border-color: #c3bfd8;
}



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

    div.container {
        display: grid;
        grid-template-columns: 3fr 3fr;
        grid-gap: 0 4em;
    }
    header{
        grid-column: 1/4;
    }
    main.index{
        grid-column: 1/3;
        display: grid;
        grid-template-columns: repeat(3, 2fr);
        grid-gap: 0 4em;
     }
    aside{
        grid-column: 3/4;
        column-width: 20em;
     }
    section.mainstory {
        grid-column: 2/4;
        grid-row: 1/3;
        display: flex;
        flex-direction: column;
    }

    section.mainstory figure{
        flex: 1 0 8em;
        display: flex;
        flex-direction: column;
    }

    section.mainstory figure div{
        flex: 1 0 0em;
        background-image: url(images/dance2.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

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

    section.mainstory figure figcaption{
        flex: 0 0 0em;
        text-decoration: none;
    }
        
    section.mainstory h3 {
        flex: 0 0 auto;
        margin: 0 0 0 0;
        
    }

    section.mainstory p{
        flex: 0 0 auto;
    }

    article{
        grid-column: 1/3;
        max-width: 50em;
        padding-right: 5em;
    }


div.container-newsletter{
    max-width: 80em;
    display: grid;
    grid-template-columns: repeat(2, 2fr);
}

div.container-newsletter footer{
    grid-column: 1/2;
}
figure.newsletter{
    grid-column: 1/2;
    margin: 2.5em 1.5em 0 0;
}

section.personal-info ul li {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1em;
}

h2.newsletter{
    width: 20em;
}

}