* {
    font-family: monospace;
    margin: 0;
    padding: 0;
    color-scheme: dark;
    --maincolor: aqua;
    --secdcolor: blue;
    --tetrcolor: magenta;
    --bigtext: 5vh;
    --bigminustext:5vh;
}

@keyframes loadin {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes glow {
    0% {
        color:var(--secdcolor);
        text-shadow: 0em 0em 2em var(--secdcolor);
    }
    100% {
        color:var(--maincolor);
        text-shadow: 0em 0em 2em var(--maincolor);
    }
}
#topbar {
    display:flex;
    align-items: center;
    justify-content: center;
    height: 6vh;
}
#topbar h1 {
    animation: 2s ease-in 0s 1 loadin;
    text-align: center;
    font-size: var(--bigtext);
    padding: 0;
    color:var(--maincolor);
    text-shadow: 1px 1px 1px var(--tetrcolor), 5px 5px 20px var(--maincolor), 5px 5px 20px var(--maincolor);
}
#topbar span {
    text-shadow: 0em 0em 2em var(--secdcolor);
    padding: 0;
    color:var(--secdcolor);
    font-size: var(--bigminustext);
    margin-top: -0.1em;
}
#topbar .a1 {
    opacity: 0;
    animation: 2s ease-in 1s 1 loadin forwards,5s ease 5s 1 glow forwards;
}
#topbar .a2 {
    opacity: 0;
    animation: 3s ease-in 2s 1 loadin forwards,5s ease 5s 1 glow forwards;
}
#topbar .a3 {
    opacity: 0;
    animation: 4s ease-in 3s 1 loadin forwards,5s ease 5s 1 glow forwards;
}

div.main {
    min-height: 93vh;
    display: flex;
}
div.content {
    width: 100%;
}
div.topcontainer {
    height: 40%;
    display: flex;
}
div.bottomcontainer {
    height: 60%;
    display: flex;
}
div.b-item {
    height: 100%;
    width: 40%;
}
div.b-item-alt {
    height: 100%;
    width: 60%;
}
div.box-a {
    background-image: url('bgcross.png');
    height: 100%;
    width: 45%;
    display: block;
}
div.box-b {
    width: 55%;
    height: 100%;
}



div.sidebar {
    width: 8vw;
    height: 100%;
}
div.sidebar-actions {
    min-height: 5vh;
}
div.sidebar-actions a {
    width: 100%;
    text-align: center;
    padding-right: 10%;
}
div.greenfox p {
    text-align: center;
    text-decoration: none;
    color: #1cbd9b;
    background: -webkit-linear-gradient(#1cbd9b, #0eb554);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
div.greenfox img {
    width: 100%;
    height: 100%;
}


div {
    border: rgb(37, 111, 121) 0.1em dashed;
}
body {
    margin: 0;
    min-height: 100vh;
    background:linear-gradient(145deg, rgba(0, 4, 253, 0.5) 0%, rgb(2 15 32) 50%, rgba(0, 25, 211, 0.5) 100%);
}