body{background-color: gray;display: flex;flex-direction: column;font-family: Arial, Helvetica, sans-serif;font-size: 24px;justify-content: center;margin-left: 200px;margin-right: 200px;}

.headerbox
{
    width: 75%;
    height: 150px;
    background-image: url(image.png);
    border: solid 10px white;
    display: flex;
    align-self: center;
    justify-content: center;
    backdrop-filter: blur(3px);
    align-items: center;
    margin: 20px;
}
.sidebox
{
    width: 150px;
    height: 850px;
    background-color: darkslategray;
    border: solid 10px white;
    display: flex;
    justify-content: center;
}
nav a
{
    background-color: rgba(25, 25, 112, 0.425);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: white;
}
nav a:hover
{
    background-color: darkblue;

}
.navbox
{
    background-color: rgba(60, 0, 138, 0.486);width: 100%;padding-top: 5px;padding-bottom: 5px;backdrop-filter: blur(5px);
}
@keyframes englishan
{
    12.5% {color: #FCE403FF;}
    25% {color: black}
    37.5% {color: #940006FF}
    50% {color: #068042FF}
    62.5% {color: #FC600FFF}
    75% {color: #A855EEFF}
    87.5% {color: #DF0300FF}
    100% {color: #3C41FEFF}
}
.english
{
    animation-name: englishan;
    animation-duration: 350ms;
    animation-iteration-count: infinite;
    animation-timing-function:steps(1);
}
@keyframes floatAround {
    0%   { transform: translate(0, 0) rotate(0deg); }
    10%  { transform: translate(-8px, 6px) rotate(-6deg); }
    20%  { transform: translate(9px, -7px) rotate(5deg); }
    30%  { transform: translate(-10px, -5px) rotate(8deg); }
    40%  { transform: translate(7px, 10px) rotate(-8deg); }
    50%  { transform: translate(-12px, 4px) rotate(6deg); }
    60%  { transform: translate(10px, -9px) rotate(-7deg); }
    70%  { transform: translate(-8px, 12px) rotate(9deg); }
    80%  { transform: translate(11px, -6px) rotate(-5deg); }
    90%  { transform: translate(-7px, -10px) rotate(7deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes doBarrelRoll
{
    25% {transform: rotate(90deg);}
    50% {transform: rotate(180deg);}
    75% {transform: rotate(270deg);}
    100% {transform: rotate(360deg);}
}

@keyframes rock
{
    25% {transform: rotate(90deg);}
    50% {transform: rotate(-90deg);}
}