#nav-bar {
    grid-column-start: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 6rem;
}

.nav-item {
    display: inline-block;
    font-family: 'Oswald', Arial, sans-serif;
    font-size: xx-large;
    color: #404040;
    background-color: transparent;
    border-color: transparent;
    transition: color .25s linear;
}

.nav-item:hover {
    cursor: pointer;
    color: #aaaaaa;
}

.nav-logo-filter {
    transition: filter .25s linear;
}

.nav-logo-filter:hover {
    filter: invert(65%) sepia(72%) saturate(2%) hue-rotate(314deg) brightness(91%) contrast(91%);
}

.content-container {
    display: grid;
    grid-template-columns: [left-gutter] 1fr [content] 3fr [right-gutter] 1fr;
}

#animated-lines-container {
    grid-column-start: 2;
    display: flex;
    justify-content: center;
    height: 10rem;
}

.vert-line {
    border-left: 2px solid #dddddd;
    display: block;
    position: absolute;
    height: 0rem;
    margin-left: -1px;
    animation-name: vertlineanim;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}

@keyframes vertlineanim {
    from {height: 0rem;}
    to {height: 10rem;}
}

.hori-line {
    border-bottom: 2px solid #dddddd;
    display: block;
    height: inherit;
    width: 0%;
    margin-top: -1px;
    animation-name: horilineanim;
    animation-delay: 0.5s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

@keyframes horilineanim {
    from {width: 0%;}
    to {width: 100%}
}

#article-block-container {
    grid-column-start: 2;
    display: flex;
    height: 2rem;
    width: 100%;
    margin: auto;
    margin-top: -2rem;
    align-items: end;
    opacity: 0;
    animation-name: articleblocksanim;
    animation-timing-function: linear;
    animation-delay: 1000ms;
    animation-duration: 1000ms;
    animation-fill-mode: forwards;
}

@keyframes articleblocksanim {
    to {opacity: 1;}
}

.article-block {
    display: flex;
    position: relative;
    justify-content: center;
    background-color: #dddddd;
    height: 1.5rem;
    width: 1.5rem;
    transition: height 0.5s ease, background-color .5s linear;
    margin-right: 0.5rem;
    cursor: pointer;
}

.article-block:hover {
    background-color: #aaaaaa;
    height: 2rem;
}

.article-block-active {
    display: flex;
    position: relative;
    justify-content: center;
    background-color: #404040;
    height: 2rem;
    width: 1.5rem;
    margin-right: 0.5rem;
}

.article-block-text {
    display: block;
    user-select: none;
    font-family: 'Jost', Arial, sans-serif;
    font-size: large;
    color: white;
}

#dragon-slayer-block {
    width: 8.5rem;
}

.tooltip {
    position: relative;
}

.tooltip .tooltip-text {
    visibility: hidden;
    opacity: 0;
    transition: opacity 250ms;
    width: 223px;
    color: #404040;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 130%;

    /* Text */
    font-family: 'Oswald', Arial, sans-serif;
    font-size: large;
    text-align: center;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transition-delay: 0.25s;
}

#article-container {
    grid-column-start: 2;
    display: block;
    position: relative;
    margin: auto;
    width: 100%;
    opacity: 1;
}

.article-date {
    position: absolute;
    left: 51%;
    top: -2rem;
    font-family: 'Jost', Arial, sans-serif;
    font-size: large;
    color: #606060;
}

h1 {
    font-family: 'Oswald', Arial, sans-serif;
    font-size: xx-large;
    font-weight: normal;
    color: #404040;
}

h2 {
    font-family: 'Oswald', Arial, sans-serif;
    font-size: x-large;
    font-weight: normal;
    color: #404040;
}

.article-header {
    display: block;
    font-family: 'Oswald', Arial, sans-serif;
    font-size: xx-large;
    color: #404040;
}

p {
    font-family: 'Jost', Arial, sans-serif;
    font-size: large;
    color: #606060;
}

.article-text {
    display: block; 
    font-family: 'Jost', Arial, sans-serif;
    font-size: large;
    color: #606060;
}

#dragon-slayer-canvas {
    border:1px solid #000000;
    width: 100%;
    height: 500px;
}