/* ================================================== ETHER HUB */

#ether {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0; left: 0;

    background-color: #4f2858;
    color: #fff;

    transition: 2s;
}

body:not(.ether) #ether {
    opacity: 0;
    pointer-events: none;
}

#essence {
    height: 90vh;

    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: essence-shine 10s ease-in-out infinite;
}

@keyframes essence-shine {
    0% {transform: translate(-50%, -50%) scale(1)}
    50% {transform: translate(-50%, -50%) scale(0.9)}
    100% {transform: translate(-50%, -50%) scale(1)}
}

/* ================================================== DIVINE SKILLS */

#divine-energy-container {
    position: absolute;
    top: 5vh; left: 50%;
    transform: translateX(-50%);
}

#divine-energy-container > p {
    font-size: 22px;
    font-weight: bold;
}

#divine-skills {
    display: flex;
    flex-direction: column;

    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

#divine-skills > div {
    display: flex;
    justify-content: center;
}

.divine-skill {
    width: 50px;
    height: 50px;
    margin: 20px;
    border: 4px solid #6f6f3c;
    border-radius: 100%;
}

.divine-skill:not(.locked) {
    background-color: #c7ffa1;
    border-color: #ff90f8;
}
.divine-skill.unreachable {opacity: 0}

button.divine-skill.unable {
    pointer-events: unset;
}

/* ================================================== GO TO WORLD */

.go-to-world {
    position: absolute;
}

.go-to-world.frost {top: 10vh; left: 10vh}
.go-to-world.water {top: 10vh; right: 10vh}
.go-to-world.war {bottom: 10vh; left: 10vh}
.go-to-world.jungle {bottom: 10vh; right: 10vh}