@charset "utf-8";

html{
    height: 100vh;
    text-align: center;	

}
html, body, h1, p, ul{
	margin:0;
	padding:0;
}

html, body{
    height: 100vh;
    
}
header{
	min-height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	}
.responsive{
	width: 100%;
	height: auto;
}
nav{
	min-height: 75px;
	justify-content: space-between;
}
.nav-links {
    list-style: none;
}

.nav-links li {
    display: inline-block;
    padding: 0 20px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.burger {
    display: none;
}
.navigation ul{
	list-style-type: none;
	list-style-image: none;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.navigation ul li{
	display: block;
	width: 15%;
}

.navigation ul li a{
    display: block;
    padding: 10%;
    font-family: 'chewy';
    color: white;
    font-size: 1.75em;
    text-shadow: 1px 1px 38px rgba(8,5,85,1.00);
    -webkit-box-shadow: 0 0px;
    box-shadow: 0 0px;
	text-decoration: none;
}

.navigation ul li a:hover {
	font-size: 2.75em;
	
}
main{
	padding: 40px;
}

body{
	text-align:center;
	background-color: rgba(162,241,255,1.00);
	}
h1 {
    font-family: 'chewy';
    font-size: 5em;
    color: white;
    text-shadow: 1px 1px 71px rgba(8,5,85,1.00);
    -webkit-box-shadow: 0 0px;
    box-shadow: 0 0px;

} 
main p {
	text-align: left;
	margin: 0px 0px 0px 20px;
	color: purple;
}

footer{
	min-height: 75px;
	justify-content: center;
	align-items: center;
}

footer p{
	font-family: 'roboto-thin';
	font-size: 1em;
	color: white;
	margin-top: 100px;
}


main p{
	font-family: 'roboto-bold';
	font-size: 1.25em;
}
.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}
@media screen and (max-width: 768px) {
    .nav-links {
        position: absolute;
        right: 0;
        height: 92vh;
        top: 8vh;
        background-color: #333;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }

    .nav-links li {
        opacity: 0;
    }

    .burger {
        display: block;
        cursor: pointer;
    }

    .burger div {
        width: 25px;
        height: 3px;
        background-color: white;
        margin: 5px;
        transition: all 0.3s ease;
    }

    .nav-active {
        transform: translateX(0);
    }

    @keyframes navLinkFade {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    .nav-links li {
        animation: navLinkFade 0.5s ease forwards 0.5s;
    }
}


/*.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
} */

/*.chewy-regular {
  font-family: "Chewy", system-ui;
  font-weight: 400;
  font-style: normal;
} */