:root{
    --degrees: 0deg;
}

html, body{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper{
    position: relative;
    display: block;
    width: 100%;
    max-width: 700px;
    height: 100%;

    margin: 0 auto;
    padding: 0 3%;

    justify-content: center;
    align-items: center;
}

.gamearea{
    position: relative;
    display: flex;
    padding: 10%;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.face{
    display: flex;
    position: relative;
    height: 100%;
    aspect-ratio: 4 / 5;
    background-color: #f5cf98;

    border-radius: 50% 50% 40% 40%;

    float: left;
}

.left{
    left: 0%;
}

.right{
    right: 0%;
}

.mayuges{
    position: absolute;
    display: block;
    width: 60%;
    height: 3%;
    top: 42%;
    left: 20%;
}

.mayuge{
    position: absolute;
    display: block;
    width: 30%;
    height: 100%;
    border-radius: 3%;
    background-color: #292a2e;
}

.eyes{
    position: absolute;
    display: block;
    width: 60%;
    height: 7%;
    top: 50%;
    left: 20%;
}

.eye{
    position: absolute;
    display: block;
    width: 30%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
}

/* 目の黒目部分 */
.eye::after{
    content: '';
    position: absolute;
    display: block;
    width: 40%;
    height: 100%;
    top: 0%;
    left: 30%;
    border-radius: 50%;
    background-color: #000;
}

/*口*/
.mouth{
    position: absolute;
    display: block;
    width: 10%;
    height: 1%;
    top: 80%;
    left: 45%;
    background-color: #000000;
}

.mouth::before{
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0%;
    left: -100%;
    background-color: #000000;

    transform-origin: right center;
    transform: rotate(var(--degrees));
}

.mouth::after{
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0%;
    right: -100%;
    background-color: #000000;

    transform-origin: left center;
    transform: rotate(calc(-1 * var(--degrees)));
}

.glasses{
    position: absolute;
    display: block;
    width: 70%;
    height: 18%;
    top: 45%;
    left: 15%;
}

.glasses::before{
    content: '';
    position: absolute;
    display: block;
    width: 25%;
    height: 5%;
    top: 50%;
    left: -25%;
    background-color: #000000;
}

.glasses::after{
    content: '';
    position: absolute;
    display: block;
    width: 25%;
    height: 5%;
    top: 50%;
    right: -25%;
    background-color: #000000;
}

.glass{
    position: absolute;
    display: block;
    width: 35%;
    height: 96%;
    border-radius: 50%;
    background-color: #39bbef57;

    border: 5px solid #000000;
}

.glass.right{
    border-radius: var(--radius, 25%);
}

.glass.left{
    border-radius: var(--radius, 25%);
}

.bridge{
    position: absolute;
    display: block;
    width: 24%;
    height: 5%;
    top: 40%;
    left: 38%;
    background-color: #000000;
}

.fukidashi{
    position: relative;
    display: flex;
    float: left;
    height: 100%;
    padding: 0 3em;

    align-items: center;
}

.fukidashi p{
    display: inline-block;
    padding: 2em;
    width: 100%;
    background-color: #fff;
    border-radius: 30%;
    border: 1px solid #000000;
}