:root {
    --cell-faded-color: rgb(147, 163, 126);
    --cell-normal-color: rgb(39, 34, 38);
    --screen-background-color: rgb(158, 173, 134);
    --cell-size: 20px;
    --grid-cells-width: 10;
    --grid-cells-height: 20;
    --grid-width: calc(var(--grid-cells-width)*var(--cell-size));
    --grid-height: calc(var(--grid-cells-height)*var(--cell-size));
    --game-font: sans-serif;
    --screen-border-color: grey;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--game-font);
    background-color: lightgoldenrodyellow;
}

.container {
    position: relative;
    display: grid;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;

}

.container h3 {
    position: absolute;
    top: 0;
    margin: 1em;
    padding: 0 .5em 0 .5em;
    background-color: lightgoldenrodyellow;
}

.screen {
    display: flex;
    background-color: var(--screen-background-color);
}

.screen-frame {
    margin-top: 1.75em;
    padding: 1em;
    border: 0.2em solid var(--screen-border-color);
    border-radius: 5%;
}

#grid {
    margin: calc(var(--cell-size) * .5);
    width: var(--grid-width);
    height: var(--grid-height);
    display: flex;
    flex-wrap: wrap;
    border: calc(var(--cell-size)*0.05) solid var(--cell-normal-color);
}

#grid div {
    width: var(--cell-size);
    height: var(--cell-size);
    outline: calc(var(--cell-size)*0.05) solid var(--cell-faded-color);
    outline-offset: calc(var(--cell-size)* -0.1);

}

#grid div::before {
    position: absolute;
    background-color: var(--cell-faded-color);
    content: '';
    width: calc(var(--cell-size)*0.6);
    height: calc(var(--cell-size)*0.6);
    margin: calc(var(--cell-size)*0.2);
}

#grid .block {
    outline-color: var(--cell-normal-color);
}

#grid .block::before {
    background-color: var(--cell-normal-color);
}

#gridNext {
    margin: calc(var(--cell-size) * .5);
    width: calc(var(--cell-size)*4);
    height: calc(var(--cell-size)*4);
    display: flex;
    flex-wrap: wrap;
}

#gridNext div {
    width: var(--cell-size);
    height: var(--cell-size);
    outline: calc(var(--cell-size)*0.05) solid var(--cell-faded-color);
    outline-offset: calc(var(--cell-size)* -0.1);

}

#gridNext div::before {
    position: absolute;
    background-color: var(--cell-faded-color);
    content: '';
    width: calc(var(--cell-size)*0.6);
    height: calc(var(--cell-size)*0.6);
    margin: calc(var(--cell-size)*0.2);
}

#gridNext .block {
    outline-color: var(--cell-normal-color);
}

#gridNext .block::before {
    background-color: var(--cell-normal-color);
}

.status-label {
    margin: 1em .5em 0 0;
}

.status-text {
    font-weight: bold;
    font-size: 1.6em;
    margin: 0 .5em .5em 0;
}

.buttonsWrapper {
    display: flex;
    margin: 1em 0 0 0;

}

.buttonsWrapper div {
    font-size: 0.8em;
    margin: 1em;
}

.btn {
    position: relative;
    align-items: center;
    width: 5em;
    height: 5em;
    border-radius: 50%;
    background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);
    border-style: none;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0;
    box-sizing: border-box;
    margin: .25em;
}

.btn:active {
    box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #CECFD1, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

.btn:focus {
    outline: none;
}

#downButton {
    top: 5em;
}

#rotateButton {
    width: 7em;
    height: 7em;
    margin-left: 3em;
}

#pauseButton,
#startButton {
    width: 70px;
    height: 30px;
    border-radius: 15px;
}

.dialog {
    position: absolute;
    padding: .5em;
    background-color: var(--screen-background-color);
    outline: 1px solid var(--cell-normal-color);
    outline-offset: -.5em;
    top: calc(var(--grid-height) * .5);
    display: none;
}

.dialog h3 {
    position: relative;
    background-color: var(--screen-background-color);
}

.show {
    display: block;
}

footer {
    display: flex;
    position: fixed;
    justify-content: center;
    width: 100vw;
    bottom: 0;
    left: 0;
    font-size: 1em;
}