@keyframes logoslam {
    0%   {margin-top: 100%; }
    10%  {margin-top: 80%;  }
    20%  {margin-top: 60%;  }
    30%  {margin-top: 40%;  }
    40%  {margin-top: 35%;  }
    50%  {margin-top: 20%;  }
    60%  {margin-top: 2%;  }
    100% {margin-top: -20px;  }
}

@keyframes textfloat {
    0%   {margin-top:  100%;}
    10%  {margin-top:  80% ;}
    20%  {margin-top:  60% ;}
    30%  {margin-top:  40% ;}
    40%  {margin-top:  35% ;}
    50%  {margin-top:  30% ;}
    60%  {margin-top:  15% ;}
    70%  {margin-top:  1%  ;}
    80%  {margin-top:  -10px  ;}
    100% {margin-top:  -20px  ;}
}

@keyframes messagePop {
    2% {
        margin-top: 50%;
        width: 0vw;
        height: 0vh;
    }
    4% {
        margin-top: 45%;
        width: 10vw;
        height: 2vh;
    }
    8% {
        margin-top: 37%;
        width: 20vw;
        height: 5vh;
    }
    12% {
        margin-top: 40%;
        width: 20vw;
        height: 5vh;
    }
    92% {
        margin-top: 40%;
        width: 20vw;
        height: 5vh;
    }
    96% {
        margin-top: 39%;
        width: 20vw;
        height: 5vh;
    }
    98% {
        margin-top: 45%;
        width: 10vw;
        height: 2vh;
    }
    100% {
        margin-top: 50%;
        width: 0vw;
        height: 0vh;
    }
}


#originalBGColor
{
    background-color: #310034;
}

body {
 position: relative;
 min-height: 100vh;
 margin: 0;
 background-color: #0b2400;
 overflow-x: hidden;
}

#centeredItems
{
    margin-left: 50%;
}

#centeredLogo
{
    margin-left: 36.5%;
    
}

.left {
    margin: left;
    width: 50%;
    padding: 10px;
}


#popupmessage
{
    user-select: none;
    position: fixed;
    display: block;
    margin-top: 55%;
    background-color: rgb(138, 214, 103);
    animation-name: messagePop;
    animation-duration: 6s;
    animation-delay: 14s;
    animation-timing-function: linear;
    align-content: center;
    width: 0vw;
    height: 0vh;
    border-width: 4px;
    border-radius: 2px;
    border-color: rgb(88, 88, 88);
    z-index: 600;
    display: block;
}

#logo {
    user-select: none;
    position: fixed;
    animation-name: logoslam;
    animation-duration: 7s;
    animation-timing-function: linear;
    width:  500px;
    height: 500px;
    margin-top: -20px;
    margin-left: auto;
    z-index: -35;
    display: block;
}

#logotext {
    user-select: none;
    margin-top: -5%;
    position: fixed;
    animation-name: textfloat;
    animation-duration: 9s;
    animation-timing-function: linear;
    width:  500px;
    height: 500px;
    margin-top: -20px;
    margin-left: auto;
    z-index: -33;
    display: block;
}

#backgroundimg
{
    user-select: none;
    position: absolute;
    width: 1%;
    width: 100vh;
    left: 0;
    top: 0%;
    z-index: -100;
}

#HomePanel
{
    user-select: none;
    position: relative;
    background-color: rgb(78, 78, 78);
    left: 5vw;
    margin-top: 400px;
    width: 90vw;
    height: 300vh;
    z-index: 100;
    display: block;
    pointer-events: all;
    border: 4px solid rgb(24, 24, 24);
    border-radius: 30px;
    box-shadow: 10px 10px 25px;
}

#NavPanel
{
    user-select: none;
    position: relative;
    background-color: rgb(78, 78, 78);
    left: 5vw;
    width: 90vw;
    height: 300vh;
    z-index: 100;
    display: block;
    pointer-events: all;
}

#NavHeader
{
    position: fixed; 
    width: 89.6vw; 
    height: 10%; 
    border: 5px solid black; 
    background-color: rgb(82, 109, 76);
    z-index: 150;
}

.paragraphExSmall
{
    margin-left: 5%; 
    font-size: 150%; 
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
    color: rgb(180, 180, 180);
}

.paragraphSmall
{
    margin-left: 5%; 
    margin-right: 5%;
    font-size: 220%; 
    font-weight: lighter;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
    color: rgb(180, 180, 180);
}

.paragraphLarge
{
    margin-left: 5%; 
    font-size: 420%; 
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
    color: rgb(180, 180, 180);
}