@font-face {
    font-family: varelaRoundRegular;
    src: url(VarelaRound-Regular.woff2);
    font-display: swap;
}
body {
    background-image: url("images/background-small.jpg"); 
    background-size: cover; 
    background-attachment: fixed; 
    font-family: varelaRoundRegular; 
    overflow-x: hidden; 
}
p {
    margin-top: 17px; 
    margin-bottom: 17px; 
    line-height: 1.75; 
}
#top-menu {
    position: absolute; 
    top: 5px; 
    left: 5px; 
    padding: 0; 
    /* background: black; */
    background: #393b55; 
    width: calc(100vw - 10px); 
    height: 53px;
}
.top-menu-section {
    text-align: center; 
}
.top-menu-link {
    position: absolute; 
    left: calc(4vw - 5px); 
    width: 18vw; 
    padding-top: 31px; 
    padding-bottom: 21.5px; 
    font-size: 0; 

    transform: skew(-20deg);

    color: #393b55; 
    background: #393b55; 
    /* color: #5E5D5E; 
    background: #5E5D5E; */
    text-decoration: none; 
}
.top-menu-link-title {
    position: absolute; 
    left: calc(4vw - 5px); 
    width: 18vw; 
    padding-top: calc(31px - 1.25vw); 
    font-size: 1.5vw; 
    padding-bottom: 15px; 

    color: white; 
    text-decoration: none; 
}
.top-menu-second {
    left: calc(22vw - 5px); 
}
.top-menu-second-background {
    /* background: #111; 
    color: #111; */
    background: #5d4f80; 
    color: #5d4f80; 
}
.top-menu-third {
    left: calc(40vw - 5px); 
}
.top-menu-third-background {
    /* background: #222; 
    color: #222; */
    background: #2a2142; 
    color: #2a2142; 
}
.top-menu-fourth {
    left: calc(58vw - 5px); 
}
.top-menu-fourth-background {
    /* background: #333; 
    color: #333; */
    background: #5A595E; 
    color: #5A595E; 
}
.top-menu-fifth {
    left: calc(76vw - 5px); 
}
.top-menu-fifth-background {
    /* background: #444; 
    color: #444; */
    background: #303030; 
    color: #303030; 
}
.top-menu-sixth-background {
    background: #666; 
    color: #666; 
}
#top-menu-last-section {
    /* background: #444; */
    background: #303030; 
    position: absolute; 
    left: calc(92vw - 5px); 
    width: calc(8vw - 5px); 
    height: 53px; 
}
#logo {
    float: left; 
    width: 43px; 
    height: 43px; 
    padding: 5px; 
    position: absolute; 
    z-index: 1000000; 
}
#language-dropdown-menu {
    /* width: calc(6vw - 10px); */
    width: 6vw; 
    height: 1.5vw; 
    margin-top: calc(24.5px - 0.75vw); 
    border: 1px solid grey; 
    padding: 2px; 
    cursor: pointer; 
}
#language-dropdown-menu:hover #language-dropdown-content {
    display: block; 
}
#language-dropdown-content:hover {
    display: block; 
}
.language-dropdown-link {
    position: absolute; 
    top: 0; 
    left: 0; 
    border: 1px solid grey; 
    width: 6vw; 
    height: 1.5vw; 
    padding: 2px; 
}
#language-dropdown-content {
    margin: -3px; 
    margin-top: calc(1.5vw + 2px); 
    display: none; 
    position: absolute; 
    width: calc(6vw + 5px); 
    /* width: calc(6vw - 4px); */
    height: calc(1.5vw + 5px); 
    background: #444; 
    padding: 0; 
}
#language-dropdown-title-image {
    float: left;
    /* height: min(calc(2vw - 2.5px), 2vw); */
    height: 1.5vw;
}
/*@media (max-width: 1200px) {
    #language-dropdown-title-image {
        width: min(calc(2vw - 2.5px), 19px); 
    }
}*/
#language-dropdown-title {
    color: white; 
    /* font-size: min(25px, 1.5vw); */
    font-size: 1.5vw; 
    margin-top: 5px; 
    float: right; 
    transform: translateY(-0.5vw); 
}
#top-menu-last-section-mobile {
    display: none; 
}
@media (max-width: 1000px) {
    body {
        background-image: url("images/background-small-mobile.webp");
    }
    .no-webp body {
        background-image: url("images/background-small-mobile.jpg");
    }
    .webp body {
        background-image: url("images/background-small-mobile.webp");
    }

    #top-menu {
        width: auto; 
        height: auto; 
    }
    .top-menu-link {
        display: block; 
        width: calc(100vw - 10px); 
        transform: none; 
        position: relative; 
        left: 0; 
        color: white; 
        font-size: 20px; 
        padding-top: 10px; 
        padding-bottom: 10px; 
    }
    .top-menu-link-title {
        display: none; 
    }
    #logo {
        display: none; 
    }
    #top-menu-last-section {
        display: none; 
    }
    #top-menu-last-section-mobile {
        display: block; 
    }
    #top-menu-last-section-mobile img {
        height: 20px; 
    }
}

#content {
    width: auto; 
    color: white; 
    margin-top: 70px; 
}
@media (max-width: 1000px) {
    #content {
        margin-top: 330px; 
    }
}
.center {
    text-align: center; 
}
.right {
    text-align: right; 
}

#about {
    width: 50vw; 
    margin-left: auto; 
    margin-right: auto; 
    /* background: rgba(0, 0, 0, .7); */
    background: rgba(0, 0, 0, .9);
    border-radius: 20px; 
    padding: 10px; 
}

@media (max-width: 1000px) {
    #about {
        width: 90vw; 
    }
}

#search-bar {
    margin-top: 20px; 
    width: 90vw; 
    margin-left: auto; 
    margin-right: auto; 
    /* background: rgba(0, 0, 0, .7); */
    background: rgba(0, 0, 0, .9);
    border-radius: 20px; 
    padding: 10px; 
}

#search-input {
    font-size: 15px; 
    font-family: varelaRoundRegular; 
    width: 50vw; 
    border-radius: 50px; 
    border: 1px solid black; 
    padding: 5px; 
}

#search-by-label {
    float: right; 
    margin-right: 10px; 
    margin-top: 3px; 
    margin-bottom: 3px; 
}

#search-button {
    background:rgb(20, 200, 255); 
    font-size: 15px; 
    font-family: varelaRoundRegular; 
    border-radius: 50px; 
    padding: 5px; 
    padding-right: 10px; 
    padding-left: 10px; 
    border: 1px solid black; 
    cursor: pointer; 
}

#search-by {
    font-size: 15px; 
    font-family: varelaRoundRegular; 
    float: right; 
    margin-top: 3px; 
    margin-bottom: 3px; 
    margin-right: 5px; 
}

.main-menu-container {
    width: calc(25% - 30px); 
    height: calc(25vw - 30px); 
    margin-top: 20px; 
    margin-bottom: 20px; 
    margin-left: 5px; 
    margin-right: 5px; 
    /* background: rgba(0, 0, 0, .7); */
    background: rgba(0, 0, 0, .9);
    border-radius: 20px; 
    padding: 10px; 
    float: left; 
}
a {
    color: rgb(10, 100, 255); 
}
@media (max-width: 1200px) {
    @media (min-width: 799px) {
        .main-menu-container {
            width: calc(33% - 30px); 
            height: calc(33vw - 30px); 
        }
        .main-menu-container:last-of-type {
            width: calc(33% - 30px); 
            height: calc(33vw - 30px); 
            margin-left: 33%; 
            margin-right: 33%; 
            margin-top: -10px;
        }
    }
}
@media (max-width: 800px) {
    @media (min-width: 499px) {
        .main-menu-container {
            width: calc(50% - 30px); 
            height: calc(50vw - 30px); 
            margin-top: -10px;
        }
        #about {
            margin-bottom: 30px; 
        }
    }
}
@media (max-width: 500px) {
    .main-menu-container {
        width: calc(100% - 30px); 
        height: calc(100vw - 30px); 
        margin-top: -10px;
    }
    #about {
        margin-bottom: 30px; 
    }
}
.blog-post {
    margin: 10px; 
    width: calc(100vw - 60px); 
    /* background: rgba(0, 0, 0, .7); */
    background: rgba(0, 0, 0, .9);
    border-radius: 20px; 
    padding: 10px; 
}
.blog-post h1 {
    margin: 0; 
}
.blog-post h3 {
    margin: 0; 
}

.program-container {
    margin: 10px; 
    width: 275px; 
    height: 375px; 
    /* background: rgba(0, 0, 0, .7); */
    background: rgba(0, 0, 0, .9);
    border-radius: 20px; 
    padding: 10px; 
    float: left; 
    text-align: center; 
    color: white; 
    text-decoration: none; 
}
.program-title {
    margin-top: 3px; 
    text-align: center; 
    font-size: 1.17em;
}
.program-container img {
    width: 255px; 
    border-radius: 20px; 
    margin: 10px; 
}
.version-grey {
    background-color: darkslategrey; 
    color: white; 
    padding: 5px; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    border-radius: 3px; 
    float: right; 
    margin-top: -45px; 
    font-size: 1em; 
    font-weight: bold;
}
.version-red {
    background-color: rgb(200, 0, 0); 
    color: white; 
    padding: 5px; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    border-radius: 3px; 
    float: right; 
    margin-top: -45px; 
    font-size: 1em; 
    font-weight: bold;
}
.version-yellow {
    background-color: rgb(200, 200, 0); 
    color: white; 
    padding: 5px; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    border-radius: 3px; 
    float: right; 
    margin-top: -45px; 
    font-size: 1em; 
    font-weight: bold;
}
.version-green {
    background-color: green; 
    color: white; 
    padding: 5px; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    border-radius: 3px; 
    float: right; 
    margin-top: -45px; 
    font-size: 1em; 
    font-weight: bold;
}