@font-face {
    font-family: marker;
    src: url('PermanentMarker-Regular.ttf');
}

/* Style the navigation menu */
.topnav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
    display: none;
}

/* Style the hamburger menu */
.topnav a.icon {
    color: black;
}


/* Add a grey background color on mouse-over */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

#options {
    font: Helvetica, sans-serif;
}

#content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 5vh;
    max-width: 100%;
}

#synergies {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: marker;
    font-size: 8vw;
    font-weight: bold;
    text-align: center;
}

#royal {
    display: flex;
    font-family: marker;
    font-size: 5vw;
    font-weight: bold;
}

#royal-name {
    padding-right: 1.5vw;
}

.champs {
    font-family: marker;
    font-size: 3vw;
    text-align: center;
}

.filler {
    font-family: marker;
    color: red;
    font-size: 2vw;
}

#footer {
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    bottom: 0;
    margin-top: 2vh;
    background-color: black;
    width: 100%;
    height: 4vh;
}