/* ===========================================================
   CELETIOUS FRAMEWORK
   Typography System v1.0
   =========================================================== */


@font-face{

    font-family:"Inter";

    src:url("../assets/fonts/inter/InterVariable.woff2")
        format("woff2");

    font-style:normal;

    font-weight:100 900;

    font-display:swap;

}


@font-face{

    font-family:"Gambetta";

    src:url("../assets/fonts/gambetta/Gambetta-Regular.woff2")
        format("woff2");

    font-style:normal;

    font-weight:400;

    font-display:swap;

}

@font-face{

    font-family:"Gambetta";

    src:url("../assets/fonts/gambetta/Gambetta-Medium.woff2")
        format("woff2");

    font-style:normal;

    font-weight:500;

    font-display:swap;

}

:root {

  /* =======================================================
     FONT FAMILY
     ======================================================= */

  --font-primary: Inter, Arial, sans-serif;

  /* =======================================================
     FONT WEIGHTS
     ======================================================= */

  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* =======================================================
     FONT SIZES
     ======================================================= */

  --display-xl: 80px;
  --display-lg: 64px;

  --heading-1: 52px;
  --heading-2: 40px;
  --heading-3: 32px;
  --heading-4: 24px;

  --body-lg: 20px;
  --body-md: 18px;
  --body-sm: 16px;

  --caption: 14px;

  /* =======================================================
     LINE HEIGHT
     ======================================================= */

  --line-display: 1.05;
  --line-heading: 1.15;
  --line-body: 1.7;
  --line-small: 1.6;

  /* =======================================================
     LETTER SPACING
     ======================================================= */

  --tracking-display: -0.04em;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --tracking-caption: .02em;

  /* =======================================================
     READING WIDTH
     ======================================================= */

  --reading-width: 65ch;
}


/* ===========================================================
   Celetious Typography
=========================================================== */

.celetious-word{

    position:relative;

    display:inline-block;

    font-weight:800;

    letter-spacing:.02em;

    color:#EEF4FF;

}


.celetious-word::before{

    content:"";

    position:absolute;

    left:50%;

    top:-2px;

    transform:translateX(-50%);

    width:72%;

    height:10px;

    background:radial-gradient(

        ellipse,

        rgba(255,255,255,.10),

        transparent 75%

    );

    filter:blur(5px);

}

/* ===========================================================
   Celetious Display Titles
=========================================================== */

.display-title{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    width:100%;

    max-width:100%;

    text-wrap:balance;

}


.display-title > span{

    display:block;

    width:auto;

    max-width:100%;

    white-space:normal;

    overflow-wrap:break-word;

}


@media (max-width:767px){

    .display-title{
        margin-inline:auto;

    }

}