* {
    animation-name: load-in;
    animation-duration: 0.6s;
}

@keyframes load-in {
    from {opacity: 0.0; }
    to {opacity: 1;}
}

html {
    background-color: black;

    color: white;

    overflow: hidden !important;
}

body {
    margin: 0;

    overflow: hidden !important;
}

a {
    color: inherit;
}

a:hover {
    cursor: pointer;
}

#dropdown-links {
    overflow: hidden;
    background-color: #000000;
    padding-left: 0;

    display: none;
}

.dropdown-content {
    display: block;
    padding-left: 3vh;
    color: white;
    text-decoration: none;

    padding-top: 3vh;
    padding-bottom: 3vh;

    font-weight: 400;
}

.dropdown-content:hover {
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.bg-img {
    display: block;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: -1;

    margin: 0;
    height: 100vh;
    width: 100vw;
    object-fit: cover;
}

#nav {
    margin: 5vh 5vw;
    margin-bottom: 0;

    z-index: 999;
}

#mainContainer {
    overflow-y: hidden;
}

#footer {
    width: 100vw;
}

#footer-logo-mobile {
    padding: 0 5%;
    left: 50%;
    transform: translate(-50%, 0);
}

@media screen and (min-width: 850px) and (min-height: 380px) { /* w:1100px h:380px */
    .web {
        display: block;
    }

    .mobile {
        display: none;
    }

    #mainContainer {
        padding: 5vh 5vw;
    }

    #logo {
        width: 250px;
        height: auto;
    }

    #info-img {
        width: 100%;
    }

    .dropdown-content {
        font-size: 5vw;
    }
}

@media (max-width: 849px) or (max-height: 379px) { /* w:1099px h:379px */
    .web {
        display: none;
    }

    .mobile {
        display: block;
    }

    #mainContainer {
        padding: 0 5vw;
    }

    #logo {
        width: 150px;
        height: auto;
    }

    #info-img {
        width: 100%;
    }

    .dropdown-content {
        font-size: 6vw;
    }
}