@font-face {
    font-family: 'Nunito';
    src: url(../assets/Nunito-VariableFont_wght.ttf) format('truetype');
}

body {
    background-image: linear-gradient(to right, #000000a8 0%, #000000a8 100%), url(../assets/images/neon.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #d3d3d3;
    font-family: 'Montserrat', sans-serif;
    overflow-y: overlay;
}

.rise {
    animation-name: pullup;
    animation-duration: .5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

@keyframes pullup {
    from {transform: translateY(100vh);}
    0% {opacity: 0;}
    90% {opacity: 100%;}
    100% {opacity: 100%;}
    to {transform: translateY(0);}
}

@keyframes fade {
    0% {background-color: #5d60ca;}
    50% {background-color: #af2188;}
    100% {background-color: #5d60ca;}
}

#title {
    font-family: 'Nunito', sans-serif;
    margin: 0 0;
    z-index: 2;
    animation: shine 5s linear infinite;
    background: linear-gradient(to right, #5d60ca 20%, #171717 35%, #171717 35%, #5d60ca 50%, #5d60ca 50%, #af2188 75%, #5d60ca 90%);
    background-size: 200% auto;
    color: #5d60ca;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-user-select: none;
}

#title-sub-container, #title-controls-container, #title-container-wrapper {
    padding: 0 0;
    margin: 0 0;
}

#title-container-wrapper {position: relative;}

#title-container {
    position: fixed;
    top: -5px;
    left: 0;
    padding: 7px 7px 2px 7px;
    width: 100vw;
    overflow: hidden;
    background-color: #0000006d;
    z-index: 2;
    -webkit-app-region: drag;
}

#title-controls-container {
    font-family: 'Nunito', sans-serif;
    right: 10px;
    position: absolute;
    top: -2px;
    font-size: 20px;
}

#title-controls-container > * {
    display: inline-block;
    padding: 0 0;
    margin: 0 5px;
}

#close-window {
    top: -1px;
    cursor: pointer!important;
    z-index: 2;
}

#close-window:before, #close-window:after {
    background-color: #5d60ca;
    animation: fade 10s linear infinite;
}

.nosel {-webkit-user-select: none;}


::-webkit-scrollbar-track {
  background-color: #00000000;
  border-radius: 10px;
}

::-webkit-scrollbar {
  width: 10px;
  background-color: #00000000;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-image: linear-gradient(to bottom, #af2188c5 0%, #af2188c5 10%, #fa59cfc5 75%, #fa59cfc5 100%);
}

::-webkit-scrollbar-thumb:hover {background-image: linear-gradient(to bottom, #af2188ff 0%, #af2188ff 10%, #fa59cfff 75%, #fa59cfff 100%);}