@font-face { font-family: Monument Grotesk; src: url('fonts/MichiganCentralMonumentGroteskVariable.woff'); } 
 @font-face { font-family: Monument Grotesk; font-weight: bold; src: url('fonts/MichiganCentralMonumentGroteskVariable.woff');}

/* CSS reset  */
html {
    margin-top: 0 !important;
    scroll-behavior: smooth;
    }
    html *
{
   font-family: "Monument Grotesk", Helvetica, sans-serif !important;
}
    
    /*
      1. Use a more-intuitive box-sizing model.
    */
    *, *::before, *::after {
        box-sizing: border-box;
      }
      /*
        2. Remove default margin
      */
      * {
        margin: 0;
      }
      /*
        Typographic tweaks!
        3. Add accessible line-height
        4. Improve text rendering
      */
      body {
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
      }
      /*
        5. Improve media defaults
      */
      img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
      }
      /*
        6. Remove built-in form typography styles
      */
      input, button, textarea, select {
        font: inherit;
      }
      /*
        7. Avoid text overflows
      */
      p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
      }
      /*
        8. Create a root stacking context
      */
      #root, #__next {
        isolation: isolate;
      }
    
      body {
          background-color: black;
          color: white;
      }
    
      .open-content-wrap {
        max-width: 1264px;
        margin: 0px auto;
        width: 86%;
    }
    
    h1 {
        color: var(--white, #FFF);
        text-align: center;
        /* Display */
        font-family: var(--font-family-display, "Maax Display Trial");
        font-size: clamp(4rem, 1.116rem + 5.952vw, 7.813rem);
        font-style: normal;
        font-weight: 900;
        line-height: 80%; /* 100px */
        letter-spacing: 1.25px;
        text-transform: uppercase;
    }
    
    h2 {
        color: var(--white, #FFF);
        /* H2 */
        font-family: var(--font-family, Maax);
        font-size: var(--font-size-font-size-h2, 54px);
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 64.8px */
        letter-spacing: 0.54px;
        text-transform: uppercase;
    }
    
    h3 {
        color: var(--white, #FFF);
        leading-trim: both;
    
        text-edge: cap;
        /* H3 */
        font-family: var(--font-family, Maax);
        font-size: var(--font-size-font-size-h3, 36px);
        font-style: normal;
        font-weight: 700;
        line-height: 110%; /* 39.6px */
        letter-spacing: -0.36px;
        text-transform: uppercase;
    }
    
    p, p a {
        This is a normal paragraph
        color: var(--white, #FFF);
        /* Body */
        font-family: var(--font-family, Maax);
        font-size: var(--font-size-font-body, 20px);
        font-style: normal;
        font-weight: 500;
        line-height: 140%; /* 28px */
    }
    
    .p-large {
        color: var(--white, #FFF);
    
        /* Body Large */
        font-family: var(--font-family, Maax);
        font-size: var(--font-size-font-body-large, 27px);
        font-style: normal;
        font-weight: 500;
        line-height: 140%; /* 37.8px */
    }
    
    .p-small {
        color: var(--white, #FFF);
    
        /* Body Small */
        font-family: var(--font-family, Maax);
        font-size: var(--font-size-font-body-small, 15px);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: -0.15px;
    }
    
    a {
        color: var(--white, #FFF);
        leading-trim: both;
    
        text-edge: cap;
        /* Menu */
        font-family: var(--font-family, Maax);
        font-size: var(--font-size-font-size-menu, 24px);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: -0.24px;
    }
    
    a:hover, a:active,  a:visited {
        color: var(--white, #FFF);
        /* Menu Underline */
        font-family: var(--font-family, Maax);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: -0.24px;
        text-decoration-line: underline;
    }
    
    button {
        color: var(--white, #FFF);
        leading-trim: both;
        text-edge: cap;
    
        /* Button */
        font-family: var(--font-family, Maax);
        font-size: var(--font-size-font-size-button, 17px);
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -0.17px;
        text-transform: uppercase;
    }
    
    @media screen and (max-width: 960px) {
        h1 {
            font-size: var(--font-size-font-size-display, 49px);
            line-height: 80%; /* 39.2px */
            letter-spacing: 0.49px;
        }
        h2 {
            font-size: var(--font-size-font-size-h2, 40px);
            line-height: 120%; /* 48px */
            letter-spacing: 0.4px;
        }
    
        h3 {
            font-size: var(--font-size-font-size-h3, 25px);
            line-height: 110%; /* 27.5px */
            letter-spacing: -0.25px;
        }
        p {
            font-size: var(--font-size-font-body, 18px);
            line-height: 140%; /* 25.2px */
        }
        .p-large {
            font-size: var(--font-size-font-body-large, 22px);
            line-height: 140%; /* 30.8px */
        }
        .p-small {
            font-size: var(--font-size-font-body-small, 12px);
            letter-spacing: -0.12px;
        }
        button {
            font-size: var(--font-size-font-size-button, 14px);
            letter-spacing: -0.14px;
        }
    }

    @media screen and (min-width: 960px) {
        .hero-min-height {
            min-height: 800px;
        } 
    }