/*MIDTERM*/

@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Stoke&family=Vast+Shadow&display=swap');

/*
font-family: 'Fredericka the Great', cursive;
font-family: 'Stoke', serif;
font-family: 'Vast Shadow', cursive;
*/

*{margin: 0; padding: 0; box-sizing: border-box; 
  -webkit-user-select: none; -ms-user-select: none; user-select: none;
}

body
{
  background-color: #F2EDDC;
  font-family: 'Stoke', serif;

}

nav
{
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  border-bottom: dashed 25px #BF452A;
  text-shadow: 2px 2px black;
}

ul li, ul li a
{
  display: inline-block;
  padding: 0px 5px;
  text-decoration: none;
  color: #F2EDDC;
  border-radius: 5px 5px 0 0;
  border-bottom: 1px solid black;
  transition: 500ms;

}


ul li a:hover
{
  color: #91BF8F;
  background-color: #F2EDDC;
  margin-bottom: 0;  
}
ul
{
  background-color: #BF452A;
  text-align: center;
  font-size: 40px;
  padding-right: 10px;
  padding-top: 6px;
  border-bottom: groove 3px #385737;
}
ul li
{
  margin-inline: 15px;
}
.nemo, .nemo:hover
{
  font-size: 70px;
  background-color: #BF452A;
  border: 0;
  border-bottom: 0;
}
li:nth-child(3)
{
  border-bottom: 0;
}
.blackboard
{
  background-image: url(../img/chalkboard.jpg);
  margin: 20px;
  font-family: 'Fredericka the Great', cursive;
  border: 6px groove grey;
}
.blackboard h1{margin: 0;}

h1
{
  width: 100%;
  text-align: center;
  color: #079766;
  font-size: 60px;
  font-weight: normal;
  margin: 20px auto 0px auto;
  text-shadow: 2px 2px black;
}
header
{
  display: flex;
  justify-content: center;
  margin: 0px auto 20px auto;
  padding: 5px;
  color: #079766;
  font-size: 30px;
  text-shadow: 1px 1px black;
}
.specialty
{
  color: #c74942;
  font-size: 18px;
  width: 800px;
  margin: 1px auto;
  display: flex;

}
.specialty p
{
  text-align: center;
  padding: 5px;

}
.about p, .display p
{
  color: #BF452A;
  font-size: 23px;
  text-align: left;
  text-shadow: 1px 1px grey;
}

.display div
{
  display: flex;  
  margin: 30px auto 0px auto;
  width: 800px;
  justify-content: center;
  padding: 3px;

}
.out-about
{
  display: flex;  
  margin: 30px auto 0px auto;
  width: 800px;
  justify-content: center;
  padding: 3px;
}
.pic
{
  float: left;
  padding: 3px 3px 0px 3px;
}
.about 
{
  width: 800px;
  margin: 20px auto;

}
.about p
{
  margin-bottom: 30px;
  text-align: justify;
}


.click p
{
  font-size: 20px;
}

.forms
{
  font-size: 50px;
  color: #079766;
  text-shadow: 2px 2px black;

}

.crust-size
{

  height: 200px;
  padding-top: 20px;
  width: 100%;
  display: flex;
  justify-content: space-around;

}

.size
{
  width: 500px;
  height: 180px;
  text-align: center;




}
.dropdown
{
  width: 300px;
  height: 40px;
  font-size: 35px;
  font-family: 'Fredericka the Great', cursive;
  color: #c74942  ;
  background-color: #F2EDDC;
  border: 0px;
  border-radius: 5px;
  padding: 0;

}

.crust
{

  width: 520px;
  height: 180px;
  text-align: center;



}
.crust-type
{
  font-size: 30px;
  color: #c74942;
  padding: 25px;
  margin: 5px;

}
.crust-type label
{
  padding: 5px;
}


input:checked + label
{
  border: dashed 3px #079766;
}
.size-type
{


  color: #c74942;


}


label img
{
  width: 75px;
  height: 75px;
}
label
{
  padding: 3px;
}

input:checked + label img
{
  border: dashed 3px #079766;
  background-color: #F2EDDC;
  border-radius: 10px;

}

.toppings
{
text-align: center;
font-size: 50px;


}

.ingredient
{
  display: inline-block;
  text-align: center;
  width: 120px;
  color: #c74942;
  font-size: 25px;
}

.comments
{
  width: 100%;
  margin: 15px;
  font-size: 40px;
  text-align: center;
}
textarea
{
  width: 500px;
  height: 50px;
  border: solid 2px #079766;
  display: block;
  margin: 10px auto;
  padding: 3px;
  font: 20px cambria;
  background-color: #F2EDDC;
}
.personal-info
{
  height: 350px;
  width: 900px;
  text-align: center;
  margin: 10px auto;
  padding: 10px;
  border: 2px dashed #1C6939;
  display: flex;
  justify-content: center;
}
.personal
{

  width: 350px;
  color: #c74942;
  font-size: 25px;
  text-align: left;
  padding: 5px;
  margin: 10px;

}
div.personal input
{
  height: 30px;
  width: 300px;
  font-size: 20px;
  padding: 0px;
  margin: 10px;
  margin-top: 0;
  border: 1px dashed #079766;
  background-color: #F2EDDC;

}
.zipstate
{
  width: 300px;
  height: 60px;
  display: flex;
}
.state
{
  padding: 5px;
  height: 60px;
}
.zip
{
  padding: 5px;
  height: 60px;
}
.select-state
{
  width: 73px;
  font-size: 20px;
  font-family: 'Stoke', serif;
  color: #c74942;
  background-color: #F2EDDC;
  border: 0;
}
.buttons
{
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 20px;
}
.buttons input
{
  width: fit-content;
  height: fit-content;
  background-color: #F2EDDC;
  border-radius: 5px;
  border: outset 4px #079766;
  font-family: 'Fredericka the Great', cursive;
  font-size: 30px;
  color: #c74942;
  margin: 0 30px;
  padding: 0 10px;
  transition: 300ms;
}
.buttons input:hover
{
border-color: #c74942;
color: #079766;
}
.contact-info
{
  display: flex;
  justify-content: space-around;
  text-align: center;
  text-shadow: 1px 1px grey;
}
.contactpage
{
  display: flex;
  justify-content: center;
  margin: 20px auto;
}
.contactpage img
{
  margin: 30px;
}
.contact
{
  width: 300px;
  color: #c74942;
  font-size: 25px;
  text-align: center;
  padding: 5px;
  margin: 10px;
}
div.contact input
{
  height: 30px;
  width: 300px;
  font-size: 20px;
  padding: 0px;
  margin: 10px;
  margin-top: 0;
  border: 2px solid #079766;
  background-color: #F2EDDC;
}
div.contact textarea
{
  width: 300px;
  height: 70px;
  border: solid 2px #079766;
  margin: 10px;
  padding: 3px;
  font: 20px cambria;
  background-color: #F2EDDC;
}
.inside-pizza
{
  display: flex;
  justify-content: center;
  margin: 0px auto;
}

.click-here
{
  position: relative;
  width: 335px;
  height: 122px;
  background-color: transparent;
  bottom: 361px;
  left: 92px;
  z-index: 1;
  overflow: hidden;
  opacity: 0%;
}


/* chalk green #079766 - chalk red #c74942 */