:root
{
    font-size: 1vh;
}

@media screen and (min-height: 100vw)
{
    :root
    {
        font-size: 1vw;
    }
}

/*------------------MAIN----------------*/

body
{
    user-select: none;
    margin: 0;
    text-align: center;
    overflow: hidden;
}

#footer
{
    margin-inline: auto;
    height: 2rem;
    width: 100rem;
    background-color: var(--WINDOW-BG-COLOR);
}

.footer-img, #footer .value
{
    height: 90%;
}

#footer .value
{
    margin-inline: 0.2rem;
}

#screen
{
    cursor: url("../img/main/cursor.png") 15 15, auto;
    --WINDOW-BG-COLOR: #161616;
    --SCREEN-BG-COLOR: #323232;
    --BORDER-COLOR: #222222;
    --BORDER: 0.6rem solid var(--BORDER-COLOR);
    --TABLE-BG-COLOR: #050505;
    width: 100vw;
    height: 100vh;
    background-color: var(--SCREEN-BG-COLOR);
}

.display:is(.game, .windows)
{
    text-align: center;
    background-color: var(--WINDOW-BG-COLOR);
    height: 100%;
    width: 100%;
}

#displays
{
    margin-inline: auto;
    position: relative;
    width: 100rem;
    height: calc(100vh - 18rem);
}

.display.windows
{
    position: absolute;
    z-index: 1;
}

.display.transparent
{
    opacity: 90%;
}

.window
{
    margin-inline: auto;
}

.window.game
{
    width: 70%;
}

.disabled
{
    display: none !important;
}

#baner
{
    width: 100rem;
    margin-inline: auto;
    background-color: var(--WINDOW-BG-COLOR);
}

#baner-img
{
    height: 16rem;
}

.line.long
{
    display: block;
    margin: 0.8rem auto;
    height: 2rem;
    width: 80%;
}

.line.short
{
    display: block;
    margin: 1rem auto;
    height: 1.6rem;
    width: 60%;
}

.button.selected
{
    animation: select 0.16s;
    outline: solid #5cf8ff;
}

.property-name
{
    float: left;
    height: 100%;
}

.toggle
{
    float: right;
    height: 100%;
}

@keyframes select
{
    0%
    {
        outline-width: 0.6rem;
    }
    100%
    {
        outline-width: 0.4rem;
    }
}

/*------------------MAIN----------------*/



/*-----------------HOVER----------------*/

@media not all and (hover: none)
{
    .button:hover:not(:active)
    {
        transition: 0.06s;
        transform: scale(1.05);
        opacity: 70%;
    }

    .button:hover:active
    {
        transform: scale(0.95);
        opacity: 50%;
    }
    
    .window.editor #edit .pixel.empty:hover
    {
        background-color: #00ffff;
        border-color: #00e0e0;
        border-width: 0.8rem;
        opacity: 20%;
    }
}

.disabled-animation
{
    opacity: 65%;
    pointer-events: none;
}

/*-----------------HOVER----------------*/




/*-----------------MENU-----------------*/

.window.menu #play
{
    height: 8rem;
}

.window.menu img:not(#play, .line)
{
    height: 5rem;
}

.window.menu .selector.game-mode
{
    aspect-ratio: 6.4 / 1;
}

.window.menu .selector.speed
{
    aspect-ratio: 5.1 / 1;
}

.window.menu .display:is(.game-mode, .speed)
{
    display: inline-block;
}

.selector
{
    height: 5rem;
    margin-inline: auto;
}

.button.right
{
    float: right;
}

.button.left
{
    float: left;
}

/*-----------------MENU-----------------*/



/*----------------EDITOR----------------*/

.window.editor #editor
{
    height: 8rem;
}

.window.editor #brick-editor
{
    margin-block: 4rem;
    width: 42%;
    float: left;
}

.window.editor #editor-properties
{
    margin-block: 3rem;
    width: 49%;
    float: left;
}

.window.editor #editor-properties .property
{
    height: 4em;
    width: 36rem;
    float: right;
    margin-block: 1rem;
}

.window.editor #brick-editor .property.move-center
{
    height: 4em;
    width: 31.2rem;
    margin-inline: auto;
}

.window.editor :is(#add, #delete)
{
    height: 5rem;
}

.window.editor .brick.display
{
    display: inline-block;
}

.window.editor .selector.brick img
{
    height: 5rem;
}

.window.editor #brick-selector-box
{
    margin-top: 1rem;
    width: 31.2rem;
    margin-inline: auto;
}

.window.editor #buttons-box
{
    margin-top: 1.5rem;
    width: 31.2rem;
    margin-inline: auto;
}

.window.editor .selector.brick
{
    aspect-ratio: 5 / 1;
    clear: both;
    margin-inline: auto;
}

.window.editor #cross
{
    --PIXEL-SIZE: 20%;
    pointer-events: none;
    position: absolute;
    height: 3rem;
    left: calc(50% - 1.5rem);
    top: calc(2 * var(--PIXEL-SIZE) + (var(--PIXEL-SIZE) - 3rem) / 2);
    z-index: 1;
}

.window.editor #cross.move
{
    transform: translate(72.5%, 72.5%);
}
/*----------------EDITOR----------------*/



/*----------------PAUSE-----------------*/

.window.pause img:not(#game-paused, .line)
{
    height: 6rem;
}

.window.pause #game-paused
{
    height: 8rem;
}

/*----------------PAUSE-----------------*/



/*-------------HOW-TO-PLAY--------------*/

.window.how-to-play #how-to-play
{
    height: 6rem;
}

.window.how-to-play .display.page:not(.wide)
{
    height: 41.2rem;
    padding-block: 3rem;
}

.window.how-to-play .display.page.wide
{
    height: 47.2rem;
}

.window.how-to-play .selector.page-number img
{
    height: 5rem;
}

.window.how-to-play .display.page-number
{
    display: inline-block;
}

.window.how-to-play .selector.page-number
{
    aspect-ratio: 5 / 1;
}

.window.how-to-play #back
{
    height: 6rem;
}

.window.how-to-play #restart-animation
{
    position: absolute;
    right: 0;
    top: 0;
    height: 4rem;
}

.window.how-to-play #tutorial-hard-drop
{
    position: absolute;
    right: 4rem;
    top: 0;
    height: 4rem;
}

/*-------------HOW-TO-PLAY--------------*/



/*---------------SETTINGS---------------*/

.window.settings .property
{
    height: 5rem;
    width: 50%;
    margin-inline: auto;
}

.window.settings #settings, #save
{
    height: 8rem;
}

/*---------------SETTINGS---------------*/




/*--------------GAME-OVER---------------*/

.window.game-over #game-over
{
    height: 8rem;
}

.window.game-over :is(#restart, #back, #menu)
{
    height: 6rem;
}

/*--------------GAME-OVER---------------*/



/*----------------REALLY----------------*/

.window.really img:not(#really, .line)
{
    height: 6rem;
}

.window.really #ask
{
    height: 8rem;
}

.window.really #cancel
{
    float: left;
}

.window.really #yes
{
    float: right;
}

.window.really #buttons
{
    margin-inline: auto;
    margin-top: 4rem;
}

.window.really-quit #buttons
{
    width: 40rem;
}
.window.really-restart #buttons
{
    width: 50rem;
}
/*----------------REALLY----------------*/



/*--------------BEST-SCORES-------------*/

.window.best-scores #best-scores
{
    height: 8rem;
}

.window.best-scores #back
{
    height: 6rem;
}

.char
{
    height: 100%;
    float: left;
}

.value
{
    display: inline-block;
}

.window.best-scores .column
{
    width: 20%;
    float: left;
}

.window.best-scores .value, .bonus-display .value
{
    height: 2rem;
    display: block;
    margin-inline: auto;
    width: fit-content;
}

.window.best-scores .empty
{
    height: 4rem;
}

.window.best-scores #score-board img:not(.empty)
{
    height: 100%;
}

.window.best-scores #score-board
{
    width: 80%;
    margin: 2rem auto;
    clear: both;
}

.window.best-scores .header
{
    height: 2.6rem;
}

.window.best-scores #clear
{
    height: 4rem;
}

/*--------------BEST-SCORES-------------*/