@import url("NavBar.css");

body {
  animation: backgroundAnimation 20s infinite 2s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0px 10%;
  background-color: #0d1b76;
  margin: 0;
}

h1 {
  animation: fadeInDelay 3s 1;
  color: #d4ffff;
  font-family: Verdana, sans-serif;
  font-size: 60px;
  margin: -10px 70px 80px 70px;
}

p {
  font-family: Verdana, sans-serif;
  font-size: 20px;
  color: white;
  padding-left: 30px;
}

/*Custom Dividers*/
.TopDivider {
  animation: slideFromRight 2s 1;
  height: 170px;
  background-color: #FF931F;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 100%);
  padding-right: 10%;
  display: flex;
  justify-content: flex-end;

}

.MiddleDivider {
  animation: slideFromLeft 2s 1;
  height: 600px;
  background-color: rgba(100, 100, 100, 1);
  clip-path: polygon(0 0, 100% 55%, 0% 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.MiddleDivider > a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  background-color: #4640e6;
  border: solid 3px #1b195e;
  margin-top: 10px;
  padding: 10px 10px 10px 10px;
  width: 240px;
  margin-left: 30px;
}

.MiddleDivider > a:hover {
  background-color: #2822d4;
}

.BottomDivider {
  animation: slideFromRight 2s 1;
  overflow: hidden;
  height: 600px;
  background-color: #646464;
  clip-path: polygon(-30% 100%, 100% 100%, 100% 50%);
}

/*Shadow style*/
.shadow {
  animation: shadowDelayAnim 4s 1;
  filter: drop-shadow(0px 0px 15px black);
}

/*Special divder styler for background intro*/
.IntroBackground {
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: none;
  animation: BackgroundSlide 2s 1;
}

/*Custom tagged styles*/
#hm1 {margin: 15px;}
#hm1:hover {color:black}

#hm2 {margin: 15px;}
#hm2:hover {color:black}

#hm3 {margin: 15px;}
#hm3:hover {color:black}

#titleImage {
  animation: fadeInDelay 3s 1;
  min-width: 554.400px;
  min-height: 311.850px;
  width: 50%;
  height: 50%;
}

#twitterLink {
  transition: filter 0.5s ease;
  float: right;
  padding-top: 400px;
  padding-right: 10px;
  width: 164px;
  height: 270px;
}

#twitterLink:hover {
  filter: drop-shadow(0px 0px 15px lightblue);
}

#youtubeLink {
  transition: filter 0.5s ease;
  float: right;
  padding-top: 400px;
  padding-right: 10px;
  width: 164px;
  height: 270px;
}

#youtubeLink:hover {
  filter: drop-shadow(0px 0px 15px red);
}

/*Animations*/

/*Run a animation/slideshow in the background
  Stays on an image for a certain amount of time, then fade to the next image*/
@keyframes backgroundAnimation {
  0%, 100% {background-image: url("../Images/IndexImages/Toaster.jpg");}
  15% {background-image: url("../Images/IndexImages/Toaster.jpg"), url("../Images/IndexImages/Nemo.jpg");}
  20% {background-image: url("../Images/IndexImages/Nemo.jpg");}
  35% {background-image: url("../Images/IndexImages/Nemo.jpg"), url("../Images/IndexImages/Sky.jpg");}
  40% {background-image: url("../Images/IndexImages/Sky.jpg");}
  55% {background-image: url("../Images/IndexImages/Sky.jpg"), url("../Images/IndexImages/Neal.jpg");}
  60% {background-image: url("../Images/IndexImages/Neal.jpg");}
  75% {background-image: url("../Images/IndexImages/Neal.jpg"), url("../Images/IndexImages/White.jpg");}
  80% {background-image: url("../Images/IndexImages/White.jpg");}
  95% {background-image: url("../Images/IndexImages/White.jpg");}
}

/*slide object in from the left*/
@keyframes slideFromLeft {
  0% {margin-right: 100%;}
  100% {margin-right: 0%;}
}

/*slide object in from the right*/
@keyframes slideFromRight {
  0% {margin-left: 100%;}
  100% {margin-left: 0%;}
}

/*Fade in object*/
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/*Fade in object delayed*/
@keyframes fadeInDelay {
  0% {opacity: 0;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}

/*special animation made for delayed cool effect*/
@keyframes shadowDelayAnim {
  0% {filter: drop-shadow(0px 0px 0px black);}
  50% {filter: drop-shadow(0px 0px 0px black);}
  100% {filter: drop-shadow(0px 0px 15px black);}
}

/*slide background into website*/
@keyframes BackgroundSlide {
  0% {background-position: 1000px 0%; background-image: url("../Images/IndexImages/Toaster.jpg");}
  100% {background-position: 0px 10%; background-image: url("../Images/IndexImages/Toaster.jpg");}
}

/*nav Menu default intro Animations*/
@keyframes navMenuIntro {
  0% {height: 100%; clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0);}
  100% {height: 200px; clip-path: polygon(0% 0%, 0% 50%, 0% 50%, 30% 0%);}
}

@keyframes navMainButtonIntro {
  0% {height: 100%; width: 100%; clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);}
  100% {height: 120px; clip-path: polygon(0% 0%, 0% 95%, 80% 100%, 100% 0%);}
}

@keyframes navButtonsIntro {
  0% {padding-left: 80%;}
  100% {padding-left: 0px;}
}

@keyframes navMenuTutorialTextIntro {
  0% {opacity: 0;}
  50% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}