style.css

* {
    box-sizing: border-box;
}

body {
	margin: 0;
}

header {
    z-index: 100;
    position: fixed;

    top: -10vh;
    left: 0;

    width: 100%;

    transition: top 0.5s;
    transition-timing-function: ease-in-out;
}

header.active {
    top: 0;
}

.article {
    position: relative;
    height: 100%;

    border-radius: 3vh;
    overflow: hidden;
    margin: 0 2vw;

    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
    border: 1px solid black;

    transition: box-shadow 0.25s;
    transition-timing-function: ease-in-out;
}

.article:hover {
    box-shadow: 0 0 1vh 1vh rgba(0, 0, 0, 0.15);
}

.article .title {
    font-family: 'als rundgang';
    font-size: 2em;

    margin: 0 0 0 1vh;
}

.article .description {
    font-family: 'als schlange sans';

    margin: 0 0 1vh 1vh;
}

.background {
    width: 100%;
    height: 100%;

    pointer-events: none;
}

.article-content {
    z-index: 50;
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    pointer-events: none;
}

.blank {
    z-index: 2;
    position: relative;

    width: 100%;
    height: 9vh;
}

.nav-bar {
    z-index: 200;
    position: relative;

    padding: 2vh 20vw;

    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 9vh;

    background: #fff;
    box-shadow: 0 0 1vh 1vh rgba(0, 0, 0, 0.1);
}

.nav-bar div {
    margin: 0 2vh;
}

.nav-bar div:first-child {
    margin-right: 0;
}

.article-wrapper {
    position: relative;

    display: flex;
    flex-direction: row;
    justify-content: space-around;

    width: 100%;
    margin: 5vh 0;

    padding: 0 20vw;
}

.article-wrapper a {
    color: #000;
    text-decoration: none;
}

.article-wrapper a:visited {
    color: #000;
}

.info {
    position: fixed;
    z-index: 100;

    top: 2vh;
    left: 10vh;

    width: auto;
    height: 9vh;

    border-radius: 2vh;
    background: rgba(230, 230, 230);

    transition: top 0.5s;
    transition-timing-function: ease-in-out;

    display: flex;
    align-items: center;
    overflow: hidden;
}

.info p {
    margin: 0 2vh;

    font-size: 2em;
    font-family: "als schlange sans";
}

.info p:first-child {
    margin-right: 0;
}

.info.finished {
    top: -10vh;
}

.info-progress-bar {
    position: absolute;

    height: 10vh;
    width: 0;
    left: 0;
    top: 8vh;

    background: rgba(50, 50, 50);

    transition: width 3.5s;
    transition-timing-function: linear;
}

.info-progress-bar.active {
    width: 100%;
}

.mouse-hover {
    position: fixed;
    z-index: 200;

    height: 100vh;
    width: 8vh;

    top: 0;
    left: 0;

    transition-property: background;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}

.mouse-hover.visible {
    background: rgba(230, 230, 230);
}

.mouse-hover.not-visible {
    background: rgba(0, 0, 0, 0);
}

.open-menu-button {
    z-index: 100;
    position: fixed;

    height: 100vh;
    width: 8vh;

    top: 0;
    left: -8vh;

    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
    background-color: #242424;

    transition: left 0.1s;
    transition-property: left, box-shadow;
    transition-timing-function: ease;

    display: flex;
    align-items: center;
    justify-content: center;
}

.open-menu-button.opened {
    box-shadow: 0 0 1vh 1vh rgba(0, 0, 0, 0.1);
    left: 0;
}

[class^="icon"], [class*=" icon"] {
    display: block;
    float: left;

    height: 5vh;
    width: 5vh;

    text-decoration: none;
    text-align: center;
    color: #fff;

    font-size: 5vh;
}

.icon-navigation-menu, .icon-navigation-menu:visited {
    color: #000;
}

.icon-arrow-left, .icon-arrow-left:visited {
    color: #000;
}

.icon-close, .icon-close:visited {
    position: absolute;
    right: 2vh;
    top: 2vh;
}

.site-title {
    font-size: 6vh;
    font-family: 'als rundgang';

    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
}

.aesc {
    height: 5vh;
    width: auto;

    font-size: 5vh;
    font-family: 'als rundgang';

    float: left;
    display: flex;
    align-items: center;
}

.panel-menu .aesc {
    position: absolute;

    left: 3vh;
    top: 2vh;

    color: #fff;
}

.panel-menu {
    z-index: 999999999;
    position: fixed;

    left: -48vh;
    top: 0;
    width: 48vh;
    height: 100%;

    transition: left 200ms;
    transition-timing-function: ease;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background-color: #242424;
}

.panel-menu.opened {
    left: 0;
}

.panel-menu .panel-menu-header {
    position: relative;

    border-bottom: 1px solid rgba(255,255,255,0.1);

    height: 9vh;
    padding: 2vh 0;
}

.first {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    background: #fff;
}

.second {    
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    background: #000;
}

.content {
    position: relative;
    width: 100%;
    padding: 120px 0;
    min-height: 100vh;
    background-attachment: fixed;
    background-size: cover;
    overflow-x: hidden;
}

.first, .second {
    padding: 0;
}

.content .title {
    font-size: 7em;
    font-family: "als direct";
    font-weight: normal;
    letter-spacing: 0.1em;

    text-align: center;
    color: #000;
}

.panel-menu-body {
    height: 65vh;
    overflow-y: scroll;

    margin: 5vh 2vh;
}

.panel-menu-body::-webkit-scrollbar {
    width: 6px;
    border-radius: 1vh;
    background-color: #000;
}

.panel-menu-body::-webkit-scrollbar-thumb {
    border-radius: 1vh;
    background-color: #f5f5f5;
}


.social-media-boxes {
    width: 100%;
    height: 16vh;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.social-media-boxes a .box {
    border-top: 1px solid white;
    border-left: 1px solid white;
}

.social-media-boxes a:first-child .box {
    border-left: 0 solid white;
}

ul, menu, dir {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

ul {
    list-style: none;
    display: block;
    margin: 0.5vh 0 0 0;
    padding: 0 0 0 8vh;
}

ul:first-child {
    margin: 0;
}

li {
    margin: 0.5em 0;
    position: relative;
}

li.active:before {
    content: '\2022';
    position: absolute;
    left: -4.5vh;
    top: 0.1vh;
    width: 2vh;
    height: 2vh;
    line-height: 2vh;
    text-align: center;
    font-size: 4.5vh;
    color: #ef5d55;
}

.panel-menu-body ul a {
    font-family: "als schlange sans";
    font-size: 1.25em;
    text-decoration: none;
    color: #fff;
}

.panel-menu-body ul li.active a {
    color: #ef5d55;
}

.panel-menu-body ul a:hover {
    color: #ef5d55;
}

progress {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;

    width: 100%;
    height: 0.7vh;

    border: none;

    -webkit-appearance: none;
}

progress::-webkit-progress-bar {
    background-color: transparent;
}

progress::-webkit-progress-value {
    background-color: black;
}