:root {
    --main-accent: #4C65FF;
    --main-background: #0f1419;
    --main-text: #e6edf3;
    --second-accent: #9d98fa;
    --second-text: Black;
    /* display: flex; */
}
body {
    font-family: Tahoma, Verdana, Arial, sans-serif; 
    background-color: var(--main-background);
    animation-name: bg-load;
    animation-duration: 2s;
}
a {
    color: var(--main-text)
}
.nav-bar {
    display: flex;
    width: 100%;
    height: 20%;
    padding: 2px;
    background-color: var(--main-accent);
    color: var(--second-text);
    /* animation-name: nb-slide; */
    /* animation-timing-function: linear; */
    /* animation-duration: 1.5s; */
}
.nav-link {
    text-decoration: none;
    color: var(--second-text);
    border-width: 2px;
    border-style: solid;
    border-color: var(--second-text);
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 4px;
    padding-bottom: 2px;
    margin: 5px;
    font-size: 20pt;
    text-align: center;
    font-weight: bold;
}
.logo-link {
    text-decoration: none;
    color: var(--second-text);
    border-width: 2px;
    border-style: solid;
    border-color: var(--second-text);
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 6px;
    padding-bottom: 5px;
    font-size: larger;
}
.back-link {
    text-decoration: none;
    font-size: 25pt;
}
#logo {
    width: 50px;
    height: 50px;
}
.main-section {
    width: 80%;
    float: left;
    color: var(--main-text);
    /* background-color: var(--main-background); */
    font-size: 14pt;
}
.left-panel {
    width: 10%;
    height: 100%;
    float: left;
    min-height: 100%;
    min-width: 15%;
    background-color: var(--second-accent);
}
.right-panel {
    width: 10%;
    height: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    float: right;
    min-height: 100%;
    min-width: 15%;
    background-color: var(--second-accent);
}
.footer {
    clear: both;
    width: 100%;
    height: 20%;

    background-color: var(--main-accent);
}
.example-image {
    width: 40%;
    height: auto;
}
@keyframes bg-load {
  0%   {background-color: #101316;}
  20%   {background-color: #101316;}
  100% {background-color: var(--main-background);}
}

/* @keyframes nb-slide {
  0%   {translate: 0 -10vh;}
  100%   {translate: 0 0;}
} */