* {
    --bg1: #2f222f;
    --bg2: #421A40;
    --fg: #faf2f2;
}

body {
    background-color: var(--bg1);
    color: var(--fg);
    font-family: "Doto";
    font-weight: 400;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes not-found-color {
    from {color: var(--fg)}
    to {color: #ee1919}
}

#not-found {
    text-align: center;
    width: 100%;
}

#not-found h1 {
    font-size: 5rem;
    color: var(--fg);
    margin-bottom: 4px;
    animation-name: not-found-color;
    animation-duration: 0.07s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-areas:
    "header header"
    "sidebar content";
    gap: 20px;
}

#main #header {
    grid-area: header;
    text-align: center;
    height: fit-content;
    width: 100%;
}

#main #sidebar {
    border: 1px solid var(--fg);
    border-radius: 4px;
    padding: 15px;
    height: 100%;
    grid-area: sidebar;
    width: 200px;
}

#main #content {
    height: 100%;
    grid-area: content;
}

@keyframes text-glow {
    from { 
        text-shadow: var(--glow-color) 0px 0px 20px;
        font-weight: 700;
    }
    to { 
        text-shadow: var(--glow-color) 0px 0px 5px;
    }
}

.text-glow {
    --glow-color: #ffffff;
    animation-name: text-glow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 0s;
}

img.inline-gif {
  height: 1em;     /* keeps it square */
  vertical-align: text-bottom; /* aligns with the text baseline */
  display: inline-block;
}

img.inline-gif.walk {
    content: url("assets/walk.gif");
}

img.inline-gif.catrage {
    content: url("assets/catrage.gif");
}

img.inline-gif.skull {
    content: url("assets/redskull.gif");
}