* {
    margin:0;
    padding:0;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: black;
    background-image: linear-gradient(black, rgb(20, 20, 20));
    overflow:hidden;
}

a {
    text-decoration: none;
    margin-inline: 5vw;
}

a::after {
    text-decoration: none;
}


#container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#tile{
    width: 25px;
    height: 25px;
    color: white;
}

#back {
    display:flex;
    justify-content: center;
    align-items: center;
    
    margin-top: 2vh;
    width: 15vw;
    height: 10vh;

    background-color: black;
    border: solid 2px gray;
    font-family: 'Press Start 2P', cursive;
    font-size: 2vw;
    color:white;
}


/* HOME PAGE STYLING */

#back:hover {
    color:orange;
    font-size: 2.2vw;
}

#arcade-machine {
    padding:0;
    width: 18.8vw;
    height: 40vw;
    background-size: contain;
    background-repeat: no-repeat;
}

#arcade-machine:hover {
    transform: scale(1.1);
}

.tetris-machine {
    background-image: url(./assets/tetris-machine.png)    
}

.snake-machine {
    background-image: url(./assets/snake-machine.png);
}

#home-page {
    background-color: black;
    background-image: linear-gradient(180deg, 
        #5e0055,
        #5e0055,
        #2f005c,
        #18005f);
}

#floor {
    display: grid;
    grid-template-rows: repeat(10,1fr);
    grid-template-columns: repeat(10,1fr);
    
    position: absolute;
    top: 70%;
    transform: skew(30deg, 0deg);
    
    width:120vw;
    height:120%;
    
    background-color: black;

    z-index: -1;
}

#circle {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width:40vw;
    height:40vw;

    border: solid 5px black;
    border-radius: 100%;
    background-image: linear-gradient(#f56a00,#8e008b);

    z-index: -1;
}

.floor-tile {
    border: solid 3px #a000ff;
}


/* TETRIS STYLING */


#grid {
    border: solid 5px gray;    
}

#controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    margin: 1vw;
    
    background-color: rgb(17, 17, 17);
    border: solid 2px gray;
    
}

#controls p {
    font-size: .75vw;
    color: white;
    font-family: 'Press Start 2P', cursive;
    margin: 1vh;
}

.display-box {
    border: solid 2px gray;
    margin-inline: 2vw;
    margin-top: 1vh;
}

#next-container {
    display: flex;
    flex-direction: column-reverse;
}

.row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.empty {
    border: solid 1px rgb(255, 255, 255, 0.2);
    background-color: black;
}

.mino {
    border: solid 1px black;
    background-color: red;
}

.next {
    border: solid 1px black;
    background-color: purple;
}

.hold {
    border: solid 1px black;
    background-color: green;
}

.ghost {
    border: solid 1px white;
    background-color: gray;
}

.filled {
    border: solid 1px black;
    background-color: blue;
}

.filled-lost {
    border: solid 1px black;
    background-color: gray;
}

#score-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15vw;
    height: 10vw;
    border: solid 5px gray;
    margin-inline: 1vw;
    background-color: rgb(17, 17, 17);
    font-size: 1.75vw;
    color: white;
    font-family: 'Press Start 2P', cursive;
    text-align: center;
}

/* SNAKE STYLING */
#snake-background {
    background-image: url(https://www.xmple.com/wallpaper/graph-paper-black-green-grid-1920x1080-c2-000000-00ff00-l2-2-62-a-30-f-20.svg);
    background-size: cover;
    background-repeat: no-repeat;
}

.snake {
    border: solid 1px green;
    background-color: green;
}

.apple {
    border: solid 1px red;
    background-color: red;
}

.vacant {
    border: solid 1px black;
    background-color: black;
}