/*-- how do i make a tetr.io like menu ples hlep --*/

* {
  box-sizing: border-box;
}

@font-face {
    font-family: HUN-din;
    src: url('../assets/fonts/hun.ttf');
}

.menu-background { 
  background-image: url('../assets/imgs/bg/matthias-heil-T7lMR-syZAg-unsplash.jpg');
  overflow-x: hidden;
  overflow-block: hidden;
}

.about-button {
background-color: darkcyan;
color:lightcyan;
box-shadow: 3px 3px 3px 3px cyan;
position: absolute;
width: 100%;
left: 50%;
font-family: HUN-din;
padding: 5px;
}

.about-button img{
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
}

.projects-button {
background-color: green;
color:greenyellow;
box-shadow: 3px 3px 3px 3px lightgreen;
margin-top: 150px;
padding: 5px;
position: absolute;
width: 100%;
left: 50%;
font-family: HUN-din;
padding: 8px;
}

.projects-button img{
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
}

.now-button {
background-color: darkred;
color:red;
box-shadow: 3px 3px 3px 3px maroon;
position: absolute;
margin-top: 310px;
width: 100%;
left: 50%;
font-family: HUN-din;
padding: 5px;
}

.now-button img{
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
}

.info-button {
    background-color: rgb(152, 152, 152);
    color:lightgray;
    box-shadow: 3px 3px 3px 3px gray;
    position: absolute;
    margin-top: 550px;
    width: 100%;
    left: 50%;
    font-family: HUN-din;
    padding: 8px;
}

.info-button img{
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
}

#about-button:hover {
    animation : about-hover;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-transition: all 2s;
}

/*
#about-button:after {
    content: '';
    display: block;
    clear: both;
    animation: about-unhover;
}
*/

#about-button:active {
background-color: rgb(215, 255, 255);
}

#projects-button:hover {
    animation : projects-hover;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

#projects-button:active {
background-color: rgb(215, 255, 255);
}

#now-button:hover {
    animation : now-hover;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

#now-button:active {
background-color: rgb(215, 255, 255);
}

#info-button:hover {
    animation : test;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

#info-button:active {
background-color: rgb(141, 159, 159)
}

@keyframes about-hover {
  
  from {background-color: darkcyan;}
  to {background-color: rgb(106, 184, 182); transform: translateX(-150px);}

}

@keyframes about-unhover {
  
  from {background-color: rgb(106, 184, 182);}
  to {background-color: darkcyan; transform: translateX(-100px);}

}


@keyframes projects-hover {
  
  from {background-color: green;}
  to {background-color: rgb(53, 177, 0); transform: translateX(-150px);}

}

@keyframes now-hover {
  
  from {background-color: darkred;}
  to {background-color: rgb(196, 0, 0); transform: translateX(-150px);}

}

@media (max-width: 500px) {
    #menu {
    display: none;
    }
    #mobile-menu {
      display: block;
    }
}

/* glowing text effect for preloader (probably)*/
.glow {
  font-size: 80px;
  color: #ffffff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}


#loading-overlay {
  position: fixed;
  display: none; 
  width: 100%; 
  height: 100%; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2; 
  cursor: pointer;
  animation: overlay 0.7s;
}

@keyframes overlay {
  from {background-color: rgba(0,0,0,0.0);}
  to {background-color: rgba(0,0,0,0.5);}
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #6f4929, 0 0 40px #795b22, 0 0 50px #f9ac1d, 0 0 60px #daaa26, 0 0 70px #daaa0e, 0 0 80px #ffd500;
  }
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #6f4929, 0 0 40px #795b22, 0 0 50px #f9ac1d, 0 0 60px #daaa26, 0 0 70px #daaa0e, 0 0 80px #ffd500;
  }
}

.about-button_mobile {
background-color: darkcyan;
color:lightcyan;
box-shadow: 3px 3px 3px 3px cyan;
font-family: profontwindows;
font-size: small;
padding: 0.006%;
}

.projects-button_mobile {
background-color: green;
color:greenyellow;
box-shadow: 3px 3px 3px 3px lightgreen;
font-family: profontwindows;
font-size: small;
padding: 0.006%;
}

.now-button_mobile {
background-color: darkred;
color:red;
box-shadow: 3px 3px 3px 3px maroon;
font-family: profontwindows;
font-size: small;
padding: 0.006%;
}