@import url('https://fonts.googleapis.com/css2?family=Nova+Round&display=swap');
 
@media screen and (max-height: 898px){ 
    .button-sel{ font-size: 30px; }
    #btn-container{ display: grid !important; }
}

@keyframes blurrin{
    0%, 100%{ -webkit-filter: blur(50px); }
    50%{ -webkit-filter: blur(30px); }
}

#btn-container {
    display: flex;

    gap: 20px;
}

.button-sel {
    display: flex;
    gap: 10px;
    border: 3px solid white;
    width: 20vh;
    height: 15vh;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    font-weight: bold;

    background: linear-gradient(45deg, rgb(26, 1, 117) 0%, rgba(225, 5, 34, 0) 70%) repeat scroll 0% 0%, 
                linear-gradient(135deg, rgb(225, 5, 152) 10%, rgba(49, 5, 209, 0) 80%) repeat scroll 0% 0%, 
                linear-gradient(225deg, rgb(26, 1, 117) 0%, rgba(10, 219, 216, 0) 80%) repeat scroll 0% 0%, rgba(0, 0, 0, 0)
                linear-gradient(315deg, rgb(189, 5, 245) 100%, rgba(9, 245, 5, 0) 70%) repeat scroll 0% 0%;
    color: white;

    cursor: pointer;
    transition: all 400ms cubic-bezier(0.66, 0, 0, 1.2);;
    border-radius: 8px;
    box-shadow: 0px 0px 5px white;
    background-size: 200% 200%;
    background-position: 20% 20%;

    --button-index: 1;
    --translate-x: 0;
    --translate-y: 0;
    --box-shadow-x: 0;
    --box-shadow-y: 0;
}

.button-sel:hover {
  background-position: 80% 80%;
  transform: translate(var(--translate-x), var(--translate-y));
  box-shadow: var(--box-shadow-x) var(--box-shadow-y) 25px white;
}

.button-sel:hover:nth-child(1) {
  --button-index: 1;
  --translate-x: -5%;
  --translate-y: -5%;
  --box-shadow-x: 7px;
}

.button-sel:hover:nth-child(2) {
  --button-index: 2;
  --translate-x: 0;
  --translate-y: -2.5%;
  --box-shadow-x: 0;
}

.button-sel:hover:nth-child(3) {
  --button-index: 3;
  --translate-x: 5%;
  --translate-y: -5%;
  --box-shadow-x: -7px;
}

.button-sel:active {
  background-position: 50% 50%;
  transform: translate(var(--translate-x) / 2, var(--translate-y) / 2);
  box-shadow: var(--box-shadow-x) var(--box-shadow-y) 10px white;
}

#container-all {
    height: 100%;
    width: 100%;
}

#container-flex {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 91%;
    width: 100%;
}

.h1-title {
    text-align: center;
    padding-top: 10px;
    color: white;
}

#musxfy{
    display: none;
    height: 100vh;
    font-family: 'Nova Round', cursive;
    scale: 1.03;
    transition: opacity 100ms ease-in-out;
}