* {
    scroll-behavior: smooth;

    user-select: none;
    overflow-x: hidden;
    margin: 0;

    /*brand*/
    --color-brand-100: #1848FF;
    --color-brand-60: #6E8CFF ; 
    --color-brand-40: #A2B4FE;
    --color-brand-20: #CCD7FF;
    --color-brand-10: #E8EBFF;

    /*text*/
    --color-text-100: #19192E;
    --color-text-90: #262640;
    --color-text-60: #484866;
    --color-text-50: #79799A;
    --color-text-40: #9191B9;
    --color-text-30: #9E9EC3;
    --color-text-20: #B6B6DA;

    /*background*/
    --color-background-primary: #FCFCFF;
    --color-background-secondary: #F7F7FF;
    --color-background-tertiary: #E7EAF4;
}

body {
    width: 100vw;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    animation: fadeInAnimation ease 2.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

    background-color: var(--color-background-primary);
    color: var(--color-text-100);

    /* -ms-overflow-style: none;
    scrollbar-width: none;  */
}

a {
    text-decoration: none;
    color:inherit;
}

a:hover {
    cursor: pointer;
}

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


/* image sizes */

.icon-XXL {
    height: 5vmax;
}

.icon-XL {
    margin-bottom: -0.5vmax;
    height: 4.2vmax;
}

.icon-L {
    margin-bottom: -0.32vmax;
    height: 2.7vmax;
}

.icon-M {
    height: 2vmax;
}

span .icon-M {
    margin-bottom: -0.5vmax;
}

.icon-S {
    height: 1.5vmax;
    margin-bottom: -0.2vmax;
}

.icon-XS {
    height: 0.8rem;
}

.icon-wrapper {
    text-align: center;
}

@media screen and (max-width: 768px) {
    
    .icon-XXL {
        height: 7vmax;
    }

    .icon-XL {
        margin-bottom: -1vmax;;
        height: 6vmax;
    }
    
    .icon-L {
        margin-bottom: -0.8vmax;
        height: 4vmax;
    }
    
    .icon-M {
        height: 3vmax;
    }
    
    .icon-S {
        height: 2.2vmax;
        margin-bottom: -0.12vmax;
    }
    
    .icon-XS {
        height: 1.6vmax;
    }
}


/* font sizes */

h1, h2, h3, h4, h5, h6 {
    overflow-y: hidden;
    font-weight: 480;
}

h1 {
    font-size: 4vmax;
    line-height: 4.2vmax;
    overflow: visible;
    font-family: 'Space Grotesk';
    font-weight: 500;
}

h2 {
    font-size: 3vmax;
    line-height: 3.5vmax;
    font-family: 'Space Grotesk';
}

h3 {
    font-size: 1.5vmax;
    font-family: 'Space Grotesk';
}

h4 {
    font-size: 1.3vmax;
    line-height: 1.7vmax;
    font-family: 'Space Grotesk';
}

h5 {
    font-size: 1.25vmax;
    text-transform: uppercase;
    font-family: 'Space Grotesk';
}

h6 {
    font-size: 1.125vmax;
    text-transform: uppercase;
    font-family: 'Spline Sans';
    font-weight: 550;
}

.subtitle {
    color: var(--color-text-20);
    text-transform: uppercase;
    font-family: 'Space Grotesk';
}

.subtitle-darker {
    color: var(--color-brand-40);
    font-family: 'Space Grotesk';
}

b {
    font-weight: 550;
    color: var(--color-text-100)
}


#line {
    display:block;
    width:100%;
    border-top: 0.15em solid var(--color-brand-20);
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
 }


@media screen and (max-width: 768px) {
    
    h1 {
        font-size: 7vmax;
        line-height: 7.4vmax;
    }

    h2 {
        font-size: 3.6vmax;
        line-height: 4vmax;
    }

    h3 {
        font-size: 2.8vmax;
    }

    h4 {
        font-size: 2vmax;
        line-height: 2.8vmax;
    }

    h5 {
        font-size: 1.8vmax;
        line-height: 2.4vmax;
    }

    h6 {
        font-size: 1.6vmax;
        line-height: 1.6vmax;
    }
}


/* buttons */
.button {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.8vmax;
    height: 1.2rem;
    border-radius: 0.6rem;
    transition: transform 0.75s;
    overflow: hidden;
}

.button:hover {
    cursor: pointer;
}

.button h6 {
    margin-right: 0.4rem !important;
}

#button-primary {
    color: var(--color-brand-10);
    background-color: var(--color-brand-100);
}

#button-secondary {
    color: var(--color-brand-100);
    background-color: var(--color-brand-20);
}




/* scrollbar */

/* width */
::-webkit-scrollbar {
    width: 0.65rem;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: var(--color-background-tertiary);
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--color-brand-100)
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    display: block;
    background: rgba(0, 0, 0, 10);
  }


/*containers*/

section {
    width: 99vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-content {
    width: 76vw;
    margin-bottom: 8vmin;
    margin-top: 8vmin;
    overflow: visible;
}

.section-content-wider {
    width: 78vw;
    margin-bottom: 8vmin;
    margin-top: 8vmin;
}

.section-darker {
    background-color: var(--color-background-secondary);
}

.hidden {
    opacity: 0;
}


/* footer */

#footer {
    color: var(--color-brand-100);
    background-color: var(--color-brand-10);
}

#footer-title, #footer-title-wrapper {
    margin-top: 4.6vmin;
}

#footer-title img {
    margin-left: 0.5vmax
}

#footer-link-wrapper {
    display: flex;
    flex-direction: row;
    margin-top: 4.6vmin;
}

#footer-link {
    margin-right: 3vmax;
}

#footer-link h6 {
    font-weight: 500;
}

#footer-link img{
    margin-left: 0.5vmax;
}

@keyframes MoveUpDown1 {
    0%, 110% {
      transform: translateY(0.3vh);
    }
    40% {
      transform: translateY(-0.3vh);
    }
  }

@keyframes MoveUpDown2 {
    0%, 120% {
      transform: translateY(-0.3vh);
    }
    60% {
      transform: translateY(0.3vh);
    }
  }