@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Playwrite+DE+LA:wght@100..400&display=swap');
html{
	font-size: 92%;
}

body{
	font: 400 1rem/1.5 'Lato', sans-serif;

}

.sidebar{
	display: flex;
	flex-direction: column;	
	background-color:  #FCFF78;
}

nav ul li{
	list-style: none;
	padding: 8px 16px;
}

nav a{
	text-decoration: none;
	color:black;
	font-weight: bold;
}

h1{
	font-family: 'Playwrite DE LA', script;
	color: white;
	font-size: 1.5rem;
	text-shadow: 3px 3px 3px cadetblue;
}
h2{
	font-family: 'Lato', sans-serif;
	color: white;
}
h3{
	margin-bottom: 0;
}
.container{
	display: flex;
}
.content{
	display: flex;
	flex-direction: column;
	align-items: center;

}

.where{
	text-decoration: none;
	color: black;
}
.where:hover{
	color: #FF76EC;
}

.rsvp-btn{
	text-decoration: none;
	background-color: #FF76EC;
	border-radius: 8px;
	padding: 10px;
	color: white;
	font-weight: bold;
}
.rsvp-btn:hover{
	box-shadow: inset -1px -1px 5px mediumvioletred;
}

header{
	background-image: url(../images/bday-cake.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center right;
	width: 100%;
	padding: 50px 5px 50px 15px;
}

#menu-toggle{
	display: none;
	background-color: #FCFF78;
	padding: 8px 16px;
	border: 0;
	text-align: right;
	width: 15%;
}

@media screen and (min-width: 625px){
	html{
		font-size: 100%;
	}
	header{
		padding: 100px 30px;
	}
	h1{
		font-size: 2rem;
	}
	h2{
		font-size: 1.8rem;
	}
}

@media screen and (min-width:800px){
	nav{
		width: 15%;
	}
}


@media screen and (max-width:800px){
	ul{
		display: none;
	}
	.sidebar ul{
		display:none;
	}
	.sidebar.active ul{
		display: block;
	}
	#menu-toggle{
		display: block;
	}
}