@font-face {
    font-family: 'Poppins';
    src: url('/resources/fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/resources/fonts/Poppins-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('/resources/fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/resources/fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

:root {
    font-family: 'Poppins';
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
}

div#loading-spinner {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.75);
    background-position: center center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-size: cover; /* Scale the image to cover the entire area */
    
    /*background-image: var(--spinner); // Use this instead of the code below if you want to change spinner with the corresponding theme changes*/
    background-image: url('/resources/images/atom.svg');
}

#main-content {
    transition: padding-right 0.3s ease;
  }