@font-face {
  font-family: 'Dennis Sans';
  src: url("../assets/fonts/NeueMontreal-Light.otf") format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'Dennis Sans';
  src: url("../assets/fonts/NeueMontreal-LightItalic.otf") format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: auto;
}
@font-face {
  font-family: 'Dennis Sans';
  src: url("../assets/fonts/NeueMontreal-Regular.otf") format('opentype');
  font-weight: 450;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'Dennis Sans';
  src: url("../assets/fonts/NeueMontreal-Italic.otf") format('opentype');
  font-weight: 450;
  font-style: italic;
  font-display: auto;
}
@font-face {
  font-family: 'Dennis Sans';
  src: url("../assets/fonts/NeueMontreal-Bold.otf") format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'Dennis Sans';
  src: url("../assets/fonts/NeueMontreal-BoldItalic.otf") format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: auto;
}




:root {
    /* || custom colors || */
    --clr-dark: hsl(225, 7%, 12%);
    --clr-dark-dark: hsl(220, 7%, 8%);
    --clr-black: hsl(220, 7%, 8%);
    --clr-light: hsl(0, 0%, 100%);
    --clr-blue: hsl(232, 79%, 59%);
    --clr-blue-dark: hsl(231, 65%, 51%);
    --clr-gray: hsl(192, 3%, 61%);
    --clr-lightgray: hsl(210, 5%, 92%);
    --clr-white: hsl(0, 0%, 100%);
  

    /* ||border-color|| */
    --clr-border: hsla(225, 7%, 12%, 0.176);
    --clr-border-solid: hsl(0, 0%, 82%);
    --clr-border-light: hsla(0, 0%, 100%, 0.2);
    --clr-border-solid-light: hsl(220, 2%, 34%);

    

       /* ||  Text Colors || */
    --clr-text: hsl(225, 7%, 12%);
    --clr-text-light: hsl(0, 0%, 100%);

    /* || Alert Colors || */
    --alert-error: hsl(0, 100%, 63%);
    --alert-success: hsl(139, 70%, 46%);

    /* || shadows || */
    --custom-box-shadow: box-shadow: -168px 560px 164px 0px rgba(0, 0, 0, 0.01), -107px 358px 150px 0px rgba(0, 0, 0, 0.08), -60px 202px 126px 0px rgba(0, 0, 0, 0.27), -27px 90px 94px 0px rgba(0, 0, 0, 0.45), -7px 22px 51px 0px rgba(0, 0, 0, 0.52);;
   
  

    /* ||animations || */
    --animation-primary: all .5s cubic-bezier(.7, 0, .3, 1);
    --animation-fast: all .3s cubic-bezier(.7, 0, .3, 1);
    --animation-smooth: all .7s cubic-bezier(.7, 0, .3, 1);
    --animation-slow: all .9s cubic-bezier(.7, 0, .3, 1);


    /* ||spacing || */
    --section-padding: clamp(5em, 21vh, 12em);
    --container-padding: clamp(2.5em, 8vw, 8em);
    --gap-padding: clamp(1.5em, 4vw, 2.5em);


    /* || Font Families || */
    --font-dennis-sans: 'Dennis Sans', sans-serif;
    --font-roboto: 'Roboto Mono', monospace;
    --font-size-base: clamp(16px, 1.2vw, 19px);

    /* || Heading Sizes || */
    --font-size-h1: clamp(3.25em, 7vw, 8em);
    --font-size-h2: clamp(3.25em, 5vw, 4.5em);
    --font-size-h3: clamp(2.66em, 4.65vw, 5.32em);
    --font-size-h4: clamp(1.55em, 2.3vw, 2.5em);
    --font-size-h5: .6em;

    /* || Font Weights || */
    --font-weight-light: 300;
    --font-weight-regular: 450;
    --font-weight-bold: 800;

     /* || Hamburger Button || */
    --hamburger-size: clamp(4em, 5.5vw, 5em);
    --hamburger-bg: var(--ref-color-dark);
    --hamburger-border: var(--ref-color-border-light);
    --hamburger-active-bg: var(--ref-color-blue);

    /* || Profile Picture  || */
    --profile-picture-size: clamp(4.5em, 6.5vw, 8em);
    --profile-picture-border-radius: 50%;

    /* || Rounded Div  || */
    --rounded-div-height: 10vh;
    --rounded-div-width: 150%;
    --rounded-div-radius: 50%;

    /* || Social Icons  || */
    --social-icon-size: 1.75em;
    --social-icon-bg: var(--ref-color-blue);
    --social-icon-hover-bg: var(--ref-color-dark);

    /* || Button: Circle  || */
    --btn-circle-size: clamp(9em, 12vw, 11em);
    --btn-circle-bg: var(--ref-color-dark);

    /* || Button: Link  || */
    --btn-link-height: 2.75em;
    --btn-link-indicator-size: calc(clamp(16px, 1.2vw, 19px) / 2.75);

    /* || Form Fields  || */
    --form-border-color: var(--ref-color-border-light);
    --form-input-color: var(--ref-color-white);
    --form-placeholder-opacity: .33;
}

@media screen and (max-width: 1200px) {
    :root {
        --container-padding: 6vw;
    }
}

@media screen and (max-width: 720px) {
    :root {
        --section-padding: 12vh;
    }
}

@media screen and (max-width: 540px) {
    :root {
        --clr-border: rgba(28, 29, 32, 0.225);
        --clr-border-light: rgba(255, 255, 255, 0.225);
        --container-padding: clamp(1.25em, 4vw, 2.5em);
        --section-padding: max(2.5em, 12vh);
    }
}


body {
    font-family: var(--font-dennis-sans);
    line-height: 1.5;
    min-height: 100dvh;
    overflow-x: hidden;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

h1.project-title{
    display: inline-block;
    font-family: var(--font-dennis-sans);
}


h2 {
    font-family: var(--font-dennis-sans);
    font-weight: 450;
    font-style: normal;
    font-size: calc(clamp(3.2rem, 5vw, 4rem) * .75);
    line-height: 1.065;
    margin-bottom: .66rem;
}
  
h3 {
   -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--clr-light-black);
    font-family: var(--font-dennis-sans);
    font-weight: 450;
    font-style: normal;
    font-size: clamp(2.66rem, 4.65vw, 5.32rem);
    margin-bottom: 1rem;
}
  
h4 {
    font-family: var(--font-dennis-sans);
    font-weight: 450;
    font-style: normal;
    font-size: clamp(1rem, 2.3vw, 2.5rem);
    line-height: 1.45;
    margin-bottom: 1rem;
}

h5 {
    font-family: var(--font-dennis-sans);
    font-weight: 450;
    font-style: normal;
    font-size: .6em;
    line-height: 1.065;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: .05rem;
    opacity: .8;
}


p {
    font-family: var(--font-dennis-sans);
    font-weight: 450;
    font-style: normal;
    font-size: 1.125rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}

small {
    font-size: .8rem;
    line-height: 1.75;
    letter-spacing: .015rem;
}


a {
    text-decoration: none;
    color: var(--clr-deep-black);
    font-size: .875rem;
    transition: color .5s ease-in-out;
}