html {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

body {
  background-color: #635985;
  margin: 0px;
  padding: 0px;
}

.navbar {
  background-color: #18122B;
  width: 100%;
  top: 0%;
  height: 55px;
  padding-top: 15px;
  padding-left: 10px;
  z-index: 99;
}

.navButton {
  background-color: #443C68;
  font-size: 30px;
  border: hidden;
  border-radius: 5px;
  box-shadow: 2px 2px #6f6982;
  color: #e2dfed;
  margin-left: 10px;
}

@keyframes navButtonHover {
  from {
    background-color: #443C68;
    box-shadow: 2px 2px #6f6982;
  }

  to {
    background-color: #c5c0d3;
    color: #3a2f6a;
    box-shadow: 0px 0px #6f6982
  }
}

@keyframes navButtonHoverStop {
  from {
    background-color: #c5c0d3;
    color: #3a2f6a;
  }

  to {
    background-color: #443C68;
    box-shadow: 2px 2px #6f6982;
    color: #e2dfed;
  }
}

.navButtonHoverScript {
  animation-name: navButtonHover;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

.navButtonHoverScriptStop {
  animation-name: navButtonHoverStop;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

.navButton:hover {
  cursor: pointer;
  background-color: #c5c0d3;
  color: #3a2f6a;
  box-shadow: 0px 0px #6f6982
}

.claudius {
  position: fixed;
  top: 15%;
  right: 3%;
  width: 321px;
  height: 429px;
  animation-name: claudiusLoad;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

@keyframes claudiusLoad {
  from {
    right: -300px;
  }

  to {
    right: 3%;
  }
}

.homeText {
  border-radius: 25px;
  background: #3a2f6a;
  color: #e2dfed;
  font-size: 30px;
  margin: 0.19%;
  margin-left: 1.3%;
  height: 90%;
  width: 80%;
  padding: 0.5%;
  padding-left: 1%;
  margin-top: 5%;
  animation-name: homeTextLoad;
  animation-iteration-count: 1;
  animation-duration: 1.8s;
}

@keyframes homeTextLoad {
  0% {
    margin-left: -2000px;
  }

  90% {
    margin: 0.19%;
    margin-left: 1.3%;
    margin-top: 5%;
  }
}

@keyframes hamletSucksTextLoad {
  0% {
    margin-top: 2000px;
  }

  90% {
    margin: 0.19%;
    margin-left: 1.3%;
    margin-top: 3%;
  }
}

.hamletSucksText {
  border-radius: 25px;
  background: #3a2f6a;
  color: #e2dfed;
  font-size: 30px;
  margin: 0.19%;
  margin-left: 1.3%;
  height: 90%;
  width: 80%;
  padding: 0.5%;
  padding-left: 1%;
  margin-top: 3%;
  animation-name: hamletSucksTextLoad;
  animation-iteration-count: 1;
  animation-duration: 1.8s;
}

@keyframes stopTeachingTextLoad {
  from {
    font-size: 0px;
  }

  to {
    font-size: 30px;
    border-radius: 25px;
    background: #3a2f6a;
    color: #e2dfed;
    margin: 0.19%;
    margin-left: 1.3%;
    height: 90%;
    width: 80%;
    padding: 0.5%;
    padding-left: 1%;
    margin-top: 5%;
  }
}

.stopTeachingText {
  font-size: 30px;
  border-radius: 25px;
  background: #3a2f6a;
  color: #e2dfed;
  margin: 1.9%;
  padding: 0.5%;
  padding-left: 1%;
  margin-top: 3%;
  bottom: 20px;
}

@keyframes grantImgLoad {
  from {
    height: 0%;
    width: 0%;
    transform: rotate(720deg);
    box-shadow: 0px 0px #6f6982;
  }

  to {
    height: 37%;
    width: 28%;
    transform: rotate(0deg);
    box-shadow: 2px 2px #6f6982;
  }
}

.grantImg {
  height: 37%;
  width: 28%;
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 5px;
  box-shadow: 2px 2px #6f6982;
  animation-name: grantImgLoad;
  animation-iteration-count: 1;
  animation-duration: 1.8s;
}

.plotText {
  border-radius: 25px;
  background: #3a2f6a;
  color: #e2dfed;
  font-size: 30px;
  margin: 0.19%;
  margin-left: 1.3%;
  height: 90%;
  width: 80%;
  padding: 0.5%;
  padding-left: 1%;
  margin-top: 3%;
  animation-name: hamletSucksTextLoad;
  animation-iteration-count: 1;
  animation-duration: 1.8s;
}

.lazyChars {
  font-size: 150px;

}