@import url('https://fonts.googleapis.com/css2?family=Jacquard+24&display=swap');

    @font-face {
      font-family: 'Jacquard 24';
      src: url('https://file.garden/aolBC37TLTA2Tusx/Jacquard24-Regular.ttf') format('truetype');
    }

    @font-face {
      font-family: 'Shermlock';
      src: url('https://file.garden/aolBC37TLTA2Tusx/Shermlock.ttf') format('truetype');
    }

body {overflow-y: hidden;} /*Hides the scrollbar while loading.*/
#loadingScreen {
    position: fixed; /*Keeps the loading screen fixed on the screen */
    inset: 0; /*Makes loading screen wrap full screen.*/
    z-index: 999999; /*Makes loading screen stay on top.*/
    user-select: none; /*Disables user interaction with loading screen.*/
    transition: opacity 300ms; /*Adds a nice fading effect.*/
    background: url('https://64.media.tumblr.com/202a7043009d1e37bbe2ba67605ed458/86077519b7742b07-98/s250x400/131fed0bd7916efd9d9355733623dd52bd848724.gifv');
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7rem;
}

#loadingScreen::after {
    content: '';
    animation: loadingDots 1s linear infinite;
}
@keyframes loadingDots {
    0%, 100% {content: '';}
    25% {content: '.';}
    50% {content: '..';}
    75% {content: '...';}
}