@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=IBM+Plex+Serif&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); 

/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


:root{
    /* PRIMARY COLORS */
    --main-100: #FFB600;
    --main-200: #FFAA00;
    --main-300: #FF9E00;
    --main-400: #FF9100;
    --main-500: #FF8500;
    --main-600: #FF7900;
    --main-700: #FF6D00;
    --main-800: #FF6000;
    --main-900: #FF5400;
    --main-950: #FF4800;

    /* SECONDARY COLORS */
    --secondary-1: #5F0F40;
    --secondary-2: #9a031E;
    --secondary-5: #0F4C5C;

    /* GRAYSCALE COLORS */
    --grayscale-100: #F5F5F5;
    --grayscale-200: #E5E5E5;
    --grayscale-300: #D4D4D4;
    --grayscale-400: #A3A3A3;
    --grayscale-500: #737373;
    --grayscale-600: #525252;
    --grayscale-700: #404040;
    --grayscale-800: #262626;
    --grayscale-900: #171717;
}


.thinbar{
    scrollbar-base-color: aqua;
    scrollbar-width: thin;
}


.fade-in{
    opacity: 0;
    filter: blur(.25rem);
    animation: fade-in forwards ease-in; 
    animation-duration: 0.75s;
    animation-delay: .25s;
}

.fade-in-slow{
    opacity: 0;
    animation: fade-in forwards;
    animation-duration: 0.75s;
    animation-delay: 0.7s;
}

@keyframes fade-in {
    0%{opacity: 0; filter: blur(.25rem);}
    100%{opacity: 1; filter: blur(0);}
}

.button-depth{
    box-shadow: inset 0 1px 0 hsl(222, 20%, 90%);
    box-shadow: 0 1px 3px hsla(0%, 0%, 0%, 2);
}

#create_background_modal{
    position: fixed;
    z-index: 1;
    top: 10;
    right: 5;
    width: fit-content;
}


.headline-1{
    font-family: 'Rubik';    
    color:var(--grayscale-900);
    font-weight: var(--font-weight-bold);
    font-size: 36px;
}
.headline-2{
    font-family: 'DM Sans';    
    color:var(--grayscale-800);
    font-weight: var(--font-weight-bold);
    font-size: 28px;

}
.headline-3{
    font-family: 'DM Sans';    
    color:var(--grayscale-700);
    font-weight: var(--font-weight-semibold);
    font-size: 20px;

}

.text-1{
    color: var(--grayscale-600);
    font-family: 'DM Sans';    
    font-size: 12px;

    
}