/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.12,
* Autoprefixer: v10.4.4
* Browsers: last 4 version
*/

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

@font-face {
    font-family: 'Tetris2';
    src: url(../webfonts/tetris2-vp0w.ttf) format('truetype'),
         url(../webfonts/tetris2-vp0w-webfont.woff2) format('woff2'),
         url(../webfonts/tetris2-vp0w-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*
* The below CSS follows a top-down format so that styles are tackled in order of appearance in the webpage.
* All font-sizes are set in rem for responsiveness and for accessibility.
* #region and #endregion have been used for the purpose of being able to group and collapse related rules when developing
*/

/*#region General */
/* Clears/resets margin, padding, and borders from all HTML elements to eliminate browser inconsistencies*/
* {
    margin: 0;
    padding: 0;
    border: none;
}

/* Makes scroll smooth instead of abrupt when clicking internal links/anchors*/
html {
    scroll-behavior: smooth;
}

/* Body background color, font colour, and font family are set for consistency */
body {
    background-color: #000;
    color: #FFF;
    font-family: 'VT323', monospace;
    height: 100vh;
    padding: 30px 0;
}

main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100vh;
}

section {
    margin: 0 20px;
}

button {
    font-family: 'Tetris2';
    background-color: #000;
    color: #FFF;
}

button[type=submit] {
    height: 35px;
    border: 1px solid white;
    padding: 5px;
    width: 60px;
}

.bordered-box-title {
    background-color: #000;
    padding: 0 5px;
    position: relative;
}

.bordered-box {
    border: 5px solid white;
    padding: 20px 10px 20px 10px;
    margin-top: 10px;
}

#center {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    max-width: 330px;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    height: 100%;
}

#preview {
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}
/*#endregion*/

/*#region Game info box*/
.attribute {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    font-size: 1.5rem;
}

.value {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin-left: 10px;
    text-align: end;
}

#preview .bordered-box {
    border-width: 2px;
    padding: 10px 5px;
}

#preview .bordered-box-title {
    width: 70px;
    top: -25px;
}
/*#endregion*/

/*#region Game area*/
#center {
    max-height: 645px;
    padding: 1px 0 1px 0;
}

.full-height {
    height: 100%;
}

h1 {
    font-size: 6rem;
}

#menu {
    position: absolute;
    height: 100%;
    font-family: 'Tetris2';
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    text-align: center;
}

button.menu-item {
    display: block;
    width: 100%;
    height: 30px;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.menu-item {
    cursor: pointer;
}

.menu-item.active:before {
    content: '\2BC8';
    margin: 0 5px;
    -webkit-animation: blink 1s linear infinite;
            animation: blink 1s linear infinite;
}

.menu-item.active,
.state-control-btn.active,
#exit-btn.active {
    background-color: white;
    color: #000;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.menu-item.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#block-entrance {
    background-color: #000;
    position: absolute;
    top: -7px;
    left: 2.5%;
    width: 95%;
    height: 10px;
}

#game {
    width: 100%;
    min-width: 300px;
}

#tetris {
    width: inherit;
    height: inherit;
}

#textual-game-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10px;
    border: 3px dashed white;
    margin: 0 10px;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    min-width: 300px;
}

#textual-game-info .attribute {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    text-align: center;
    font-size: 1.2rem;
}

#textual-game-info div:not(:first-child) {
    margin-left: 10px;
}

#player {
    text-align: center;
    width: 75px;
}

#preview {
    position: absolute;
    left: -115px;
    width: 100px;
    text-align: center;
    background-color: #000000AA;
}

#preview-block {
    width: 100%;
}
/*#endregion*/

/*#region Controls*/
#controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: space-evenly;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

#controls .state-control-btn {
    font-family: 'VT323', monospace;
}

.state-control-btn,
.game-control-btn {
    font-size: 1rem;
    padding: 10px;
    width: 50px;
    height: 50px;
    text-align: center;
    margin-right: 5px;
    cursor: pointer;
}

.state-control-btn.big,
.game-control-btn.big {
    width: 80px;
    height: 60px;
}

.state-control-btn:hover,
.game-control-btn:hover {
    background-color: #FFF;
    color: #000;
}

.state-control-btn i {
    margin-bottom: 5px;
}

#non-keyboard-controls {
    margin-bottom: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
    bottom: 0;
    right: -100px;
    background-color: #000000AA;
    padding: 5px 0 5px 5px;
    border-width: 2px;
}

#non-keyboard-controls button {
    font-size: 0.7rem;
    font-weight: 600;
    border: 3px solid white;
    height: 30px;
    width: 30px;
    border-radius: 20%;
    background-color: transparent;
}

#up-arrow {
    margin-bottom: 5px;
}

#down-arrow {
    margin-top: 5px;
}
/*#endregion*/

/*#region Secondary menu */
#secondary-menu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: #000000;
    position: absolute;
    width: 100%;
    height: auto;
    left: -15px;
    -webkit-transition: 1s ease-in all;
    -o-transition: 1s ease-in all;
    transition: 1s ease-in all;
    font-weight: 600 !important;
}

#secondary-menu-title {
    font-weight: 600;
    font-size: 1.5rem;
}

#secondary-menu p {
    padding: 10px;
}

#secondary-menu-controls-content {
    position: relative;
    padding: 10px 0;
    height: 290px;
}

#secondary-menu-credits-content {
    position: relative;
    height: 280px;
}

#credits-scroller {
    position: absolute;
    -webkit-animation: rollingCredits 5s linear forwards infinite;
            animation: rollingCredits 5s linear forwards infinite;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
}

#scores {
    height: 95px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.finer-bordered-box {
    padding: 5px;
    border: 1px solid white;
}

#exit-btn {
    padding: 5px;
    border-width: 3px;
    width: 80px;
    height: 35px;
    position: absolute;
    z-index: 1;
    margin: -30px -40px;
    font-weight: inherit;
}

#exit-btn-blackout {
    position: absolute;
    background-color: black;
    width: 95%;
    height: 65px;
    bottom: 0;
}
/*#endregion*/

/*#region Media queries */
@media only screen and (orientation: landscape) {
    body,
    main {
        height: 100vw;
    }
}

@media screen and (max-width: 562px) {
    #preview {
        left: 5px;
    }

    #non-keyboard-controls {
        right: 5px;
    }
}

/*#region Animations*/
@-webkit-keyframes blink {
    50% {
      opacity: 0;
    }
}
@keyframes blink {
    50% {
      opacity: 0;
    }
}
                        
@-webkit-keyframes rollingCredits {
    0% {
      top: 30%;
    }
    100% {
      top: 5%;
    }
}
                        
@keyframes rollingCredits {
    0% {
      top: 30%;
    }
    100% {
      top: 5%;
    }
}
/*#endregion*/

.hidden,
button.menu-item.hidden,
#non-keyboard-controls.hidden {
    display: none;
}