@font-face { 
    font-family: 'Switch'; 
    src: url('../assets/fonts/font2.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
}
html {
    background-color: #2d2d2d;
    font-family: Switch;
    color: white;
}
p {
    font-family: Switch;
    font-size: 1.6vw;
}
pre {
    font-family: Switch;
    font-size: 1.7vw;
}
#controllerDisplay {
    position: fixed;
    bottom: 0.75vw;
    left: 4vw;
    height: 3.5vw;
}
#bottomLine {
    position: fixed;
    background-color: white;
    width: 95vw;
    height: 0.1vw;
    bottom: 5vw;
    transform: translate(-50%, -50%);
    left: 50vw;
}
#profileIcon {
    position: fixed;
    width:3.5vw;
    height: 3.5vw;
    top: 4.45vw;
    left:4.75vw;
    filter: drop-shadow(0vw 0vw 0.2vw #000000);
    transform: translate(-50%, -50%);
}
#profileIcon:hover {
    border-radius: 50%;
    animation: blueEffect 0.9s infinite linear;
    cursor: pointer;
    width: 3.9vw;
    height: 3.9vw;
}
#topRight {
    position: fixed;
    /* background-color: blue; */
    width: 15vw;
    height: 5vw;
    top: 2vw;
    right: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
#battery {
    filter: brightness(10000000000);
    width: 4vw;
    margin-left: 0.25vw;
    margin-bottom: 0.25vw;
    margin-right: 8vw;
}
#wifi {
    width: 2vw;
    margin-right: 2vw;
    margin-bottom: 0vw;
}
#btnCon {
    display: flex;
    /* background-color: red; */
    width: 80vw;
    height: 8vw;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 50vw;
    bottom:3vw;
    transform: translate(-50%, -50%);
}
#menuBtn {
    width: 5vw;
    margin: 0.7vw;
    filter: drop-shadow(0vw 0vw 0.2vw #222);
    animation: none;
}
#menuBtn:hover {
    border-radius: 50%;
    animation: blueEffect 0.9s infinite linear;
    cursor: pointer;
}
#gameConCon {
    display: flex;
    /* background-color: hotpink; */
    width: 200vw;
    height: 24vw;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 4vw; /* previously 5vw */
    bottom:32.5vh; /* previously 15vw */
    display: flex;
    justify-content: start;
    align-items: center;
    transition-duration: 150ms;
    transition-property: left, right;
}
#gameCon {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: end;
    /*background-color: red;*/
    height: 25vw;
    width: 18vw;
    margin-left: 1vw;
    margin-bottom: 7vw;
}
#invisBox {
    /* background-color: red; */
    width: 18vw;
    height: 18vw;
    position: absolute;
    top: 3vw;
    z-index: 10;
}
#invisBox:hover + p {
    color: #33acdf;
}

#gameCon > p {
    font-size: 2vw;
    margin-bottom: 0.8vw;
    color: #00000000;
    user-select: none;
}

#game {
    /*background-color: blue;*/
    width: 18vw;
    height: 18vw;
    filter: drop-shadow(0vw 0vw 0.4vw #222);
    object-fit:cover;
}
#invisBox:hover {
    cursor: pointer;
    animation: blueEffect 0.9s infinite linear;
    outline-offset: 0.3vw;
}
/*
placeholder:hover {
    animation: blueEffect 0.9s infinite linear;
}
*/
@keyframes blueEffect {
    0% {
        outline: rgb(41, 106, 171) solid 0.3vw;
    }

    50% {
        outline: rgb(0, 247, 255) solid 0.3vw;

    }
    100% {

        outline: rgb(41, 106, 171) solid 0.3vw;
    }
}