@font-face {
    font-family: "Kenney Space";
    src: url("fonts/Kenney Space.ttf");
}

@keyframes borders-animation {
    0%, 50%, 100% {
        margin-top: 0;
        width: 250px;
        height: 60px;
    }

    25% {
        margin-top: -5px;
        width: 270px;
        height: 70px;
    }
}

:root {
    font-family: "Kenney Space";

    width: 100%;
    height: 100%;
    background-color: #1f2730;
    
    --floating-borders-top: 100px;
    --floating-borders-spacing: 90px;
}

:root, #game_menu {
    display: flex;
    align-items: center;
    justify-content: center;
}

#menu_title {
    font-size: 38px;
    color: #d68a4c;
}

#game_menu {
    width: auto;
    height: auto;
    padding: 25px 90px 40px;

    background-color: rgb(39, 58, 66);

    flex-direction: column;

    border-radius: 2px;

    background-image: url("panel-border-030.png");
    -bevy-image-mode: sliced(20.0px);
}

button {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 30px;
    background-color: transparent;

    font-size: 20px;
    color: rgb(20, 20, 21);
    &:focus {
        color: #E6E6E6;
    }

    text {
        transition: color 0.6s;
    }
}

button, #floating_borders {
    width: 250px;
    height: 60px;
}

#floating_borders {
    display: flex;
    position: absolute;
    top: var(--floating-borders-top);
    transition: top 0.6s;
    background-image: url("panel-border-010.png");
    -bevy-image-mode: sliced(20.0px);
}

button:nth-child(2):focus ~ #floating_borders {
    top: calc(var(--floating-borders-top) + var(--floating-borders-spacing) * 0);
}

button:nth-child(3):focus ~ #floating_borders {
    top: calc(var(--floating-borders-top) + var(--floating-borders-spacing) * 1);
}

button:nth-child(4):focus ~ #floating_borders {
    top: calc(var(--floating-borders-top) + var(--floating-borders-spacing) * 2);
}

button:nth-child(5):focus ~ #floating_borders {
    top: calc(var(--floating-borders-top) + var(--floating-borders-spacing) * 3);
}

button:hover ~ #floating_borders {
    animation: 2.0s linear infinite borders-animation;
}

