@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    /* Colors */
    --color-primary-dark-blue: #294b7b;
    --color-primary-light-blue: #DFF1FF;
    --color-primary-dark: #000000;
    --color-accent-cyan: #9FD3DE;
    --color-accent-blue: #41ABDF;
    --color-neutral-light-gray: #F9F9F9;
    --color-background-light-blue: #F6FBFF;
    --color-neutral-dark-black: #1F2024;
    --color-background-dark-black: #1D2327;
    --color-neutral-white: #FFFFFF;
    --color-steel-blue: #3886b0;
    --color-dark-gray: #333333;
    /* Colors */

    /* Paddings & Margins */
    --padding-default: 1.5em;
    --padding-small: 0.5em;

    --margin-small: 0.5em;
    --margin-medium: 1em;
    --margin-big: 2em;
    /* Paddings & Margins */

    /* Font Sizes */
    --font-size-big: 1.5rem;
    --font-size-small: 1rem;
    /* Font Sizes */

    /* Other */
    --box-shadow-default:rgba(0, 0, 0, 0.24) 0px 3px 8px;
    --box-shadow-hard: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    --transition-default-setting: all ease-in-out 250ms;
    --animation-duration: 0.5s;
    --animation-easing: ease-out;
    /* Other */


    --font-family-main: "Roboto", sans-serif;
}

*, 
*::after, 
*::before{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-family-main);
}

html {
  scroll-behavior: smooth;
}


/* Text classes */
.bold-text {
    font-weight: bold;
}

.small-text {
    font-weight: 400;
    font-size: 0.8rem;
}
/* Text classes */


/* Animations class */

.animation-fade-in-down {
    will-change: opacity, transform;
    animation: fadeInDown var(--animation-duration) var(--animation-easing) forwards;
}

@keyframes fadeInDown {
    0% {
        margin-top: -100px;
    }
    100% {
        margin-top: 0px;        
    }
}

.animation-fade-in {
    animation: fadeIn var(--animation-duration) var(--animation-easing) forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0; 
    }
    100% {
        opacity: 1; 
    }
}

/* Animations class */

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Content svg */

#top-background-svg svg {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: -.1em;
    background-color: var(--color-background-light-blue);
}

#bottom-background-svg svg{
    transform: rotate(180deg);
    width: 100%;
    height: auto;
    display: block;
    margin-top: -.1em;
}

.no-scroll {
    overflow: hidden;
    height: 100vh;
}