@font-face {
    font-family: 'Ackbar';
    src: url('../fonts/Ackbar.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    border: none;
    color: white;
}

body {
    background-color: rgb(0,0,0);
    background-image: url("/images/backgrounds/main-background.png");
    background-attachment: fixed;
    background-size: cover;
    font-family: "LatoWeb","Open Sans","Arial","sans-serif";
    font-size: 10pt;
    color: black;
}

h1 {
    font-family: Ackbar;
    font-size: calc(24pt + 1.5vw);
    text-align: center;
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.title {
    text-decoration: none;
}

h2 {
    clear: left;
    float: left;
    margin-bottom: 10px;
    font-size: 28pt;
}

h3 {
    clear: left;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 24pt;
    width: 100%;
}

.centerfloat {
    clear: left;
    float: left;
    width: 100%;
    text-align: center;
}

.centerfloat2 {
    overflow: hidden;
    text-align: center;
    height: 100%; /* Needed because the element would slip under the sidemenu*/
}

.padded-content {
    margin-right: 4%;
    margin-left: 4%;
}

.leftfloat {
    clear: left;
    float: left;
    width: 100%;
    text-align: left;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

h4 {
    clear: left;
    float: left;
    width: 100%;
    text-align: center;
    font-size: 16pt;
}

h5 {
    clear: left;
    float: left;
}

p {
    clear: left;
    float: left;
    margin-bottom: 20px;
    font-size: 12pt;
}

.text {
    font-size: 12pt;
}

.clear-pull-left {
    clear: left;
    float: left;
}

.header1 {
    margin-top: 30px;
    margin-bottom: 30px;
    height: calc(24pt + 1.5vw);
}

#center-wrapper {
    clear: left;
    float: left;
    width: 100%;
}

#main-menu {
    clear: left;
    float: left;
    width: 100%;
    margin-right: 10px;
    text-align: center;
}

.dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.dropdown-menu-point {
    display: inline-block;
    z-index: 2;
    width: 200px;
    margin-left: 10px;
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    color: white;
    text-shadow: 0px 0px 6px black, 0 0 0.1vw black, 0 0 0.0vw black;
    text-align: center;
    font-size: 18pt;
    font-weight: bold;
    background-color: rgb(10, 100, 220); /* Fallback */
    background-color: rgba(10, 100, 220, 0.8);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
    transition: all 0.1s ease-in-out;
}

    .dropdown-menu-point:hover {
        background-color: rgb(80, 170, 255); /* Fallback */
        background-color: rgba(80, 170, 255, 0.8);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        transition: all 0.1s ease-in-out;
    }

.dropdown-content {
    display: none;
    position: absolute;
    margin-left: 5px;
    margin-right: 5px;
    z-index: 1;
}

/* Show the dropdown menu on hover */
.dropdown-wrapper:hover .dropdown-content {
    display: block;
    background-color: rgb(21, 33, 38);
    background-color: rgba(140, 112, 255, 0.1);
    box-shadow: 0px 0px 50px rgba(30, 108, 255, 0.4);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown-wrapper:hover .dropdown-menu-point {
    background-color: rgb(80, 170, 255); /* Fallback */
    background-color: rgba(80, 170, 255, 0.8);
}

.submenu-point {
    float: left;
    width: 200px;
    margin: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    color: white;
    text-shadow: 0px 0px 6px black, 0 0 0.1vw black, 0 0 0.0vw black;
    text-align: center;
    font-size: 18pt;
    font-weight: bold;
    background-color: rgba(10, 100, 220, 0.8);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
    transition: all 0.1s ease-in-out;
}

    .submenu-point:hover {
        background-color: rgb(80, 170, 255); /* Fallback */
        background-color: rgba(80, 170, 255, 0.8);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        transition: all 0.1s ease-in-out;
    }

.menu-point-selected {
    width: 200px;
    background-color: rgba(171, 192, 221, 0.8)
}

.menu-point-normal {
    width: 200px;
    background-color: rgb(10, 100, 220); /* Fallback */
    background-color: rgba(10, 100, 220, 0.8);
}

.menu-point {
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    color: white;
    text-shadow: 0px 0px 6px black, 0 0 0.1vw black, 0 0 0.0vw black;
    text-align: center;
    font-size: 18pt;
    font-weight: bold;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
    transition: all 0.1s ease-in-out;
}

    .menu-point:hover {
        background-color: rgba(80, 170, 255, 0.8);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        transition: all 0.1s ease-in-out;
    }

#content-wrapper {
    float: left;
    width: 100%;
    min-height: 80vh;
    background-color: rgb(0,0,0); /* Fallback */
    background-color: rgba(0,0,0,0.8);
    animation: fade-in 0.5s;
    -moz-animation: fade-in 0.5s; /* Firefox */
    -webkit-animation: fade-in 0.5s; /* Safari and Chrome */
    -o-animation: fade-in 0.5s; /* Opera */
    animation: fade-in 0.5s;
}

#main-content {
    float: left;
    padding-top: 20px;
    width: 100%;
}

#footer {
    float: left;
    width: 100%;
    margin-top: 1vw;
    animation: fade-in 0.5s;
    -moz-animation: fade-in 0.5s; /* Firefox */
    -webkit-animation: fade-in 0.5s; /* Safari and Chrome */
    -o-animation: fade-in 0.5s; /* Opera */
    animation: fade-in 0.5s;
}

#copyright {
    color: white;
    text-shadow: 1px 1px 1px black;
    font-size: 8pt;
    text-align: center;
    margin-bottom: 20px;
}

.footer-link {
    color: white;
    text-shadow: 1px 1px 1px black;
    font-size: 8pt;
    text-align: center;
    margin-bottom: 20px;
}

.spacer-20 {
    height: 20px;
}

.spacer-40 {
    height: 40px;
}

.spacer-60 {
    height: 60px;
}

.spacer-80 {
    height: 80px;
}

.spacer-100 {
    height: 100px;
}

.spacer-120 {
    height: 120px;
}

.spacer-240 {
    height: 240px;
}

.visible-spacer-40 {
    height: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.9);
    width: 100%;
    margin-bottom: 20px;
}

.visible-spacer-40-narrow {
    height: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.9);
    width: 92%;
    margin-left: 4%;
    margin-right: 4%;
    margin-bottom: 20px;
}

.visible-spacer-80 {
    height: 80px;
    border-bottom: 1px solid rgba(255,255,255,0.9);
    width: 100%;
    margin-bottom: 40px;
}

/* Colors */
.background-lightblue {
    background-color: dodgerblue;
}

.background-turquoise {
    background-color: rgba(0, 62, 205, 0.8);
}

.background-darkblue {
    background-color: rgb(50, 90, 200);
}

.background-darkslateblue {
    background-color: darkslateblue;
}

.background-red {
    background-color: rgb(109, 52, 166);
}

.background-violet {
    background-color: rgb(149,32,163);
}

.background-yellow {
    background-color: rgb(240, 235, 128);
}

.background-green {
    background-color: rgb(26, 120, 120);
}

.background-orange {
    background-color: darkorange;
}

.background-black {
    background-color: black;
}

.background-white {
    background-color: white;
}

.border-lightblue {
    border: 1px;
    border: solid;
    border-color: deepskyblue;
}

.border-darkblue {
    border: 1px;
    border: solid;
    border-color: slateblue;
}

.border-red {
    border: 1px;
    border: solid;
    border-color: red;
}

.border-orange {
    border: 1px;
    border: solid;
    border-color: orangered;
}

.border-yellow {
    border: 1px;
    border: solid;
    border-color: rgb(187, 158, 0);
}

.border-green {
    border: 1px;
    border: solid;
    border-color: limegreen;
}

.border-black {
    border: 1px;
    border: solid;
    border-color: dimgray;
}

.color-white {
    color: white;
}

.color-black {
    color: black;
}

.color-dark {
    color: rgb(51, 51, 51);
}

/* Cursors */
.cursor-pointer {
    cursor: pointer;
}

.unset-all * {
    all: revert;
}