:root {
    --header-padding: 5%;
    --color-accent: #283747;
    --color-headline: #283747;
    --color-text: #455a6f;
    --color-light:#f9f9f9;
    --color-l-grey: #a3a8ac4f;
    --color-light-grey:#f4f4f4ab;
    --color-dark: #283747;
    --color-check:#b91e1e;
   


    --black: black;
    --white:white;

    --body-text: "Plus Jakarta Sans", sans-serif;

    --shadow-1: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-2: 0 6px 10px rgba(98, 98, 98, 0.055);
    --border-radius: 4px;
    --border: solid .5px var(--color-l-grey);
    --transition-4s: all .4s ease-in-out;

    --h1: clamp(2.5rem, 5vw + 1rem, 4rem);
    --h1-small: clamp(2rem, 4vw + 0.5rem, 3.5rem);
    --h2: clamp(2.1rem, 3.5vw + 0.6rem, 3rem);
    --h3: clamp(1.5rem, 3vw + 0.25rem, 2.5rem);
    --h4: clamp(1.8rem, 2.5vw + 0.3rem, 2.1rem);
    --h5: clamp(1.4rem, 2vw + 0.25rem, 1.5rem);
    --h6: clamp(1.1rem, 2vw + 0.25rem, 1.2rem);
    --font-mid: .9rem;
    --font-sub: clamp(1rem, 2vw + 0.25rem, 1.3rem);
    --font-top: .97rem;

}

@font-face {
  font-family: "Phosphor-Fill";
  src:
    url("../fonts/Phosphor-Fill.woff2") format("woff2"),
    url("./Phosphor-Fill.woff") format("woff"),
    url("./Phosphor-Fill.ttf") format("truetype"),
    url("./Phosphor-Fill.svg#Phosphor-Fill") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

html {
    scroll-behavior: smooth;
  }

body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    font-family: var(--body-text);
    color: var(--color-text);
    font-weight: 200;
  }

  ::selection {
    color: var(--color-light);
    text-shadow: none;
    background: var(--color-accent);
  }

  .marker::selection {
    color: var(--color-light);
    text-shadow: none;
    background: var(--color-accent);
  }
  
  *,
  ::after,
  ::before {
    box-sizing: border-box;
  }

  body a {
    font-family: var(--body-text);
    color: var(--color-accent);
    text-decoration: none;
  }

  body a:hover {
    color: var(--color-text);
  }
  p {
    margin-block-start: .4em;
    margin-block-end: .4em;
  }

  .font-top {
    font-size: var(--font-top);
    text-transform: uppercase;
    color: var(--color-accent); 
    margin-block-start: 0em;
    margin-block-end: .4em;
  }

  h1,h2,h3,h4,h5,h6 {
    color: var(--color-headline);
    font-weight: 300;
    margin-block-start: 0em;
    margin-block-end: 0em;
  }

  h1 {
    font-size: var(--h1);
  }
  .h1-small {
    font-size: var(--h1-small);
  }
  h2 {
    font-size: var(--h2);
  }
  h3 {
    font-size: var(--h3);
  }
  h4 {
    font-size: var(--h4);
  }
  h5 {
    font-size: var(--h5);
  }
  h6 {
    font-size: var(--h6);
  }


  /* SPACES */

.pb-0 {
 padding-bottom: 0px!important;
}
.pt-0 {
  padding-top: 0px!important;
 }




/* MARGIN TOP*/
.mt-5 {
  margin-top: 5px!important;
}
.mt-10 {
  margin-top: 10px!important;
}
.mt-15 {
  margin-top: 15px!important;
}
.mt-20 {
  margin-top: 20px!important;
}
.mt-25 {
  margin-top: 25px!important;
}
.mt-30 {
  margin-top: 30px!important;
}
.mt-40 {
  margin-top: 40px!important;
}
.mt-50 {
  margin-top: 50px!important;
}
.mt-60 {
  margin-top: 60px!important;
}
.mt-70 {
  margin-top: 70px!important;
}
.mt-80 {
  margin-top: 80px!important;
}
.mt-90 {
  margin-top: 90px!important;
}
.mt-100 {
  margin-top: 100px!important;
}
  

@media screen and (max-width: 530px ){

  .mt-5 {
    margin-top: 5px!important;
  }
  .mt-10 {
    margin-top: 10px!important;
  }
  .mt-15 {
    margin-top: 15px!important;
  }
  .mt-20 {
    margin-top: 20px!important;
  }
  .mt-25 {
    margin-top: 20px!important;
  }
  .mt-30 {
    margin-top: 20px!important;
  }
  .mt-40 {
    margin-top: 20px!important;
  }
  .mt-50 {
    margin-top: 20px!important;
  }
  .mt-60 {
    margin-top: 20px!important;
  }
  .mt-70 {
    margin-top: 20px!important;
  }
  .mt-80 {
    margin-top: 20px!important;
  }
  .mt-90 {
    margin-top: 30px!important;
  }
  .mt-100 {
    margin-top: 40px!important;
    
  }

  }

  /* Margin Bottom */
 
.mb-5 {
  margin-bottom: 5px!important;
}
.mb-10 {
  margin-bottom: 10px!important;
}
.mb-15 {
  margin-bottom: 15px!important;
}
.mb-20 {
  margin-bottom: 20px!important;
}
.mb-25 {
  margin-bottom: 25px!important;
}
.mb-30 {
  margin-bottom: 30px!important;
}
.mb-40 {
  margin-bottom: 40px!important;
}
.mb-50 {
  margin-bottom: 50px!important;
}
.mb-60 {
  margin-bottom: 60px!important;
}
.mb-70 {
  margin-bottom: 70px!important;
}
.mb-80 {
  margin-bottom: 80px!important;
}
.mb-90 {
  margin-bottom: 90px!important;
}
.mb-100 {
  margin-bottom: 100px!important;
}
  

@media screen and (max-width: 530px ){

  .mb-5 {
    margin-bottom: 5px!important;
  }
  .mb-10 {
    margin-bottom: 10px!important;
  }
  .mb-15 {
    margin-bottom: 15px!important;
  }
  .mb-20 {
    margin-bottom: 20px!important;
  }
  .mb-25 {
    margin-bottom: 20px!important;
  }
  .mb-30 {
    margin-bottom: 20px!important;
  }
  .mb-40 {
    margin-bottom: 20px!important;
  }
  .mb-50 {
    margin-bottom: 20px!important;
  }
  .mb-60 {
    margin-bottom: 20px!important;
  }
  .mb-70 {
    margin-bottom: 20px!important;
  }
  .mb-80 {
    margin-bottom: 20px!important;
  }
  .mb-90 {
    margin-bottom: 30px!important;
  }
  .mb-100 {
    margin-bottom: 40px!important;
    
  }

  }


  /* PADDING TOP */
.pt-5 {
  padding-top: 5px!important;
}
.pt-10 {
  padding-top: 10px!important;
}
.pt-15 {
  padding-top: 15px!important;
}
.pt-20 {
  padding-top: 20px!important;
}
.pt-25 {
  padding-top: 25px!important;
}
.pt-30 {
  padding-top: 30px!important;
}
.pt-40 {
  padding-top: 40px!important;
}
.pt-50 {
  padding-top: 50px!important;
}
.pt-60 {
  padding-top: 60px!important;
}
.pt-70 {
  padding-top: 70px!important;
}
.pt-80 {
  padding-top: 80px!important;
}
.pt-90 {
  padding-top: 90px!important;
}
.pt-100 {
  padding-top: 100px!important;
}
.pt-150 {
  padding-top: 150px!important;
}
  

@media screen and (max-width: 530px ){

  .pt-5 {
    padding-top: 5px!important;
  }
  .pt-10 {
    padding-top: 10px!important;
  }
  .pt-15 {
    padding-top: 15px!important;
  }
  .pt-20 {
    padding-top: 20px!important;
  }
  .pt-25 {
    padding-top: 20px!important;
  }
  .pt-30 {
    padding-top: 20px!important;
  }
  .pt-40 {
    padding-top: 20px!important;
  }
  .pt-50 {
    padding-top: 20px!important;
  }
  .pt-60 {
    padding-top: 20px!important;
  }
  .pt-70 {
    padding-top: 20px!important;
  }
  .pt-80 {
    padding-top: 20px!important;
  }
  .pt-90 {
    padding-top: 30px!important;
  }
  .pt-100 {
    padding-top: 40px!important;
  }
  .pt-150 {
    padding-top: 40px!important;
  }

  }

  /* PADDING BOTTOM */
  .pb-5 {
    padding-bottom: 5px!important;
  }
  .pb-10 {
    padding-bottom: 10px!important;
  }
  .pb-15 {
    padding-bottom: 15px!important;
  }
  .pb-20 {
    padding-bottom: 20px!important;
  }
  .pb-25 {
    padding-bottom: 25px!important;
  }
  .pb-30 {
    padding-bottom: 30px!important;
  }
  .pb-40 {
    padding-bottom: 40px!important;
  }
  .pb-50 {
    padding-bottom: 50px!important;
  }
  .pb-60 {
    padding-bottom: 60px!important;
  }
  .pb-70 {
    padding-bottom: 70px!important;
  }
  .pb-80 {
    padding-bottom: 80px!important;
  }
  .pb-90 {
    padding-bottom: 90px!important;
  }
  .pb-100 {
    padding-bottom: 100px!important;
  }
  .pb-150 {
    padding-bottom: 150px!important;
  }
    
  
  @media screen and (max-width: 530px ){
  
    .pb-5 {
      padding-bottom: 5px!important;
    }
    .pb-10 {
      padding-bottom: 10px!important;
    }
    .pb-15 {
      padding-bottom: 15px!important;
    }
    .pb-20 {
      padding-bottom: 20px!important;
    }
    .pb-25 {
      padding-bottom: 20px!important;
    }
    .pb-30 {
      padding-bottom: 20px!important;
    }
    .pb-40 {
      padding-bottom: 20px!important;
    }
    .pb-50 {
      padding-bottom: 20px!important;
    }
    .pb-60 {
      padding-bottom: 20px!important;
    }
    .pb-70 {
      padding-bottom: 20px!important;
    }
    .pb-80 {
      padding-bottom: 20px!important;
    }
    .pb-90 {
      padding-bottom: 30px!important;
    }
    .pb-100 {
      padding-bottom: 40px!important;
    }
    .pb-150 {
      padding-bottom: 40px!important;
    }


  
    }






  .gap-5 {
    gap: 5px!important;
  }

  .gap-10 {
    gap: 10px!important;
  }

  .gap-20 {
    gap: 20px!important;
  }
  .r-gap-20 {
    row-gap: 20px!important;
  }
  .c-gap-20 {
    column-gap: 20px!important;
  }



  .bg-grey {
    background-color: var(--color-light-grey);
  }

  .bg-white {
    background-color: white;
  }

  .bg-accent {
    background-color: var(--color-accent);
    color: var(--color-light);
  }
  .bg-accent a {
    color: var(--color-light);
  }
  .bg-accent h2 {
    color: var(--color-light);
  }




.colorx {
  background-color: rgba(95, 158, 160, 0.366);
  border: solid 1px coral;
}