body > #loader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10rem;
    background:linear-gradient(to bottom, #202020, #3c3c3c);
    transition-delay: 2.5s;
    z-index: 5;
}

body > #loader img {
    max-width: 60%;
    transition: 0.6s ease-out opacity;
}

body > #loader img:nth-of-type(2) { transition-delay: 1s; }
body > #loader img:nth-of-type(1) { transition-delay: 1.5s; }

body:not([_board="loader"]) .board#loader { opacity: 0; pointer-events: none; }
body:not([_board="loader"]) .board#loader img { opacity: 0;  }


body:not([_board="onboarding"]) .board#onboarding { opacity: 0; pointer-events: none; }
body:not([_board="tasks"]) .board#tasks { display: none; }
body:not([_board="experience"]) .board#experience { opacity: 0; pointer-events: none; }

.board {
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    transition: 0.3s ease-out opacity;
    background-color: var(--dark-background);
}