body {
    margin: 0;
    background-color: #4e5159ff;
}

#app {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#container {
    width: 100%;
    position: relative;
}

@media (orientation: portrait) {
    #container {
        transform: rotateZ(90deg);
        width: 100vh;
    }
}

#background {
    width: 100%;
}

.blue-button {
    position: absolute;
    top: calc(100% * (152 / 450));
    width: calc(100% * (76 / 1280));
}

.blue-button:hover {
    filter: brightness(0.6);
}

.blue-button.one {
    left: calc(100% * (57 / 1280));
}

.blue-button.two {
    left: calc(100% * (163 / 1280));
}

.blue-button.three {
    left: calc(100% * (269 / 1280));
}

.blue-button.four {
    left: calc(100% * (375 / 1280));
}

.blue-button.five {
    left: calc(100% * (481 / 1280));
}

.blue-button.six {
    left: calc(100% * (587 / 1280));
}

.blue-button.seven {
    left: calc(100% * (693 / 1280));
}

.blue-button.eight {
    left: calc(100% * (799 / 1280));
}

.yellow-dome {
    position: absolute;
    top: calc(100% * (279 / 450));
    left: calc(100% * (696 / 1280));
    width: calc(100% * (149 / 1280));
}

.yellow-dome:hover {
    filter: brightness(0.6);
}

.yellow-square {
    position: absolute;
    left: calc(100% * (1160 / 1280));
    width: calc(100% * (98 / 1280));
}

.yellow-square:hover {
    filter: brightness(0.6);
}

.yellow-square.zigzag {
    top: calc(100% * (14 / 450));
}

.yellow-square.wavy {
    top: calc(100% * (125 / 450));
}

.yellow-square.straight {
    top: calc(100% * (236 / 450));
}

.yellow-square.dotted {
    top: calc(100% * (346 / 450));
}