*{
  margin: 0;
  padding: 0;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}

body{
  background-image: url(../Images/Background_Tiles/orange_paper.gif);
}

.header{
  background-color: rgb(236, 28, 36);
  width: 100%;
  margin-left: auto;
  text-align: center;
  margin-right: auto;
  height: 120px;
}

.header img{
  display: inline-block;
  width: 100px;
  height: 100px;
}

.header h1{
  display: inline-block;
  margin-left: 100px;
  width: 300px;
  text-align: justify;
  word-wrap: normal;
}

.navbar{
  width: 100%;
  text-align: center;
}

.navbar ul{
  list-style: none;
  display: flex;
}
.navbar ul li{
  width: 11.111111%;
  background-color: rgb(21, 78, 235);
  padding-top: 15px;
  cursor: pointer;
  padding-bottom: 15px;
}

.navbar ul li a{
  text-decoration: none;
  width: 100%;
  color: black;
  text-align: center;
}

.navbar ul li:hover {
  animation: colorSwitchNavBar;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  text-decoration: underline;
}

.navbar ul li:not(:hover){
  transition-duration: 1s;
}

.navbar .dropdownList{
  display: none;
  position: absolute;
  width: 11.1111%;
}

.navbar .dropdownList li{
  width: 100%;
  border-top: solid red 2px;
  border-bottom: solid red 2px;
}

.navbar .dropdownList li a{
  width: 100%;
  height: 100%;
  appearance: button;
  cursor: pointer;
}

.navbar .dropdownContainer:hover .dropdownList{
  display: block;
  z-index: 5;
  margin-top: 15px;
  transition: display 1s;
}

.navbar .dropdownContainer .dropdownList li:hover{
  animation: colorSwitchNavBar;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

.navbar .dropdownContainer .dropdownList li:hover a{
  animation: colorSwitchNavBar;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

@keyframes colorSwitchNavBar {
  0%   {background-color:red;}
  25%  {color: black; background-color:yellow;}
  50%  {color: white; background-color:blue;}
  75%  {background-color:green;}
  100% {background-color:red;}
}



.Intro_Stripe{
  text-align: center;
  width: 100%;
  background-color: green;
  color: white;
  padding-top: 25px;
  padding-bottom: 25px;
}

.Intro_Stripe h1{
  padding-left: 50px;
  padding-right: 50px;
}

.Image_Container{
  width: 100%;
  background-color: tomato;
  height: 1300px;
}

.left{
  width: 49.5%;
  float: left;
  height: 100%;
  border-right: 1px solid gold;
  background-image: url(../Images/Sign_Up/Student2.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.right{
  width: 49.4%;
  height: 100%;
  float: left;
  background-image: url(../Images/Sign_Up/Teacher2.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.button-inside-Image{
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button_a{
  border: none;
  background-color: rgb(2, 7, 255); 
  border: 2px solid rgb(76, 175, 80);
  color: red;
  text-decoration: none;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 1s;
  cursor: pointer;
  appearance: button;
  position: absolute;
  top: 44%;
  font-size: 60px;
  left: 18%;
  opacity: 0.6;
}

.button_a:hover{
  background-color: rgb(76, 175, 80);
  color: blue;
}