@import url("NavBar.css");

body {
  background-image: repeating-conic-gradient(#101c99 0% 25%, #521b94 0% 50%);
  background-position: 0 0, 35px 35px;
  background-size: 70px 70px;
  background-color: #521b94;
  margin: 0;
  font-family: sans-serif;
}

p {
  color: white;
  margin: 5px 0;
  padding: 0;
  text-align: center;
  font-style: italic;
}

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

.grid-container {
  columns: 4 225px;
  column-gap: 1.5rem;
  width: 90%;
  margin: 0 auto;
  animation: fadeIn 3s 1 0.5s ease backwards;
}

.grid-container > div {
  background-color: #303030;
  width: 150px;
  margin: 0 1.5rem 1.5rem 0;
  display: inline-block;
  width: 100%;
  border: solid 2px white;
  border-radius: 4px;
  padding: 5px;
}

.grid-item {
  width: 100%;
}

#title {
  width: 50%;
  margin: -3% 25% 50px 25%;
  animation: galleryTitleWordsIntro 1s 1 ease;
}

/*Animations*/
/*move object downwards from top of page*/
@keyframes galleryTitleWordsIntro {
  0% {margin-top: -100%;}
  100% {margin-top: -3%;}
}

@keyframes fadeIn {
  0% {opacity: 0%;}
  100% {opacity: 100%;}
}


/*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);}
}

/*nav Menu Special Animation*/
@keyframes navMenuIntro {
  0% {width: 100%; clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0);}
  100% {width: 100%; clip-path: polygon(0% 0%, 0% 50%, 0% 50%, 30% 0%);}
}
@keyframes navMainButtonIntro {
  0% {height: 200px; 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%; padding-top: 16px}
  100% {padding-left: 0px;}
}
@keyframes navMenuTutorialTextIntro {
  0% {opacity: 0;}
  50% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}