@import "../../variables.css";
#logo {
    position: fixed;
    top: 1vh;
    left: 1%;
    background-color: cornflowerblue;
    border-radius: 0.5rem;
    width: fit-content;
    height: fit-content;
    max-width: 98%;
    overflow: hidden;
}

#logo p {
    font-size: 2rem;
    color: aliceblue;
    padding: 0.5rem 1rem 0.5rem 1rem;
}

#logo.load {
    position: fixed;
    top: 30vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
}

#logo.loaded {
    animation: loaded 3s ease-out;
}

@keyframes loaded {
    0% {
        top: 30vh;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2000;
    }
    50% {
        top: 1vh;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2000;
    }
    100% {
        top: 1vh;
        left: 1%;
        transform: translateX(0);
    }
}

@media (min-width: 640px) {
    #logo p {
        font-size: 2rem;
    }
}

@media (min-width: 768px) {
    #logo p {
        font-size: 2rem;
    }
}

@media (min-width: 1024px) {
    #logo p {
        font-size: 2.5rem;
    }
}

@media (min-width: 1280px) {
    #logo p {
        font-size: 3rem;
    }
}