:root {
    --loader-logo-width: 60%;
    --loader-logo-color: var(--color-white);
    --loader-logo-margin: 10%;
    --loader-fade-in: 2s;
    --loader-fade-out: 1s;
    --loader-button-height: 80px;
    --loader-button-margin: 16px;
    --loader-button-border-radius: var(--card-border-radius);
    --loader-button-text-color: var(--color-shrubbery-leaf);
    --loader-button-fade-in: 1.3s;
    --loader-fullscreen-padding: 32px;
    --loader-fullscreen-size: 64px;
    --loader-fullscreen-hover: 8px;
    --loader-fullscreen-border: 8px;
    --loader-fullscreen-corner-size: 30%;
}

#loader {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--color-shrubbery-leaf), var(--color-grass-a));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: var(--loader-fade-out);
}

#loader .fullscreen {
    position: absolute;
    top: 0;
    right: 0;
    margin: var(--loader-fullscreen-padding);
    width: var(--loader-fullscreen-size);
    height: var(--loader-fullscreen-size);
    cursor: pointer;
    opacity: 0;
    transition: var(--loader-button-fade-in) opacity;
}

#loader .fullscreen:hover {
    width: calc(var(--loader-fullscreen-size) + 2 * var(--loader-fullscreen-hover));
    height: calc(var(--loader-fullscreen-size) + 2 * var(--loader-fullscreen-hover));
    top: calc(var(--loader-fullscreen-hover) * -1);
    right: calc(var(--loader-fullscreen-hover) * -1);
}

#loader .fullscreen .corner {
    position: absolute;
    width: var(--loader-fullscreen-corner-size);
    height: var(--loader-fullscreen-corner-size);
}

#loader .fullscreen .corner.left-top {
    left: 0;
    top: 0;
    border-left: var(--loader-fullscreen-border) solid var(--color-white);
    border-top: var(--loader-fullscreen-border) solid var(--color-white);
}

#loader .fullscreen .corner.right-top {
    right: 0;
    top: 0;
    border-right: var(--loader-fullscreen-border) solid var(--color-white);
    border-top: var(--loader-fullscreen-border) solid var(--color-white);
}

#loader .fullscreen .corner.left-bottom {
    left: 0;
    bottom: 0;
    border-left: var(--loader-fullscreen-border) solid var(--color-white);
    border-bottom: var(--loader-fullscreen-border) solid var(--color-white);
}

#loader .fullscreen .corner.right-bottom {
    right: 0;
    bottom: 0;
    border-right: var(--loader-fullscreen-border) solid var(--color-white);
    border-bottom: var(--loader-fullscreen-border) solid var(--color-white);
}

#loader .fullscreen.loaded {
    opacity: 1;
}

#loader.finished {
    opacity: 0;
    pointer-events: none;
}

#loader-graphics {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: var(--loader-logo-margin);
}

#loader-icon {
    width: var(--loader-logo-width);
    transition: var(--loader-fade-in);
    transition-timing-function: ease-in;
}

#loader-icon.invisible {
    opacity: 0;
}

#loader-icon svg {
    width: 100%;
    height: 100%;
}

#loader-icon svg path {
    fill: var(--loader-logo-color);
}

.loader-button {
    width: 25%;
    height: var(--loader-button-height);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--loader-button-margin);
    opacity: 0;
    transition: var(--loader-button-fade-in);
    transition-timing-function: ease-in;
}

.loader-button.loaded {
    opacity: 1;
}

.loader-button button {
    width: 100%;
    transition: 0.5s;
    background-color: var(--color-white);
    color: var(--loader-button-text-color);
    font-weight: bold;
    border-radius: var(--loader-button-border-radius);
}

.loader-button button:active {
    background-color: var(--color-fish-black);
    color: var(--color-white);
    transition: 0s;
}

.loader-button button.confirm {
    background-color: var(--color-fish-black);
    color: var(--color-white);
    transition: 0s;
}

.loader-button button.confirm:active {
    background-color: var(--color-white);
    color: var(--loader-button-text-color);
    transition: 0s;
}