* {
    font-family: "Hind", "Rubik", Arial, Verdana;
    /* remove default margins and padding */
    margin: 0;
    padding: 0;
    background-color: black;
    color: #fff;
    /* overscroll-behavior: none; */
    /* overflow-x: hidden; */
    /* overflow-y: hidden; */
    /* box-sizing: border-box; */
}

/* Hide scrollbars */
body::-webkit-scrollbar {
    /* Hide all except FF IE */
    display: none;
}
body {
    /* IE hide */
    -ms-overflow-style: none;
}
html { 
    /* Firefox hide */
    scrollbar-width: none;
}
/* stop scrolling method, paired with js */
.stop-scrolling {
    height: 100%;
    overflow: hidden;
}


/* navbar */
#navbar {
    /* background: rgb(255, 110, 199, 0.411); */
    background: rgba(0, 0, 0, 1);
    width: 100%;
    /* font-size: 2.5vh; */
    font-weight: bold;
    /* display: none; */

}
#navbar ul {
    /* margin: auto; */
    /* padding-bottom: 5vh; */
    height: 100%;
    /* max-width: 70%; */
    display: flex;
}
.menu-li {
    width: 100%;
    height: 100%;
    list-style-type:none;
}
/* .menu-li:hover {
    background-color: rgba(255, 144, 227, 0.76);
} */
/* #navbar a { */
.nav-links {
    color: rgb(231, 218, 218);
    font-size: 4vh;
    padding: 0.5vh 0;
    text-decoration: none;
    display: block;
    text-align: center;
}

/* #navbar a:hover { */
.nav-links:hover {
    /* color: rgb(231, 218, 218); */
    /* display: block; */
    /* text-decoration: none; */
    /* background-color: rgba(121, 47, 102, 0.76); */
    background-color: rgba(185, 58, 153, 0.76);
}

#menu-button {
    /* hide menu-button default behavior (gray hamb box) */
    font-weight: bold;
    display: none;
}
/* at X width, goes to sandwiched-menu */
@media only screen and (max-width: 1000px){ /* 900px */
    /* Navbar */
    #navbar {
        font-size: 3vh;
        /* background: rgb(255, 110, 199, 0.411); */
    }
    #navbar ul {
        display: block;
        /* padding-bottom: 10vh; */
    }
    .menu-li {
        width: 100%;
        margin: 0;
        display: none;
    }
    /* .nav-links { */
        /* font-size: 4vh; */
        /* padding: 2.5vh 0; */
        /* margin: 2vh 0; */
        /* padding: 10vh 0; */
    /* } */
    #menu-button {
        display: block;
        min-width: 55px;
        min-height: 55px;
        color: #ae9bda;
        font-size: 5vw;
        font-weight: bold;
        /* background-color: #ae9bda; */
        border: none;
        outline: none;
        cursor: pointer;
        /*put button to left*/
        /* align-self: flex-start;  */
    }
}

/* MARQUEE */
/* https://www.w3docs.com/snippets/css/how-to-have-the-marquee-effect-without-using-the-marquee-tag-with-css-javascript-and-jquery.html */

.marquee {
    z-index: 100;
    /* overflow and width keep it from srolling infinitely to the right; */
    overflow: hidden;
    width: 100vw;
    /* position absolute forces it to be where we want it (Xvh from bottom) */
    position: absolute;
    /* change position here */
    bottom: 0vh;
    
    --offset: 20vw; 
    --move-initial: calc(-25% + var(--offset));
    --move-final: calc(-50% + var(--offset));
}
/* change color here */
.marquee__inner {
    background-color: rgb(34, 126, 206);
    /* background-color: rgb(179, 92, 174); */
    width: fit-content;
    display: flex;
    position: relative;
    transform: translate3d(var(--move-initial), 0, 0);
        /* speed here */
    animation: marquee 150s linear infinite;
}

.marquee__inner:hover {
    animation-play-state: paused;
    background-color: rgb(212, 120, 120);
}
.marquee a {
    text-decoration: none;
    font-size: 4vh;
}
.marquee span {
    color: white;
    background-color: inherit;
    /* padding: 0 0.2vw; */
    white-space: nowrap;
    text-transform: uppercase;
}
  
@keyframes marquee {
    0% {
      transform: translate3d(var(--move-initial), 0, 0);
    }
  
    100% {
      transform: translate3d(var(--move-final), 0, 0);
    }
}