@font-face {
  font-family: Sansation-regular;
  src: url('/static/assets/fonts/Sansation/Sansation-Regular.ttf');
}

@font-face {
  font-family: Sansation-bold;
  src: url('/static/assets/fonts/Sansation/Sansation-Bold.ttf');
}

@font-face {
  font-family: Sansation-light;
  src: url('/static/assets/fonts/Sansation/Sansation-Light.ttf');
}


@font-face {
  font-family: Inter-regular;
  src: url('/static/assets/fonts/Inter/static/Inter_18pt-Regular.ttf');
}


@font-face {
  font-family: Inter-bold;
  src: url('/static/assets/fonts/Inter/static/Inter_18pt-Bold.ttf');
}


@font-face {
  font-family: Inter-light;
  src: url('/static/assets/fonts/Inter/static/Inter_18pt-Light.ttf');
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Inter-regular', sans-serif;
    font-style: regular;
    font-weight: normal;
    box-sizing: border-box;
}

:root{
    --main-color: white;
    --secondary-color: black;
    --accent-color: #D8A116;
    --accent-dark: #A87908;
    --secondary-shade: #8F8F8F;
    --primary-shade: #E3E3E3;
    --accent-shade: #FFE197;
    --accent-shade2: #FFF5DC;
    --accent-shade3: #FFFCF5;
    --text: #191919;
}

:root{
    --style-position: 10.5%
}

/* use this whenever you need to center a perticular section acc to the layout */
.layout-center{
  padding: 0px var(--style-position);
}

.sansation-light {
  font-family: "Sansation-light", sans-serif;
  /* font-weight: 300; */
  font-style: normal;
}

.sansation-regular {
  font-family: "Sansation-regular", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.sansation-bold {
  font-family: "Sansation-bold", sans-serif;
  font-weight: 700;
  font-style: normal;
}



.inter {
  font-family: "Inter-regular", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}


.inter-bold{
  font-family: "Inter-bold", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}


.inter-light{
  font-family: "Inter-light";
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}


html,
body {
    overflow-x: hidden;
    width: 100%;
}


.content{
  background-color: #8F8F8F;
}

.container{
  border: 1px solid black;
}


hr{
  opacity: 30%;
}

@media screen and (max-width: 1400px) {
  :root{
    --style-position: 5%;
  }
}