@font-face {
    font-family: "ComicNeue-Italic";
    src: url('../font/ComicNeue-Italic.ttf');
}

@font-face {
    font-family: "Orbitron-VariableFont_wght";
    src: url('../font/Orbitron-VariableFont_wght.ttf');
}

html, body {
    height: 100%;
}

.container {
    display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* --- Gameboy container specifications : ------------- */
#gb {
    width: min(60.6vh, 100vw);
    min-width: 181.8px;
    height: min(100vh, calc(100vw / 0.606));
    min-height: 300px;
    margin: 0 auto;
    border: 2px rgb(56, 56, 56) solid;
    background-color: rgb(209, 209, 209);
    border-radius: 3vh 3vh 10vh 3vh;
    font-family: arial;
    box-shadow: inset 0px 0px 30px rgb(0, 0, 0);
    position: relative;
    container-type: size;
}

/* --- On-Off Switch button : ------------- */
.switch_container {
    height: 3cqh;
    position: absolute;
    left: 15%;
    top: 0.8cqh;
    display: flex;
}

.airing_container {
    width: 23%;
    height: 8%;
    position: absolute;
    bottom: 4.5%;
    right: 5%;
    display: flex;
    justify-content: space-between;
    transform: rotate(-30deg);
}

.switch {
    display: inline-block;
    width: 4.8cqh;
    height: 3cqh;
    border: 2px solid rgba(0, 0, 0, 0.5);
    border-radius: 1.5cqh;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.on_off_text {
    font-size: 2cqh;
    padding-left: 0.4rem;
    width: auto;
    color: rgb(209, 209, 209);
    text-shadow: 1px 1px 2px rgb(0, 0, 0, 0.8), -1px -1px 2px rgba(0, 0, 0, 0.8);
}

.switch_slider {
    position: absolute;
    display: inline-block;
    width: calc(3cqh - 4px);
    height: calc(3cqh - 4px);
    border: 0.3cqh solid rgba(0, 0, 0, 0.5);
    border-radius: 1.5cqh;
    background-color: rgb(209, 209, 209);
    box-shadow: inset 0px 0px 5px rgba(255, 255, 255, 0.7);
}

.switch_on {
    left: 2px;
}

.switch_off {
    left: calc(2.4cqh - 2px);
}

.airing_lines {
    width: 1cqh;
    height: 100%;
    border: 2px rgba(0, 0, 0, 0.5) solid;
    box-shadow: inset 0px 0px 7px rgba(0, 0, 0, 0.5);
    border-radius: 0.5cqh;
}

#gb_triangle {
    display: inline-block;
    height: 0;
    width: 0;
    border-bottom: 11.5cqh solid rgba(0, 0, 0, 0.1);
    border-left: 20cqh solid transparent;
    position: absolute;
    bottom: 0;
    right: 0;
}

#gb_lines {
    height: 5%;
    width: 100%;
    position: relative;
}

#gb_line_X {
    height: 0.8cqh;
    width: 100%;
    border-bottom: 2px solid rgba(0, 0, 0, 0.5);
    border-top: 2px solid rgba(0, 0, 0, 0.5);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3);
    position: absolute;
    bottom: 0;
}

.gb_line_Y {
    height: 4.2cqh;
    width: 0.8cqh;
    border-left: 2px solid rgba(0, 0, 0, 0.5);
    border-right: 2px solid rgba(0, 0, 0, 0.5);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3);
    position: absolute;
}

.gb_line_left {
    left: 6%;
}

.gb_line_right {
    right: 6%;
}

#gb_screen_border {
    width: 85%;
    height: 39%;
    margin: 6% auto 0;
    border: 2px rgb(56, 56, 56) double;
    background-color: rgb(83, 83, 83);
    border-radius: 5% 5% 20% 5%;
    position: relative;
    display: flex;
    box-shadow: inset 0px 0px 10px black;
}

#gb_led_battery {
    position: absolute;
    top: 40%;
    left: 2%;
}

#gb_led {
    width: 2cqh;
    height: 2cqh;
    border: 2px rgba(0, 0, 0, 0.788) solid;
    background-color: rgb(121, 23, 23);
    box-shadow: inset 0px 0px 4px rgb(0, 0, 0);
    border-radius: 10px;
    margin: 0 10px 10px 10px;
}

#gb_battery {
    color: silver;
    font-weight: bold;
    text-align: center;
    font-size: 1.5cqh;
}

#gb_screen {
    width: 65%;
    height: 77%;
    margin: auto;
    background-color: rgb(73, 107, 41);
    border: 5px rgb(46, 46, 46) double;
    border-radius: 5px;
    box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.3);
}

#gb_text {
    color: rgba(23, 23, 133, 0.8);
    width: auto;
    margin: 1% 3% 0 5%;
    background-color: yellow(83, 83, 83);
    display: table;
}

#gb_text_nintendo {
    padding-right: 0.5rem;
    display: table-cell;
    font-size: 2.5cqh;
    font-weight: 1000;
}

#gb_text_gameboy {
    padding-right: 0.5rem;
    font-family: "ComicNeue-Italic";
    display: table-cell;
    font-size: 3.5cqh;
    font-weight: bold;
}

#gb_text_tm {
    display: table-cell;
    font-size: 1.8cqh;
    font-weight: bold;
}

#all_btns {
    height: 20cqh;
    width: 20cqh;
    position: absolute;
    top: 58%;
    left: 6%;
    box-shadow: inset 0px 0px 50px rgba(112, 112, 112, 0.315);
    border-radius: 50%;
}

#btn_cross {
    height: 90%;
    width: 90%;
    top: 5%;
    left: 5%;
    position: relative;
}

.btn_container_Y {
    height: 100%;
    width: calc(100% / 3);
    border-radius: 10px 0 0 10px;
    position: absolute;
    left: calc(100% / 3);
}

.btn_container_X {
    height: calc(100% / 3);
    width: 100%;
    border-radius: 10px 0 0 10px;
    display: flex;
    flex-direction: row;
    position: absolute;
    top: calc(100% / 3);
}

.btn_move {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* font-weight: bolder; */
    font-size: 4cqh;
    line-height: 1;
    border-radius: 10%;
    background-color: rgb(34, 34, 34);
    box-shadow: inset 0px 0px 30px rgb(36, 36, 36);
    box-shadow: inset 0px 0px 20px rgba(255, 255, 255, 0.1);
}

.btn_move-up {
    height: calc(100% / 3);
    width: 100%;
    border: 3px black solid;
    border-radius: 10px 10px 0 0;
}

.btn_move-down {
    height: calc(100% / 3);
    width: 100%;
    border: 3px black solid;
    border-radius: 0 0 10px 10px;
}

.btn_move-left {
    height: 100%;
    width: calc(100% / 3);
    border: 3px black solid;
    border-radius: 10px 0 0 10px;
}

.btn_move-right {
    height: 100%;
    width: calc(100% / 3);
    border: 3px black solid;
    border-radius: 0 10px 10px 0;
}

.centre_Y {
    height: calc(100% / 3);
    width: 100%;
    background-color: black;
    border: 3px black solid inset;
    box-shadow: inset 0px 0px 20px rgba(255, 255, 255, 0.2);
}

.centre_X {
    height: 100%;
    width: calc(100% / 3);
    background-color: black;
    border: 3px black solid inset;
    box-shadow: inset 0px 0px 20px rgba(255, 255, 255, 0.2);
}

#centre_circle {
    height: 35%;
    width: 35%;
    position: absolute;
    top: 32.5%;
    left: 32.5%;
    background-color: rgb(34, 34, 34);
    border: 2px rgba(0, 0, 0, 0.774) solid;
    border-radius: 50%;
    box-shadow: inset 0px 0px 20px rgba(255, 255, 255, 0.1);
}

#button_container_gb {
    height: 10cqh;
    width: 35%;
    position: absolute;
    right: 5%;
    top: 60%;
    border-radius: 50px;
    transform: rotate(-30deg);
    box-shadow: inset 0px 0px 50px rgb(145, 145, 145);
    color: rgba(23, 23, 133, 0.767);
    font-family: "Orbitron-VariableFont_wght";
    font-size: 2.7cqh;
    font-weight: bold;
}

#buttons_gb {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.button_content_gb {
    width: 100%;
    height: 100%;
    text-align: center;
}

.button_gb {
    width: 7cqh;
    height: 7cqh;
    background-color: rgb(110, 8, 56);
    border: 3px rgba(179, 52, 111, 0.7) solid;
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    margin: 1.5cqh;
}

#ss_container {
    width: 100%;
    position: absolute;
    top: 78%;
    color: rgba(23, 23, 133, 0.9);
    text-align: center;
    font-family: "Orbitron-VariableFont_wght";
    font-weight: bold;
    font-size: 1.7cqh;
    letter-spacing: 0.2rem;
    display: flex;
    justify-content: center;
}

.ss_content {
    transform: rotate(-30deg);
}

.ss_content a {
    display: flex;
    border: 1px rgba(63, 63, 63, 0.171) solid;
    box-shadow: inset 0px 0px 40px rgba(175, 175, 175, 0.8);
    border-radius: 2cqh;
    margin: 0 0.8rem;
}

.ss_button {
    height: 2.5cqh;
    width: 7cqh;
    background-color: rgb(116, 116, 116);
    border: 1px rgb(63, 63, 63) solid;
    border-radius: 2cqh;
    margin: 0.75cqh;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.4);
}