:root {
    --groundHeight: 10.762vh;
}

@media (max-aspect-ratio: 1600/1050) {
    :root {
        --groundHeight: 7.063vw;
    }
}

body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    background-image: url(img/img-world.png);
    background-size: contain;
    background-color: #6389ff;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center bottom;
}

.player-placeholder {
    position: absolute;
    bottom: 0px;
    left: 50%;
    visibility: hidden;
    transform: translate(-50%, 0%);
}

#ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: var(--groundHeight);
    background-image: url(img/img-world-ground.png);
    background-size: contain;
}

#player {
    position: absolute;
    left: 7.5vw;
    bottom: var(--groundHeight);
    height: calc(var(--groundHeight) * 1);
}

.platform {
    position: absolute;
    transform: translate(-50%, 0%);
    bottom: calc(var(--groundHeight) * 3);
    height: calc(var(--groundHeight) * 0.66);
    /* background-color: fuchsia; */
    /* opacity: 0.5; */
}

#platform-1 {
    left: calc(50% - var(--groundHeight) * 2.96);
    width: calc(var(--groundHeight) * 0.65);
}

#platform-2 {
    left: calc(50% + var(--groundHeight) * 1.04); 
    width: calc(var(--groundHeight) * 3.35);
}

#platform-3 {
    left: calc(50% + var(--groundHeight) * 1.05); 
    bottom: calc(var(--groundHeight) * 5.66);
    width: calc(var(--groundHeight) * 0.65);
}

.block {
    position: absolute;
    transform: translate(-50%, 0%);
    bottom: calc(var(--groundHeight) * 3.00);
    width: calc(var(--groundHeight) * 0.65);
    height: calc(var(--groundHeight) * 0.66);
    /* background-color: greenyellow; */
    /* opacity: 0.5; */
}

#block-platform {
    left: calc(50% + var(--groundHeight) * 1.04); 
    width: calc(var(--groundHeight) * 3.35);
}

#block-linkedin {
    left: calc(50% - var(--groundHeight) * 2.96);
}

#block-github {
    left: calc(50% + var(--groundHeight) * 0.38); 
}

#block-twitter {
    left: calc(50% + var(--groundHeight) * 1.70); 
}

#block-todo {
    left: calc(50% + var(--groundHeight) * 1.05); 
    bottom: calc(var(--groundHeight) * 5.66);
}

.controller {
    position: absolute;
    top: 0;
    height: 100%;
    width: 40%;
    opacity: 0;
}

#controller-left {
    left: 0;
}

#controller-right {
    right: 0;
}