@font-face {
    font-family: 'Montserrat Light';
    font-display: swap;
    src: local('Montserrat Light'), local('Montserrat-Light'),
         url('montserrat/Montserrat-Light.ttf') format('truetype');
  }

:root {
    --BackgroundImage: url("../images/QooBackground.png");
    --QooBlue: #1D587AFF;
    --QooBlueDark: #0C2331CC;
    --QooBlueLight: #8EABBCFF;
    --QooYellow: #F69724;
    --QooYellowLight: #FEF4E9;
}

body {
    margin: 0px;
    min-height: 100vh;
    background-image: var(--BackgroundImage);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--QooYellow);
    font-family: 'Montserrat Light', Helvetica, Arial, sans-serif;
    font-size: calc(12px + 0.5vw);
}

a:link,
a:visited {
    color: var(--QooYellow);
    text-decoration: none;
}

a:hover,
a:active {
    color: var(--QooYellowLight);
}

header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 5vw;
    max-height: 90px;
    background-color: var(--QooBlueDark);
    box-shadow: 0px 1px 10px #000000E0;
    z-index: 10;
    display: flex;
    align-items: center;
}

main {
    width: 90vw;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    min-height: 100vh;
}

footer {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    height: 5vw;
    max-height: 50px;
    background-color: var(--QooBlueDark);
    box-shadow: 0px -1px 10px #000000E0;
    z-index: 10;
    display: flex;
    align-items: center;
}

.level1 {
    width: 90vw;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.level15 {
    width: 75vw;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5vh;
    display: block;
    justify-content: center;
    align-items: center;
}

.level15f {
    width: 75vw;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.level2 {
    width: 45vw;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5vh;
    display: block;
    justify-content: center;
    align-items: center;
}

.level3 {
    width: 30vw;
    max-width: 333px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.level4 {
    width: 22.5vw;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.headerdiv {
    width: 10vw;
    max-width: 200px;
    margin-top: 2.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.dropdown {
    display: inline-block;
}

.dropdown-content {
    visibility: hidden;
    transition: all 0.1s ease-in-out;
    position: absolute;
    width: 10vw;
    max-width: 200px;
    background-color: var(--QooBlueDark);
    box-shadow: 0px 1px 10px #000000E0;
    padding: 12px 16px;
    text-align: left;
    z-index: 11;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    transition-delay: 0.3s;
}

header a:link,
a:visited {
    color: var(--QooYellow);
}

header a:hover,
a:active {
    color: var(--QooYellowLight);
}

.footerdiv {
    width: 10vw;
    max-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer a:link,
a:visited {
    color: var(--QooYellow);
}

footer a:hover,
a:active {
    color: var(--QooYellowLight);
}

.titlediv {
    margin-top: calc(25px + 12.5vh);
    display: flex;
    align-items: center;
    justify-content: right;
}

.left {
    justify-content: left;
}

.right {
    justify-content: right;
}

.bluebox {
    background-color: var(--QooBlueDark);
    box-shadow: 0px 1px 10px #000000E0;
    color: var(--QooYellow);
    padding: calc(10px + 1vw);
}

.bluetext {
    color: var(--QooBlue)
}

.shadow {
    filter: drop-shadow(0px 0px 3px #000000BB);
}

.grow {
    transition: all 0.1s ease-in-out;
}

.grow:hover {
    transform: scale(1.1);
}