body{
  background-color: #f7ebbb;
}

/* @keyframes grain {
  0%, 100% {transform: translate(0,0);}
  10% {transform: translate(-5%, -10%);}
  30% {transform: translate(5%, 6%);}
  50% {transform: translate(-10%, -1%);}
  70% {transform: translate(7%, 8%);}
  90% {transform: translate( -6%, -2%);}
} */

.grain-overlay{
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.top{
  text-align:center;
  padding: 100px;
}

.welcome{
  font-family: CooperBlack;
  top: 65px;
  right: 50%;
  font-size: 20pt;
  padding: 1px;
  /* z-index: top; */
  position: absolute;
  animation: title-anim 5s infinite ease-in-out;
  animation: title-rotate 4s infinite ease-in-out;
}

.title{
  color: #4c37eb;
  font-family: CooperBlack;
  size: 72pt;
  padding: 0px;
  position:relative;
  scale: 3;
  z-index: bottom ;
  animation: title-anim 6s infinite ease-in-out;
  animation: title-rotate 5s infinite ease-in-out;
}

@keyframes title-anim{
  0%, 100% {transform: translateY(-5%);}
  50% {transform: translateY(5%);}
  100%{transform: translateY(-5%);}
}

@keyframes title-rotate{
  0%, 100% {transform: rotate(-1deg);}
  50% {transform: rotate(1deg);}
  100%{transform: rotate(-1deg);}
}

@font-face {
  font-family: russian;
  src: url(Metro.otf);
}

@font-face {
  font-family: CooperBlack;
  src: url(COOPBL.TTF);
}

@keyframes slidein {
  100% { 
    transform:scale(1.02) translateY(-5%);
  }
}

@keyframes projButt {
  100% { 
    transform:scale(1.02);
  }
}
.youtubeButton{
  width: 23%;
  height: 90%;
  border-radius: 50px;
  background-color: #89cc3c;
  position: absolute;
  left: 14%;
  translate: -50% 0;
  font-family: CooperBlack;
  font-size: 2vw;
  border-width: 0px;
  color: rgb(36, 109, 67);
}

:hover.youtubeButton{
  animation: slidein 0.1s ease-in-out forwards;
}

.projectsButton{
  width: 23%;
  height: 90%;
  border-radius: 50px;
  background-color: #e5f04f;
  position: absolute;
  left: 38%;
  translate: -50% 0;
  font-family: CooperBlack;
  font-size: 2vw;
  border-width: 0px;
  color: rgb(172, 152, 63);
}

:hover.projectsButton{
  animation: slidein 0.1s ease-in-out forwards;
}

.aboutMeButton{
  width: 23%;
  height: 90%;
  border-radius: 50px;
  background-color: #cf34a1;
  position: absolute;
  left: 62%;
  translate: -50% 0;
  font-family: CooperBlack;
  font-size: 2vw;
  border-width: 0px;
  color: rgb(105, 36, 84);
}

:hover.aboutMeButton{
  animation: slidein 0.1s ease-in-out forwards;
}

.friendsButton{
  width: 23%;
  height: 90%;
  border-radius: 50px;
  background-color: #3041d8;
  position: absolute;
  left: 86%;
  translate: -50% 0;
  font-family: CooperBlack;
  font-size: 2vw;
  border-width: 0px;
  color: rgb(43, 8, 106);
}

:hover.friendsButton{
  animation: slidein 0.1s ease-in-out forwards;
}

.projButton{
  width: 20vw;
  height: 20vh;
  border-radius: 20px;
  background-color: #3041d8;
  color: rgb(49, 44, 120);
  border-width: 0;
  font-family: CooperBlack;
  font-size: 72pt;
}

:hover.projButton{
  animation: projButt 0.1s ease-in-out forwards;
}

.bemannuTitle{
  width: 100vw;
  height: 10vh;
  text-align: center;
}

.bemannu{
  color: #4c37eb;
  font-family: CooperBlack;
  size: 20pt;
  position:fixed;
  margin-left: 44vw;
  animation: title-anim 6s infinite ease-in-out;
  animation: title-rotate 5s infinite ease-in-out;
  background-color: #f7ebbb;
  padding: 5px;
  border-radius: 10px;
}

#friends img{
  height: 30%;
  
}