.gameboy {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 0px;
    background-color: #4f50db;
    box-shadow: 0px -5px 0px #0d0e51, 0px 5px 0px #3d38b5;
    font-family: sans-serif;
    -webkit-user-select: none;
    cursor: default;

    .screen-area {
        position: relative;
        padding: 35px 50px 5px 50px;
        border-radius: 15px 15px 15px 15px;
        background-color: #23252d;
        color: #67879a;
        box-shadow: 0px 2px 0px black, 0px -2px 0px black, -2px 0px 0px black, 2px 0px 0px black;

        &::after {
            content: '';
            display: block;
            position: absolute;
            top: calc(100% - 20px);
            left: 5px;
            width: calc(100% - 10px);
            height: 30px;
            border-radius: 50%;
            background-color: #23252d;
            box-shadow: 0px 2px 0px black;
        }

        .power {
            position: absolute;
            display: block;
            width: 50px;
            left: 0px;
            top: 80px;
            font-size: 10px;
            letter-spacing: -0.5px;
            text-align: center;

            .indicator {
                line-height: 14px;

                .led {
                    position: relative;
                    display: inline-block;
                    background-color: #790f12;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    z-index: 5;
                }

                .led.on {

                    background-color: #ca1a21;
                    box-shadow: 0px 0px 10px #ff552e;
                }

                .arc {
                    position: relative;
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    margin-left: -2px;

                    &::before {
                        position: absolute;
                        left: 3px;
                        content: '';
                        display: inline-block;
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background-color: #67879a;
                    }

                    &::after {
                        position: absolute;
                        left: 0px;
                        content: '';
                        display: inline-block;
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background-color: #23252d;
                    }
                }
            }
        }

        .display {
            background-color: #929d97;
            height: 190px;
            width: 210px;
            border-radius: 3px;
            margin-bottom: 15px;
            margin-left: 50%;
            transform: translateX(-50%);
        }

        .label {
            position: relative;
            text-align: center;
            font-size: 20px;
            z-index: 5;

            .title {
                display: inline;
                font-weight: bold;
                font-style: italic;
            }

            .subtitle {
                display: inline;
                font-family: "Comic Sans MS";
                font-weight: bold;
                font-size: 22px;
                letter-spacing: -1px;

                .c,
                .o1,
                .l,
                .o2,
                .r {
                    display: inline-block;
                }

                .c {
                    color: #aa2058;
                }

                .o1 {
                    color: #605bd9;
                    font-size: 20px;
                }

                .l {
                    color: #78b930;
                    transform: rotateZ(-10deg);
                }

                .o2 {
                    color: #b6b524;
                    font-size: 20px;
                }

                .r {
                    color: #317aaf;
                }
            }
        }
    }

    .nintendo {
        padding: 0px 5px;
        width: 103px;
        color: #3436bf;
        font-weight: bold;
        text-align: center;
        margin: 0 auto;
        border: 2px solid #3436bf;
        border-radius: 11px;
        margin-top: 30px;
        text-shadow: 0px -2px 1px #6b67ed;
        box-shadow: 0px -2px 1px #6b67ed;
    }

    .controls {
        display: flex;
        justify-content: space-between;
        width: 85%;
        margin-left: 50%;
        transform: translateX(-50%);

        .dpad {
            position: relative;
            display: inline-block;
            width: 90px;
            height: 90px;
            z-index: 5;

            >* {
                width: 33%;
                height: 33%;
                position: absolute;
                background-color: #565e6a;
                cursor: pointer;

                i {
                    position: relative;
                    display: block;
                    margin: 0 auto;
                    text-align: center;
                    height: 100%;
                    font-size: 28px;
                    color: #333a4a;
                    text-shadow: 0px -0.5px 0px #aaa;
                }
            }

            .up {
                top: calc(0% + 4px);
                left: 33%;
                border-top: 4px solid black;
                border-left: 4px solid black;
                border-right: 4px solid black;
                border-radius: 5px 5px 0px 0px;

                &:active {
                    background: linear-gradient(to top, #565e6a 0%, #333 100%);
                }

                i {
                    top: -5px;
                }
            }

            .right {
                top: 33%;
                left: calc(66% - 4px);
                border-top: 4px solid black;
                border-bottom: 4px solid black;
                border-right: 4px solid black;
                border-radius: 0px 5px 5px 0px;
                box-shadow: 0px -2px 0px #888 inset;

                &:active {
                    background: linear-gradient(to right, #565e6a 0%, #333 100%);
                }

                i {
                    top: -5px;
                }
            }

            .down {
                top: calc(66% - 4px);
                left: 33%;
                border-left: 4px solid black;
                border-bottom: 4px solid black;
                border-right: 4px solid black;
                border-radius: 0px 0px 5px 5px;
                box-shadow: 0px -2px 0px #888 inset;

                &:active {
                    background: linear-gradient(to bottom, #565e6a 0%, #333 100%);
                }
            }

            .left {
                top: 33%;
                left: calc(0% + 4px);
                border-top: 4px solid black;
                border-bottom: 4px solid black;
                border-left: 4px solid black;
                border-radius: 5px 0px 0px 5px;
                box-shadow: 0px -2px 0px #888 inset;

                i {
                    top: -5px;
                }

                &:active {
                    background: linear-gradient(to left, #565e6a 0%, #333 100%);
                }
            }

            .middle {
                top: 33%;
                left: 33%;
                z-index: -5;

                &::after {
                    content: '';
                    position: absolute;
                    top: 20%;
                    left: 20%;
                    display: inline-block;
                    border: 1px solid #6e737a;
                    background: linear-gradient(to bottom, #6d7075 0%, #6d7075 30%, #23272f 70%, #23272f 100%);
                    border-radius: 50%;
                    height: 60%;
                    width: 60%;
                }
            }

            .up-down {
                background-color: #565e6a;
                border: 4px solid black;
                border-radius: 5px;
                width: 20px;
                height: 60px;
            }

            .left-right {
                background-color: #565e6a;
                border: 4px solid black;
                border-radius: 5px;
                width: 60px;
                height: 20px;
            }
        }

        .a-b {
            position: relative;
            display: inline-block;
            width: 120px;
            height: 90px;

            .a,
            .b {
                position: absolute;
                display: inline-block;
                font-size: 22px;
                width: 40px;
                height: 40px;
                line-height: 40px;
                border-radius: 50%;
                background-color: #2c313e;
                border-bottom: 2px solid #888;
                box-shadow: -1px 1px 5px black, 0px 0px 5px black inset;
                text-shadow: 0px -1px 1px #888;
                color: #2c313e;
                text-align: center;
                -webkit-user-select: none;
                cursor: pointer;
                transition: box-shadow 0.1s ease-out, border 0.1s ease-out, line-height 0.2s ease-out;

                &:active {
                    box-shadow: -1px 1px 1px black, 0px 0px 5px black inset;
                    border-width: 0px;
                    line-height: 45px;
                }
            }

            .a {
                top: 15px;
                right: 10px;
            }

            .b {
                top: 35px;
                left: 0%;
            }
        }
    }

    .start-select {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;

        .select,
        .start {
            display: inline-block;
            color: #6b67ed;
            text-shadow: 0px -1px 0px #3436bf;
            letter-spacing: -1px;
            width: 60px;
            font-size: 16px;
            text-align: center;
            margin-top: 60px;

            &::before {
                content: '';
                display: block;
                margin: 0 auto;
                width: 30px;
                height: 10px;
                margin-bottom: 5px;
                border-radius: 40%;
                background: linear-gradient(to bottom, #0b0a1c 0%, #0b0a1c 30%, #62636c 70%, #62636c 100%);
                background-repeat: no-repeat;
                border: 2px solid #0b0a1c;
                box-shadow: 0px -2px 1px #8482e9;
                cursor: pointer;
            }

            &:active::before {
                background: linear-gradient(to bottom, #0b0a1c 0%, #0b0a1c 50%, #62636c 100%);
            }
        }
    }

    .speaker {
        position: absolute;
        display: flex;
        width: 75px;
        height: 75px;
        right: 15px;
        bottom: 5px;
        justify-content: space-between;
        flex-wrap: wrap;
        z-index: 100;
        transform: skewY(-10deg);

        .dot {
            width: 7px;
            height: 7px;
            margin: 1px;
            border-radius: 50%;
        }

        .dot.placeholder {
            background-color: transparent;
        }

        .dot.open {
            background-color: #0a0717;
            box-shadow: 0px 0px 2px #7c7be0 inset;
        }

        .dot.closed {
            background: linear-gradient(to bottom, #6664e5 0%, #2d3590 100%);
            box-shadow: 0px 0px 2px #7c7be0 inset;
        }
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top, #aaa 0%, white 100%);
}

.gameboy {
    margin: 0 auto;
}

@media (orientation: landscape) {

    .gameboy {
        width: 100%;
        height: 100%;
    }

    .gameboy .screen-area {
        margin-left: 50%;
        transform: translateX(-50%);
        width: 55%;
        padding: 20px 30px 5px 30px;
        z-index: 999;
    }


    .gameboy .controls {
        flex-direction: row;
        justify-content: space-around;
        justify-content: space-between;
        width: 98%;
        top: 65px;
        position: absolute;
    }

    .gameboy .controls .dpad {
        margin-left: 20px;
    }

    .gameboy .start-select {
        position: absolute;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        height: 60px;
        display: flex;
        justify-content: center;
        width: 85%;
        justify-content: space-between;
    }

    .gameboy .start-select .start {
        margin-top: 0px;
    }

    .gameboy .start-select .select {
        margin-top: 0px;
    }


    .gameboy {
        & .controls {
            & .a-b {
                .b {
                    top: 35px;
                    left: 5%;
                }
            }
        }
    }

}

@media (orientation: portrait) {
    .gameboy {
        width: 100%;
        height: 100%;
    }
}


.install {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 99999;
    color: white;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;
    padding: 20px;
    overflow: auto;
}