#loader {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    animation: loader 2.5s ease;
    position: fixed;
    z-index: 99;
    opacity: 0;
    top: -4rem;
}
#loader .logo {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    line-height: 3.5rem;
    font-size: 3.5rem;
    user-select: none;
    z-index: 1;
}
#loader .logo .box{
    width: 3rem;
    height: 3rem;
    margin-right: .5rem;
    display: grid;
    grid-template-columns: repeat(2, 1.5rem);
    grid-template-rows: repeat(2, 1.5rem);
    animation: logo_box 2s ease;
}
#loader .logo .box div { animation: logo_box_s 2s ease-out; }
#loader .logo .box :nth-child(1){ background-color: #000000; }
#loader .logo .box :nth-child(2){ background-color: #808080; }
#loader .logo .box :nth-child(3){ background-color: #808080; }
#loader .logo .box :nth-child(4){ background-color: #cccccc; }
#loader .logo p{ 
    margin: 0;
    animation: logo_text 2s ease-out;
}
#loader .logo p:nth-child(2) { font-weight: bold; }
#loader .logo p:nth-child(3) { font-weight: 100; }
@keyframes logo_box {
    0% { transform: translateX(7.5rem); opacity: 0; }
    8% { transform: translateX(7.5rem); }
    20% { transform: rotate(0) scale(1) translateX(-3rem); opacity: 1;}
    50% { transform: rotate(90deg) scale(2); }
    60% { transform: rotate(90deg) scale(2); }
    90% { transform: rotate(0) scale(1); }
    100% { transform: translateX(0);}
}
@keyframes logo_box_s {
    20% { transform: rotate(0); }
    50% { transform: rotate(-90deg); }
    60% { transform: rotate(-90deg); }
    90% { transform: rotate(0); }
}
@keyframes logo_text {
    0%, 80% { opacity: 0; transform: translateX(1rem); }
    100% { opacity: 1; transform: translateX(0);}
}
@keyframes loader {
    0%, 90% { 
        height: calc(100% + 4rem);
        background-color: white;
        opacity: 1;
    }
    99% { 
        background-color: white; 
        opacity: 1; 
    }
    100% { 
        height: 0%;
        opacity: 0;
        background-color: none;
    }
}