html {
  height: 100%;
  width: 100%;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    background-color: #86bddb;
}

p {
    text-align: center;
    font-family: "Space Mono", monospace;
    color: #FFFFFF;
    font-size: 2rem;
    font-weight: bold;
}

#button {
    width: 50vw;
    aspect-ratio: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%);
}

#button-top{
    width: 90%;
    aspect-ratio: 3/2;
    position: absolute;
    top: 0;
    left: 50%;

    transform: translate(-50%, 0);

    background-color: #FF0000;

    border-radius: 50%;

    z-index: 21;
}

#button-top-side{
    width: 90%;
    aspect-ratio: 3/2;
    position: absolute;
    top: 5%;
    left: 50%;

    transform: translate(-50%, 0);

    background-color: #aa0000;

    border-radius: 50%;

    z-index: 20;
}

#button-top-side-2{
    width: 90%;
    height: 5%;
    position: absolute;
    top: 30%;
    left: 50%;

    transform: translate(-50%, 0);

    background-color: #aa0000;

    z-index: 20;
}

#button:active > #button-top-side {
    display: none;
}

#button:active > #button-top-side-2 {
    display: none;
}

#button:active > #button-top {
    top: 5%;
}

#button.pressed > #button-top-side {
    display: none;
}

#button.pressed > #button-top-side-2 {
    display: none;
}

#button.pressed > #button-top {
    top: 5%;
}

#button-rim-top{
    width: 100%;
    aspect-ratio: 3/2;
    position: absolute;
    top: 2.5%;
    left: 50%;

    transform: translate(-50%, 0);

    background-color: #dddddd;

    border-radius: 50%;

    z-index: 19;
}

#button-rim-side{
    width: 100%;
    aspect-ratio: 3/2;
    position: absolute;
    top: 7.5%;
    left: 50%;

    transform: translate(-50%, 0);

    background-color: #aaaaaa;

    border-radius: 50%;

    z-index: 18;
}

#button-rim-side-2{
    width: 100%;
    height: 5%;
    position: absolute;
    top: 37.5%;
    left: 50%;

    transform: translate(-50%, 0);

    background-color: #aaaaaa;

    z-index: 18;
}

#cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

#cover.show {
    opacity: 1;
}