:root{
    /* Color variables */
    --surface-0: #000000;
    --surface-1: #09090A;
    --surface-2: #0C0C0D;
    --surface-3: #131314;

  
  
    --outline: #1D1D20;

  
    --primary-text: #ffffff;
    --secondary-text: #94969D;

    --primary: #F9C135;
    --on-primary: #ffffff;
  
   
    /* Border radius */
    --border-radius: 8px;
  }

  *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   text-align: left;
  }
  /** FONTS **/
  
  h1, h2, h3, h4, h5, h6, p, button, a, li, td, th, textarea {
    font-family: "Inter", sans-serif;
   color: var(--primary-text);
  }
  h1{
   font-size: 64px;
   line-height: 64px;
  }
  h2{
   font-size: 48px;
   line-height: 52px;
  }
  h3{
   font-size: 28px;
   line-height: 32px;
  }
  h4{
   font-size: 24px;
   line-height: 32px;
  }
 h5{
   font-size: 20px;
   line-height: 28px;
  }
  h6{
   font-size: 18px;
   line-height: 24px;
  }
  p, li, td, th{
   font-size: 18px;
   font-weight: 400;
   line-height: 24px;
  }
  a{
   font-size: 18px;
   line-height: 22px;
   font-weight: 600;
   text-decoration: none;
   cursor: pointer;
  }
  ul{
    padding-left: 40px;
  }
  p.subheadline{
    font-size: 22px;
    line-height: 32px;
  }
  p.regular{
    font-weight: 400;
  }
  p.semibold{
   font-weight: 500;
  }
  p.caption{
   font-size: 16px;
   line-height: 18px;
  }
  p.bold{
    font-weight: 600;
  }
  
  
  /** POSITIONING **/
  .vertical{
   display: flex;
   flex-direction: column;
  }
  .horizontal{
   display: flex;
   flex-direction: row;
  }
  .center-main-axis{
   justify-content: center;
  }
  .right-main-axis{
    justify-content: flex-end;
  }
  .right-cross-axis{
    align-items: flex-end;
   }
  .center-cross-axis{
   align-items: center;
  }
  .text-center{
   text-align: center;
  }
  .text-left{
    text-align: left;
  }
  .text-right{
    text-align: right;
   }
  .start-cross-axis{
   align-items: flex-start;
  }
  .flex-wrap{
   display: flex;
   flex-wrap: wrap;
  }
  
  /** SPACING **/
  .v-xs{
   row-gap: 4px;
  }
  .v-s{
   row-gap: 8px;
  }
  .v-m{
   row-gap: 16px;
  }
  .v-l{
   row-gap: 24px;
  }
  .v-xl{
   row-gap: 40px;
  }
  .v-xxl{
   row-gap: 80px;
  }
  .v-huge{
   row-gap: 124px;
  }
  .v-humongous{
   row-gap: 248px;
  }
  
  .h-xs{
   column-gap: 4px;
  }
  .h-s{
   column-gap: 8px;
  }
  .h-m{
   column-gap: 16px;
  }
  .h-l{
   column-gap: 24px;
  }
  .h-xl{
   column-gap: 40px;
  }
  .h-xxl{
   column-gap: 80px;
  }
  .space-between{
   justify-content: space-between;
  }
  
  .fill{
   width: 100%;
  }
  .fill-half{
   width: 50%;
  }
  .fill-75{
   width: 75%;
  }
  .hug{
   width: auto;
  }
  
  .h-padding-s{
   padding-left: 8px;
   padding-right: 8px;
  }
  .h-padding-m{
   padding-left: 16px;
   padding-right: 16px;
  }
  .h-padding-l{
   padding-left: 24px;
   padding-right: 24px;
  }
  .h-padding-xl{
   padding-left: 40px;
   padding-right: 40px;
  }
  .h-padding-80{
   padding-left: 80px;
   padding-right: 80px;
  }
  
  .v-padding-s{
   padding-top: 8px;
   padding-bottom: 8px;
  }
  .v-padding-m{
   padding-top: 16px;
   padding-bottom: 16px;
  }
  .v-padding-l{
   padding-top: 24px;
   padding-bottom: 24px;
  }
  .v-padding-xl{
   padding-top: 40px;
   padding-bottom: 40px;
  }
  /** SIZES **/
  .size-s{
   width: 8px;
   height: fit-content;
  }
  .size-m{
   width: 16px;
   height: fit-content;
  }
  .size-l{
   width: 24px;
   height: fit-content;
  }
  .size-xl{
   width: 32px;
   height: fit-content;
  }
  .size-xxl{
   width: 40px;
   height: fit-content;
  }
  .size-48{
   width: 48px;
   height: fit-content;
  }
  .size-xxxl{
   width: 64px;
   height: fit-content;
  }
  .size-big{
   width: 80px;
   height: fit-content;
  }
  .size-huge{
   width: 124px;
   height: fit-content;
  }
  .fit-content{
   width: fit-content;
  }
  .flex-1{
   flex: 1;
  }
  
  /** OTHER **/
  .relative{
   position: relative;
  }
  .border-radius{
   border-radius: var(--border-radius);
  }
  .border{
   border: 1px solid var(--outline);
  }
  .border-variant{
   border: 1px solid var(--outline-variant);
  }
  .secondary-text{
    color: var(--secondary-text);
  }
  
  /** COLOR CLASSES **/
  .on-surface{
   color: var(--on-surface);
  }
  .on-surface-variant{
   color: var(--on-surface-variant);
  }
  .background-surface-container{
   background-color: var(--surface);
  }
  .background-surface-container-low{
   background-color: var(--surface-container-low);
  }
  .desktop-hide{
   display: none;
  }


  /** Media Queries **/
  @media (max-width: 500px) {
    /** FONTS **/
    h1 {
        font-size: 40px;
        line-height: 48px;
    }
    h2 {
        font-size: 32px;
        line-height: 40px;
    }
    h3 {
        font-size: 24px;
        line-height: 32px;
    }
    h4 {
        font-size: 20px;
        line-height: 28px;
    }
    h5 {
        font-size: 18px;
        line-height: 24px;
    }
    h6 {
        font-size: 16px;
        line-height: 24px;
    }
    p, li, td, th {
        font-size: 16px;
        line-height: 24px;
    }
    a {
        font-size: 16px;
        line-height: 24px;
    }
    p.subheadline {
        font-size: 18px;
        line-height: 24px;
    }
    p.caption {
        font-size: 14px;
        line-height: 20px;
    }

    /** SPACING **/
    .v-xxl {
        row-gap: 48px;
    }
    .v-xl {
        row-gap: 32px;
    }
    .v-l {
        row-gap: 24px;
    }
    .v-m {
        row-gap: 16px;
    }
    .v-s {
        row-gap: 8px;
    }

    .h-xxl {
        column-gap: 48px;
    }
    .h-xl {
        column-gap: 32px;
    }
    .h-l {
        column-gap: 24px;
    }
    .h-m {
        column-gap: 16px;
    }
    .h-s {
        column-gap: 8px;
    }

    /** PADDING **/
    .h-padding-80 {
        padding-left: 16px;
        padding-right: 16px;
    }
    .h-padding-xl {
        padding-left: 16px;
        padding-right: 16px;
    }
    .h-padding-l {
        padding-left: 16px;
        padding-right: 16px;
    }
    .h-padding-m {
        padding-left: 12px;
        padding-right: 12px;
    }
    .h-padding-s {
        padding-left: 8px;
        padding-right: 8px;
    }
    .m-v-none{
      row-gap: 0px;
    }

    /** PADDING **/
    .v-padding-s{
     padding-top: 8px;
     padding-bottom: 8px;
    }
    .v-padding-m{
     padding-top: 16px;
     padding-bottom: 16px;
    }
    .v-padding-l{
     padding-top: 24px;
     padding-bottom: 24px;
    }
    .v-padding-xl{
     padding-top: 40px;
     padding-bottom: 40px;
    }
    /** SIZES **/
    .size-s{
     width: 8px;
     height: fit-content;
    }
    .size-m{
     width: 16px;
     height: fit-content;
    }
    .size-l{
     width: 24px;
     height: fit-content;
    }
    .size-xl{
     width: 32px;
     height: fit-content;
    }
    .size-xxl{
     width: 40px;
     height: fit-content;
    }
    .size-48{
     width: 48px;
     height: fit-content;
    }
    .size-xxxl{
     width: 64px;
     height: fit-content;
    }
    .size-big{
     width: 80px;
     height: fit-content;
    }
    .size-huge{
     width: 124px;
     height: fit-content;
    }
    .fit-content{
     width: fit-content;
    }
    .flex-1{
     flex: 1;
    }
  
    /** OTHER **/
    .relative{
     position: relative;
    }
    .border-radius{
     border-radius: var(--border-radius);
    }
    .border{
     border: 1px solid var(--outline);
    }
    .border-variant{
     border: 1px solid var(--outline-variant);
    }
    .secondary-text{
      color: var(--secondary-text);
    }
    
    /** COLOR CLASSES **/
    .on-surface{
     color: var(--on-surface);
    }
    .on-surface-variant{
     color: var(--on-surface-variant);
    }
    .background-surface-container{
     background-color: var(--surface);
    }
    .background-surface-container-low{
     background-color: var(--surface-container-low);
    }
    .desktop-hide{
     display:block;
    }
  
    .mobile-vertical{
      display: flex;
      flex-direction: column;
    }
    .mobile-horizontal{
      display: flex;
      flex-direction: row;
    }
    .mobile-fill{
      width: 100%;
    }
    .mobile-fill-half{
      width: 50%;
    }
    .mobile-fill-75{
      width: 75%;
    }
    .mobile-center-main-axis{
      justify-content: center;
    }
    .mobile-center-cross-axis{
      align-items: center;
    }
    .mobile-start-cross-axis{
      align-items: flex-start;
    }
    .m-text-center{
      text-align: center;
    }
  
  
    .mobile-h-padding-s{
      padding-left: 8px;
      padding-right: 8px;
    }
    .mobile-h-padding-m{
      padding-left: 16px;
      padding-right: 16px;
    }
    .mobile-h-padding-l{
      padding-left: 24px;
      padding-right: 24px;
    }
    .mobile-h-padding-xl{
      padding-left: 40px;
      padding-right: 40px;
    }
    
    .mobile-v-padding-s{
      padding-top: 8px;
      padding-bottom: 8px;
    }
    .mobile-v-padding-m{
      padding-top: 16px;
      padding-bottom: 16px;
    }
    .mobile-v-padding-l{
      padding-top: 24px;
      padding-bottom: 24px;
    }
    .mobile-v-padding-xl{
      padding-top: 40px;
      padding-bottom: 40px;
    }
    .m-hide{
      display: none !important;
    }
  }