@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rationale&family=Rum+Raisin&display=swap');

body{
    overflow: hidden;
    width:100%;
    height:100vh;
    user-select: none;
    -webkit-user-select: none;
    background-color: rgb(240, 255, 244);
    
}

.machine-body {
    position: absolute;
    background-position: center;
    top:20vh;
    left:40%;
    max-width: 300px;
    width: 100%;
    height: 70vh;
    border-radius: 10px 10px 50px 10px / 10px 10px 50px 10px ;
    border: 2px solid rgb(168, 168, 168);
    background-color: rgb(191, 191, 191);
    touch-action: none;
    margin: 0px auto;
    z-index: 10;
}

.machine-onoff-button {
    position: absolute;
    top: -3%;
    left: 20%;
    width: 5%;
    height: 2%;
    border: 2px solid rgb(168, 168, 168);
    background-color: rgb(101, 101, 101);
    transition: .5s;
    z-index: 1;
}

.machine-onoff-text {
    position: absolute;
    left: 20%;
    font-family: 'Rationale', sans-serif;
}

.machine-onoff-button.on {
    transform: translate(100%, 0);
}

.screen-side {
    position: relative;
    top:10%;
    left:10%;
    width:80%;
    height: 40%;
    border-radius: 10px 10px 50px 10px / 10px 10px 50px 10px ;
    border: 1px  solid grey;
    background-color: rgb(148, 148, 148);
}

.screen {
    position: relative;
    top: 10%;
    left: 20%;
    width:60%;
    height: 80%;
    background-color: white;
}

.canvas {
    position: absolute;
    width: 100%;
    height:100%;
    background-color: #3e3e3e;
}

/* RUDDER SIDE */

.rudder-side {
    position: relative;
    top:20%;
    left:10%;
    width:25%;
    height: 20%;
    border-radius:50%;
    background-color: rgb(180, 180, 180);
}

.rudder {
    background-color: rgb(100, 100, 100);
    position: relative;
    transition: .5s;
}

.rudder:active {
    background-color: black;
}


.rudder.top {
    top: 5%;
    left: 35%;
    width: 30%;
    height: 30%;
    border-radius: 20% 20% 0 0;
}

.rudder.left {
    top: 5%;
    left: 5%;
    width: 30%;
    height: 30%;
    border-radius: 20% 0 0 20%;
}

.rudder.right {
    top: -25%;
    left: 65%;
    width: 30%;
    height: 30%;
    border-radius: 0 20% 20% 0;
}

.rudder.bottom {
    top: -25%;
    left: 35%;
    width: 30%;
    height: 30%;
    border-radius: 0 0 20% 20%;
}

.rudder-center {
    top: -85%;
    left: 35%;
    width: 30%;
    height: 30%;
    background-color: rgb(100, 100, 100);
    position: relative;
}

/* 

A, B BUTTON SIDE


*/

.ab-side{
    position: relative;
    top:5%;
    left:65%;
    width:30%;
    height: 10%;
    border-radius:30%;
    transform: rotate(-30deg);
    background-color: rgb(180, 180, 180);
}

.ab-side > .button {
    position: relative;
    border: 1px solid red;
    background-color: rgb(255, 61, 61);
}

.ab-side > .button:active {
    background-color: rgb(128, 51, 51);
}

.ab-side > .b {
    top:10%;
    left:10%;
    width:30%;
    height: 70%;
    border-radius: 50%;background-color: rgb(255, 61, 61);
}

.ab-side > .a {
    top:-60%;
    left:60%;
    width:30%;
    height: 70%;
    border-radius: 50%;
}

.ab-side > span {
    color: rgb(39, 51, 130);
    font-weight: bold;
    position: absolute;
    font-family: 'Rationale', sans-serif;
}

.b-text {
    top: 100%;
    left: 20%;
}

.a-text {
    top: 100%;
    left: 70%;
}

/* 

SELECT, START BUTTON SIDE

 */

.other-side {
    position: relative;
    top: 10%;
    left: 35%;
    width: 30%;
    height:10%;
    transform: rotate(-30deg);
}

.other-side > .button {
    position: relative;
    background-color: rgb(100, 100, 100);
    width: 40%;
    height: 20%;
    border-radius: 20%;
}

.other-side > .button:active {
    background-color: black;
}

.other-side > .select{
    top: 30%;
    left: 10%;
}

.other-side > .start{
    top: 30%;
    left: 60%;
}

.other-side > span {
    position: absolute;
    color: rgb(39, 51, 130);
    font-weight: bold;
    font-size: 1rem;
    font-family: 'Rationale', sans-serif;
}

.select-text {
    top: 50%;
    left: 10%;
}

.start-text {
    top: 70%;
    left: 60%;
}

/* MACHINE LINE SIDE */

.machine-line {
    width: 100%;
    height: 100%;
}

.machine-line span {
    position: absolute;
    border: 1px solid gray;
    background-color: rgb(120, 120, 120);
}

.machine-line .top-line.center {
    top: 5%;
    width: 100%;
    height: 5px;
}

.machine-line .top-line.left {
    top: 0%;
    left: 10%;
    width: 5px;
    height: 5%;
}

.machine-line .top-line.right {
    top: 0%;
    left: 88%;
    width: 5px;
    height: 5%;
}

.spickers {
    position: absolute;
    top: 82%;
    left: 70%;
    width: 50%;
    height: 30%;
    transform: rotate(-30deg);
    z-index: 2;
}

.spickers .spicker {
    width: 5px;
    height: 30%;
    border-radius: 20%;
}

.spicker:nth-child(1){
    left: 10%;
}

.spicker:nth-child(2){
    left: 20%;
}

.spicker:nth-child(3){
    left: 30%;
}

.spicker:nth-child(4){
    left: 40%;
}

.spicker:nth-child(5){
    left: 50%;
}

.spicker:nth-child(6){
    left: 60%;
}

.spicker-shade {
    position: absolute;
    top: 85%;
    left: 70%;
    width: 30%;
    height: 15%;
    border-radius: 100% 0px 50px 0px / 100% 0px 50px 0px ;
    z-index: 1;
    background-color: rgb(150, 150, 150);
}


.screen-side > .line {
    position: absolute;
    left: 3%;
    width: 95%;
    height: 1%;
    border-radius: 30%;
}

.screen-side > .line.red {
    background-color: red;
    top:3%;
}

.screen-side > .line.blue {
    background-color: blue;
    top: 5%;
}

.screen-side > .light {
    position: absolute;
    top: 35%;
    left: 8%;
    width: 4%;
    height: 5%;
    border-radius: 50%;
    background-color: rgb(80, 80, 80);
    transition: 5s;
}

.light.on {
    background-color: rgb(183, 236, 102)
}

.machine-name{
    position: absolute;
    top: 50%;
    left: 20%;
    color: rgb(39, 51, 130);
    font-weight: bold;
    font-family: 'Rum Raisin', sans-serif;
}

.machine-notice{
    position: absolute;
    top: 10.5%;
    left: 55%;
    width: 23%;
    background-color: rgb(148, 148, 148);
    color: white;
    font-weight: bold;
    font-size: .5rem;
    font-family: 'Rum Raisin', sans-serif;
    text-align: center;
    z-index: 10;
}

/* GAMEPACK SIDE */

.gamepack {
    position: absolute;
    background-position: center;
    top:-15%;
    left:10%;
    max-width: 120px;
    width: 100%;
    height: 20vh;
    border-radius: 10px;
    border: 2px solid rgb(168, 168, 168);
    background-color: rgb(255, 123, 211);
    transition: 2s;
}

.gamepack.inserted {
    top:15vh;
    left:47%;
}

.gamepack.selected {

}

.gamepack .pack-top-right {
    position: absolute;
    top: 0%;
    left: 90%;
    width: 10%;
    height: 10%;
    border-radius: 5px;
    background-color: white;
}

.gamepack .top-lines {
    width: 100%;
    height: 100%;
}

.gamepack .top-lines .top-line {
    position: absolute;
    width: 100%;
    height: 3%;
    border-radius: 20%;
    background-color: rgb(180, 86, 149);
}

.gamepack .top-lines .top-label {
    position: absolute;
    top: 6%;
    left: 20%;
    width: 60%;
    height: 20%;
    border-radius: 20%;
    background-color: rgb(180, 86, 149);
    text-align: center;
    font-family: 'Rum Raisin', sans-serif;
    z-index: 100;
}

.gamepack .top-lines .top-line:nth-child(2) {
    top: 5%;
}

.gamepack .top-lines .top-line:nth-child(3) {
    top: 10%;
}

.gamepack .top-lines .top-line:nth-child(4) {
    top: 15%;
}

.gamepack .top-lines .top-line:nth-child(5) {
    top: 20%;
}

.gamepack .top-lines .top-line:nth-child(6) {
    top: 25%;
}

.gamepack .gamepack-img-side {
    position: absolute;
    top: 40%;
    left: 20%;
    width: 60%;
    height: 45%;
    background-color: white;
}

[data-game="snake"] .gamepack-img{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("./src/snake.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.pack-left {
    position: absolute;
    top: 40%;
    width: 5%;
    height: 60%;
    border-radius: 0px 0px 0px 20px / 0px 0px 0px 20px ;
    background-color: rgb(180, 86, 149);
}

.pack-right {
    position: absolute;
    top: 40%;
    left: 95%;
    width: 5%;
    height: 60%;
    border-radius: 0px 0px 20px 0px / 0px 0px 20px 0px ;
    background-color: rgb(180, 86, 149);
}

@media screen and (max-width: 500px) {
    .machine-body {
        position: absolute;
        /* left: 10%; */
        left: 0%;
        max-width: calc(100% - 4px);
        width: 100%;
        height: 80%;
    }
}