@import url(https://db.onlinewebfonts.com/c/e02bdd9828bed1e2490bdf94662dbba8?family=Arial+Nova+Cond);
@import url(https://db.onlinewebfonts.com/c/97658e799f620405131c144d04a5f3b4?family=AbadiMTStd);

:root{
    --FW-Rot: #B22C1E;
}

body {
    margin: 0;
    font-family: AbadiMTStd, sans-serif;
    background: #ffffff;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

ul {
    list-style: none;
    padding: 0;
    font-size: 1.5em;
}

li {
    margin: 0.3em 0;
}

/* Progress bar */
.progress-container {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 0;
    left: 0;
}

.progress-bar {
    height: 100%;
    width: 0;
    background: var(--FW-Rot);
    transition: width linear;
}

/* Pages */

.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90vh;
    margin-top: 10vh;
    text-align: left;
    opacity: 0;
    transition: opacity 1s ease;
    /* fade effect */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page.active {
    opacity: 1;
    z-index: 1;
}

h1 {
    font-size: 3em;
    font-size: 8vh;
    font-family: AbadiMTStd, sans-serif;
    font-weight: normal;
    color: black;
}

/* Logo and Title */
.logo-container {
    width: 100%;
    height: 10vh;
    /*background: rgba(200, 0, 0, 0.1);*/
    position: absolute;
    top: 5vh;
    left: 0;
    /* padding: 30px; */

    display: grid;
    grid-template-areas: "Logo DIV ABT TITLE"
                         "Logo DIV OSS TITLE";
    gap: 0px;
}

.logo-container img{
    height: 10vh;
    width: auto;
    grid-area: Logo;
    justify-self: center;
    align-self: center;
}

.logo-container span{
    height: 10vh;
    width: 5px;
    grid-area: DIV;
    background-color: #CDCCC9;
    justify-self: center;
    align-self: center;
}

.logo-container p{
    justify-self: left;
    align-self: center;
    font-size: 4.5vh;
    padding: 0;
    margin: 0.25vh;
    font-family: "Arial Nova Cond", sans-serif;
    font-weight: bold;
    color: var(--FW-Rot);
}

.logo-container p:nth-of-type(1){
    grid-area: ABT;
}

.logo-container p:nth-of-type(2){
    grid-area: OSS;
}

.logo-container p:nth-of-type(3){
    grid-area: TITLE;
    color: black;
    font-size: 8vh;
    font-family: AbadiMTStd, sans-serif;
    font-weight: normal;
}