/* Main loading page */

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
        z-index: 0;
    }
    50% {
        opacity: 1;
        z-index: 1;
    }
    100% {
        opacity: 0.1;
        z-index: -1;
    }
}

@keyframes blindAnimation {
    0% {
        z-index: 2;
        top: -100vh; 
    }
    50% {
        z-index: 2;
        bottom: 100vh;
    }
    100% {
        z-index: 2;
        bottom: 20vh; 
    }
}


#blind, .loadingText, .mainText{
    position: absolute;
}
.loadingText, .mainText{
    place-self: center;
    text-align: center;
}


#blind{
    width: 100vw;
    height: 100vh;
    background-color: black;
    animation: blindAnimation ease-in-out 5.45s 1;
}
.loadingText{
    position: relative;
    animation: fadeInAnimation ease-in-out 5.45s 1 alternate; 
}

#name{
    font-size: 5.25em;
}

#position{
    font-size: 2em;
}

@media (max-width: 1920px) {
    #name{
        text-shadow: 0.075vw 1vw 1vw black;
    }

    .mainText #name {
        font-size: 5em;
        margin-bottom: 10vh;
    }
    
    #menu {
        display: flex;
        flex-direction: row;
        align-items: center; 
        gap: 2em;
        height: 25vh;
    }

    .item {
        font-size: 2em;
        text-shadow: 0.075vw 1vw 1vw black; 
    }

    .item > a {
        text-align: center;
    }
}

@media (max-width: 1200px) {
    .item {
        font-size: 2.5em; 
    }

    .item > a {
        text-align: center;
    }
}

@media (max-width: 780px) {
    #aboutMe > .mainText > #name {
        font-size: 4em;
        margin-bottom: 5vh;
    }

    #aboutMe > .mainText > #menu {
        margin-top: 10vh;
        height: 28vh;
    }
    #menu {
        flex-direction: column;
        height: 32vh;
    }

    #aboutMe > .mainText > #menu > .item {
        font-size: 3em;
        margin-top: 0;     
        font-weight: 400;
        text-shadow: 0.075vw 1vw 1vw black; 
    }

    .item > a {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .loadingText #name {
        font-size: 2em;
    }

    .loadingText #position {
        font-size: 1em;
    }

    #aboutMe > .mainText > #name {
        font-size: 3em;
    }
}


@media (max-width: 375px) {
    .loadingText #name {
        font-size: 2em;
    }

    .loadingText #position {
        font-size: 1em;
    }

    #aboutMe > .mainText > #menu {
        height: 28vh;
    }

    #aboutMe > .mainText > #name {
        font-size: 2.5em;
    }

    
    #aboutMe > .mainText > #menu > .item {
        font-size: 2.5em;
    }
}