@font-face {
    font-family: 'Bloxorz Title';
    src: url('./assets/fonts/bloxorz/bloxorz.ttf') format('truetype');
}

@font-face {
    font-family: 'Bloxorz Text';
    src: url('./assets/fonts/bloxorz-alt/bloxorz-alt.ttf') format('truetype');
}


body {
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(0, 0, 0);
}

p {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

button {
    background:none;
    border:none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

img {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.stage {
    --r: 1280 / 720;

    aspect-ratio: var(--r);
    width: min(100vw, 100vh*(var(--r)));

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

    position: relative;
}

@keyframes bloxorz-title-animation {

    /* Primero oscila de arriba hacia abajo de menos a mas y a mucha velocidad */
    0% { transform: translate(0%, 0%); text-shadow:
                                                        0 0 min(0.5vw, 0.5vh*(var(--r))) white,
                                                        0 0 min(0.5vw, 0.5vh*(var(--r))) white,
                                                        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1),
                                                        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1) }
    1% { transform: translate(0%, -0.3125%); }
    2% { transform: translate(0%, 0.3125%); }
    3% { transform: translate(0%, -0.625%); }
    4% { transform: translate(0%, 0.625%); }
    5% { transform: translate(0%, -0.9375%); }
    6% { transform: translate(0%, 0.9375%); }
    7% { transform: translate(0%, -1.25%); }
    8% { transform: translate(0%, 1.25); }
    9% { transform: translate(0%, -1.5625%); }
    10% { transform: translate(0%, 1.5625%); }
    11% { transform: translate(0%, -1.875%); }
    12% { transform: translate(0%, 1.875%); }
    13% { transform: translate(0%, -2.1875%); }
    14% { transform: translate(0%, 2.1875%); }
    15% { transform: translate(0%, -2.5%); }
    16% { transform: translate(0%, 2.5%); }
    17% { transform: translate(0%, -2.8125%); }
    18% { transform: translate(0%, 2.8125%); }
    19% { transform: translate(0%, -3.125%); }
    20% { transform: translate(0%, 3.125%); }
    21% { transform: translate(0%, -3.4375%); }
    22% { transform: translate(0%, 3.4375%); }
    23% { transform: translate(0%, -3.75%); }
    24% { transform: translate(0%, 3.75%); }
    25% { transform: translate(0%, -4.0625%); }
    26% { transform: translate(0%, 4.0625%); }
    27% { transform: translate(0%, -4.375%); }
    28% { transform: translate(0%, 4.375%); }
    29% { transform: translate(0%, -4.6875%); }
    30% { transform: translate(0%, 4.6875%); text-shadow:
                                                        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1),
                                                        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1),
                                                        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1);}
    31% { transform: translate(0%, -5%); }
    32% { transform: translate(0%, 5%); }
    33% { transform: translate(0%, 0%); }
    40% { transform: translate(0%, 0%); text-shadow:
                                                        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1),
                                                        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1),
                                                        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1);}

    /* Despues oscila de izquierda a derecha a mucha velocidad */
    41% { transform: translate(1%, 0%); text-shadow:
                                                        0 0 min(0.5vw, 0.5vh*(var(--r))) white,
                                                        0 0 min(0.5vw, 0.5vh*(var(--r))) white,
                                                        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1),
                                                        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1)}
    42% { transform: translate(-1%, 0%); }
    43% { transform: translate(2%, 0%); }
    44% { transform: translate(-2%, 0%); }
    45% { transform: translate(3%, 0%); }
    46% { transform: translate(-3%, 0%); }
    47% { transform: translate(4%, 0%); }
    48% { transform: translate(-4%, 0%); }
    49% { transform: translate(5%, 0%); }
    50% { transform: translate(-5%, 0%); text-shadow:
                                                        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1),
                                                        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1),
                                                        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1); }

    /* Pasa a oscilar hacia arriba y hacia abajo */
    51% { transform: translate(0%, -5%); }
    52% { transform: translate(0%, 5%); }
    53% { transform: translate(0%, -5%); }
    54% { transform: translate(0%, 5%); }
    55% { transform: translate(0%, -5%); }
    56% { transform: translate(0%, 0%); }

    /* Oscila de forma fuerte de arriba hacia abajo*/
    69% { transform: translate(0%, 0%); }
    70% { transform: translate(0%, -5%); }
    71% { transform: translate(0%, 5%); }
    72% { transform: translate(0%, 0%); }

    /* Oscila fuerte de izquierda a derecha */
    79% { transform: translate(0%, 0%); }
    80% { transform: translate(5%, 0%); }
    81% { transform: translate(-5%, 0%); }
    82% { transform: translate(0%, 0%); } 

}



.bloxorz-title {

    --r: 1280 / 720;
    font-size: min(6vw, 6vh*(var(--r)));
    font-family: 'Bloxorz Title', sans-serif;

    text-align: center;
    margin: auto;

    font-weight: bold;

    color: white;
    text-shadow:
        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1),
        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1),
        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1);

}

.animated-bloxorz-title{

    --r: 1280 / 720;
    font-size: min(6vw, 6vh*(var(--r)));
    font-family: 'Bloxorz Title', sans-serif;

    text-align: center;
    margin: auto;

    font-weight: bold;

    color: white;
    text-shadow:
        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1),
        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1),
        0 0 min(1vw, 1vh*(var(--r))) rgb(216, 116, 1);

    
    animation-name : bloxorz-title-animation;
    animation-duration: 5.0s;
    animation-iteration-count: infinite;
}

.bloxorz-text {
    --r: 1280 / 720;
    font-size: min(2vw, 2vh*(var(--r)));
    font-family: 'Bloxorz Text', sans-serif;

    text-align: left;
    font-weight: normal;

    color: white;
    text-shadow:
        0 0 min(0.8vw, 0.8vh*(var(--r))) rgb(255, 136, 0),
        0 0 min(0.8vw, 0.8vh*(var(--r))) rgb(255, 136, 0),
        0 0 min(0.8vw, 0.8vh*(var(--r))) rgb(255, 136, 0);
}

.menu-option:hover {
    text-shadow:
        0 0 min(1vw, 1vh*(var(--r))) rgb(255, 0, 0),
        0 0 min(1vw, 1vh*(var(--r))) rgb(255, 0, 0),
        0 0 min(1vw, 1vh*(var(--r))) rgb(255, 0, 0),
        0 0 min(1vw, 1vh*(var(--r))) rgb(255, 0, 0),
        0 0 min(1vw, 1vh*(var(--r))) rgb(255, 0, 0),
        0 0 min(1vw, 1vh*(var(--r))) rgb(255, 0, 0);
}

.bloxorz-click:active {
    color:rgba(255,255,255,0.6);
    text-shadow:
        0 0 min(1vw, 1vh*(var(--r))) rgb(255, 136, 0),
        min(1vw, 1vh*(var(--r))) 0 min(1vw, 1vh*(var(--r))) rgb(255, 136, 0),
        min(2vw, 2vh*(var(--r))) 0 min(1vw, 1vh*(var(--r))) rgb(255, 136, 0),
        min(0.5vw, 0.5vh*(var(--r))) 0 min(0.2vw, 0.2vh*(var(--r))) white,
        0 0 min(1vw, 1vh*(var(--r))) rgb(255, 136, 0),
        min(-1vw, -1vh*(var(--r))) 0 min(1vw, 1vh*(var(--r))) rgb(255, 136, 0),
        min(-2vw, -2vh*(var(--r))) 0 min(1vw, 1vh*(var(--r))) rgb(255, 136, 0),
        min(-0.5vw, -0.5vh*(var(--r))) 0 min(0.2vw, 0.2vh*(var(--r))) white;
}

.guid-bloxorz-text {

    --r: 1280 / 720;
    font-size: min(2vw, 2vh*(var(--r)));
    font-family: 'Bloxorz Text', sans-serif;

    text-align: left;
    font-weight: normal;

    color: black;
    text-shadow:
        0 0 min(0.8vw, 0.8vh*(var(--r))) rgb(255, 136, 0),
        0 0 min(0.8vw, 0.8vh*(var(--r))) rgb(255, 136, 0),
        0 0 min(0.8vw, 0.8vh*(var(--r))) rgb(255, 136, 0);
}

.guid-bloxorz-option:hover {
    text-shadow:
        0 0 min(1vw, 1vh*(var(--r))) white,
        0 0 min(1vw, 1vh*(var(--r))) white,
        0 0 min(1vw, 1vh*(var(--r))) white,
        0 0 min(1vw, 1vh*(var(--r))) white,
        0 0 min(1vw, 1vh*(var(--r))) white,
        0 0 min(1vw, 1vh*(var(--r))) white
}

.guid-bloxorz-click:active {
    color: rgba(0,0,0,0.3);
    text-shadow:
        0 0 min(1vw, 1vh*(var(--r))) white,
        min(1vw, 1vh*(var(--r))) 0 min(1vw, 1vh*(var(--r))) white,
        min(2vw, 2vh*(var(--r))) 0 min(1vw, 1vh*(var(--r))) white,
        min(0.5vw, 0.5vh*(var(--r))) 0 min(0.2vw, 0.2vh*(var(--r))) black,
        0 0 min(1vw, 1vh*(var(--r))) white,
        min(-1vw, -1vh*(var(--r))) 0 min(1vw, 1vh*(var(--r))) white,
        min(-2vw, -2vh*(var(--r))) 0 min(1vw, 1vh*(var(--r))) white,
        min(-0.5vw, -0.5vh*(var(--r))) 0 min(0.2vw, 0.2vh*(var(--r))) black
}

.option-container{
    display : flex;
    flex-direction: column;
    width: -moz-fit-content;
    width : fit-content;
    align-content : flex-start;
    z-index : 1000;
}

.title-container{
    align-content: center;
    display : flex;
    width: -moz-fit-content;
    width : fit-content;
    justify-content: center;
    z-index : 1000;
}

.selector-column-container{
    display : flex;
    align-items: flex-end;
    flex-direction: column;
    width: -moz-fit-content;
    width : fit-content;
    z-index : 1000;
}

.selector-row-container{
    align-self : right;
    display : flex;
    flex-direction : row;
    width: -moz-fit-content;
    width : fit-content;
    justify-content : space-evenly;
    z-index : 1000;
}

.options-padding{
    --r: 1280 / 720;
    margin-right: min(1vw, 1vh*(var(--r)));
}

.left-padding{
    --r: 1280 / 720;
    margin-left: min(2vw, 2vh*(var(--r)));
}

.right-padding{
    --r: 1280 / 720;
    margin-right: min(2vw, 2vh*(var(--r)));
}

.game-window-container{
    z-index: 1; 
    height: 100%; 
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    position: relative;
}

.guid-container{
    align-content: center;
    display : flex;
    flex-direction: column;
    width: -moz-fit-content;
    width : fit-content;
    justify-content: center;
    align-items: center;
    z-index : 1000;
}

.info-container{
    display:flex;
    width: -moz-fit-content;
    width : fit-content;
}

.info-container-column{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width : -moz-fit-content;
    width : fit-content; 
}

.tutorial-container{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    height: 40%; 
    width: 100%;
    position: relative;
    top: 25%;
}

.digit-container{
    --r: 1280 / 720;
    display: flex;
    width: min(2vw, 2vh*(var(--r)));
    justify-content: center;
}

.digit-sep-container{
    --r: 1280 / 720;
    display: flex;
    width: min(2vw, 2vh*(var(--r)));
    justify-content: center;
}

.container{
    display: flex;
    width : -moz-fit-content;
    width : fit-content; 
}

.reminder-text{
    --r: 1280 / 720;
    font-size: min(1.5vw, 1.5vh*(var(--r)));
    font-family: 'Bloxorz Text', sans-serif;

    text-align: left;
    font-weight: normal;

    color: white;
    text-shadow:
        0 0 min(0.8vw, 0.8vh*(var(--r))) black,
        0 0 min(0.8vw, 0.8vh*(var(--r))) black
}

.reminder-container{
    display: flex;
    width : -moz-fit-content;
    width : fit-content; 
    position : absolute; 
    bottom : 10%;
}

.credits-content{
    position: absolute;
    bottom: 12%;
    display:flex;
    text-align: center;
    width:80%
}