.parallax {
	background-image: url('music.jpeg');
  
	height: 100vh; 
	width: 100%;
  
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: lightblue;
	text-align: center;
}

h1 { 
    color: black; 
    font-family: 'Lato', sans-serif; 
    font-size: 54px; 
    font-weight: 300; 
    line-height: 58px; 
    margin: 5%;
	animation: type 2s steps(45), blink .7s step-end 2s infinite alternate;
}

  @keyframes type {
    0% {
      width:0ch;
    }
    100% {
      width:30ch;
    }
  }

  @keyframes blink {
   40% { border-color: transparent;
   }
}

footer {
	font-size: 14px;
	background-color: red;
	width: 100%;
	bottom: 0px;
	padding: 20px;
	text-align: center;
}

.topnav li.a, li, .rightnav {
	float: none;
	list-style-type: none;
	overflow: hidden;
	background-color: rgb(0, 0, 0);
}  

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
  
li a:hover:not(.active), a:focus:not(.active), .active {
	color: rgb(0, 0, 0);
    background-color: yellow;
	text-decoration: underline;
}

p {
    color: black; 
    font-family: 'Roboto', sans-serif;
    font-size: 16px; 
    line-height: 26px;
    margin: 1%;
}

.food {
	margin: 0;
	padding: 0;
	height: 5fr;
	object-fit: cover;
	width: 100%;
	height: auto;
}

.grid-container{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-items: center;
	grid-column-gap: 5%;
	grid-row-gap: 10;
}

.grid-item{
	height: 5%;
	object-fit: cover;
	width: 100%;
	height: auto;
}

.skip{
	position: relative;
	left: -2000px;
}

.skip:focus{
	position: static;
}

.project_description {
    color: black;
	line-height: 1.2;
	width: 80%;
	margin-left: 5%;
}

.flex-container {
	display: flex;
	flex-direction: column;
}

.flip-card{
	width: 300px;
	height: 450px;
	padding: 20px;
	margin: auto;
	perspective: 800px;
	display: block;
 }
 
 .flip-card-inner{
	 position: relative;
	 width: 100%;
	 height: 100%;
	 text-align: center;
	 transform-style: preserve-3d;
	 transition: transform 1.0s;
 }
 
 .flip-card:hover .flip-card-inner, .flip-card:active .flip-card-inner, .flip-card:focus .flip-card-inner, .flip-card:focus-within .flip-card-inner{
	 transform: rotateY(180deg);
 }
 
 .flip-card-front, .flip-card-back {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 backface-visibility: hidden;
	 -webkit-backface-visibility: hidden;
 }
 
 .flip-card-front{
	 background-color: yellow;
 }
 
 .flip-card-back h1{
	 margin-top: 14px;
 }
 
 .flip-card-back {
   background-color: yellow;
   color: #000000;
   line-height: 200%;
   transform: rotateY(180deg);
 }
 
 .flip-card-back p{
	 text-align: center;
	 font-family: 'Fjalla One', sans-serif;
	 font-size: 20px;
 }
 
 .flip-card.focus-within .flip-card-inner{
	 transform: rotateY(180deg);
 }

h2 {
	font-size: 20px;
	font-weight: bold;
	position: relative;
	margin: 2% 0% 2%;
	width: 100%;
}

.picture {
	width: 90%;
	margin: 5%;
}

.paragraph {
	margin: 5%;
	width: 90%
}

.fooddesc {
	margin: 5%;
	width: 80%;
}

#michigan {
	margin: 3%;	
	padding: 3%;
}

form {
    border: 1px solid black;
    border-radius: 10px;
	}

input {
    width: 50%;
	font-family: 'Lato', sans-serif;
	justify-content: center;  
    padding: 10px;
    margin: 7.5px;
	}

label{
	line-height: 1.25;
 	}

textarea{
	width: 50%;
	font-family: 'Lato', sans-serif; 
	}

.button {
	transform-style: preserve-3d;
	background: yellow;
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
	border: 2px solid black;
	border-radius: 0.75em;
	font-family: 'Lato', sans-serif; 
    font-size: 85%;
    padding: 1.25em 2em;
    margin-bottom: 25px;
	}

.button::before {
	transform: translate3d(0, 0.75em, -1em);
	background: black;
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
    width: 100%;
    height: 100%;
	position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
	}

.button:hover {
    transform: translate(0, 0.25em);
	background: green;
	}

.button:hover::before {
    transform: translate3d(0, 0.5em, -1em);
	}
   
.button:active {
    transform: translate(0em, 0.75em);
	background: black;
    }

.button:active::before {
    transform: translate3d(0, 0, -1em);
    }

@media only screen and (min-width: 530px) {
	.topnav {
		list-style-type: none;
		margin: 1%;
		padding: 0;
		overflow: hidden;
		background-color: rgb(36, 36, 36);
	}
	li {
		float: left;
	}
	.rightnav {
		float: right;
	}

	.project_description {
		width: 100%;
		margin-left: 5%;
	}
	.picture {
		width: 70%;
	}
	.sticky {
		position: fixed;
		top: 0;
		width: 100%;
	}
	.sticky+#main {
		padding-top: 60px;
	}
}

@media only screen and (min-width: 800px) {
	.flex-container {
		flex-direction: row;
	}
	.grid-container {
		grid-template-columns: repeat(3, 1fr);
	}
	#michigan {
		display: flex;
	}
	.picture {
		width: 90%;
	}
	.paragraph {
		width: 70vh;
	}
}

@media only screen and (min-width: 1200px) {
	.grid-container {
		grid-template-columns: repeat(4, 1fr);
	}
	.picture {
		width: 70%;
	}
}

@media screen and (prefers-reduced-motion: reduce) {
	#index {
		animation: none;
		border-right: none;
	}
    .parallax {
        background-attachment: scroll;
    }

    .flip-card-inner {
        transition: none;
    }
  }