foundation-styles.css

:root
{
  --my-size-0-5: 4px;
  --my-size-1: 8px;
  --my-size-2: 16px;
  --my-size-3: 24px;
  --my-size-4: 32px;
  --my-size-5: 40px;
  --my-size-6: 48px;
  --my-size-7: 56px;
  --my-size-8: 64px;
  --my-size-9: 72px;
  --my-size-10: 80px;
  --my-size-11: 88px;
  --my-size-12: 96px;
  --my-size-13: 104px;
  --my-size-14: 112px;
  --my-size-15: 120px;
  --my-size-16: 128px;
  --my-size-17: 136px;
  --my-size-18: 144px;
  --my-size-19: 152px;
  --my-size-20: 160px;

  --my-white: #FFFFFF;
  --my-black: #000000;
  --my-dark-blue: #0A00F0;
  --my-mid-blue: #005AFF;
  --my-light-blue: #00B9FF; 
  --my-turquoise: #A7EBFF;
  --my-orange: #F96700; 
  --my-light-orange: #FFB32B; 
  --my-light-green: #87E882;
  --my-green: #38AA32;

  --my-light-blue-shade-900: #04005C;
  --my-light-blue-tint-50: #E5F8FF;
  --my-orange-shade-900: #521000;
  --my-light-orange-tint: #FFF2DB;
  --my-green-shade-900: #004D1F;
  --my-Light-green-tint-50: #EAFBE9;
  --my-Red: #C70000;

  --my-neutral-50 : #F4F5FB; 
  --my-neutral-100: #E0E3EB;
  --my-neutral-200: #CCCFD6;
  --my-neutral-300: #A8AEB6;
  --my-neutral-400: #8C939D;
  --my-neutral-500: #717985;
  --my-neutral-600: #5A616A;
  --my-neutral-700: #424952;
  --my-neutral-800: #2E3339;
  --my-neutral-900: #191E24;

  --my-bg-light-blue: var(--my-light-blue-tint-50);
  --my-bg-light-grey: var(--my-neutral-50);
  --my-bg-brand-blue: var(--my-mid-blue);

  --my-heading-color: var(--my-neutral-900);
  --my-body-color: var(--my-neutral-800);

  --my-border: var(--my-neutral-100);
  --my-border-light: var(--my-neutral-50);

  --my-button-shadow: 0px 2px 4px rgba(25, 30, 36, 0.12);
  --my-button-shadow-hover: 0px 0px 0px rgba(25, 30, 36, 0.12);

  --my-button-text-shadow: 0px 1px 2px rgba(25, 30, 36, 0.2);

  --size-body: 17px;
  --size-button-text: 18px;
  --size-button-text-small: 16px;

  --transition: 0.4s ease;

}


@font-face {
  font-family: 'GT Eesti Display';
  src: url('fonts/GTEestiDisplay-Medium.woff2') format('woff2'),
      url('fonts/GTEestiDisplay-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Eesti Display';
  src: url('fonts/GTEestiDisplay-Medium.woff2') format('woff2'),
      url('fonts/GTEestiDisplay-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Eesti Display';
  src: url('fonts/GTEestiDisplay-Regular.woff2') format('woff2'),
      url('fonts/GTEestiDisplay-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Eesti Display';
  src: url('fonts/GTEestiDisplay-RegularItalic.woff2') format('woff2'),
      url('fonts/GTEestiDisplay-RegularItalic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}





@font-face {
  font-family: 'GT Eesti Text';
  src: url('fonts/GTEestiText-Light.woff2') format('woff2'),
      url('fonts/GTEestiText-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Eesti Text';
  src: url('fonts/GTEestiText-BoldItalic.woff2') format('woff2'),
      url('fonts/GTEestiText-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GT Eesti Text';
  src: url('fonts/GTEestiText-Bold.woff2') format('woff2'),
      url('fonts/GTEestiText-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Eesti Text';
  src: url('fonts/GTEestiText-LightItalic.woff2') format('woff2'),
      url('fonts/GTEestiText-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}


html, body
{
  font-family: 'GT Eesti Text', sans-serif;
  margin-block-start: 0;
  margin-block-end: 0.66ch;
  color: var(--my-body-color);
}

h1, h2, h3, h4, h5, h6
{
  font-family: 'GT Eesti Display', sans-serif;
  margin-block-start: 0;
  margin-block-end: 0.66ch;
  color: var(--my-heading-color);
}

h1
{
  font-size: 3rem !important; /*48px*/
  line-height: 1.15;
}

h2
{
  font-size: 2.5rem !important; /*40px*/
  line-height: 1.2;
}

h3
{
  font-size: 2rem !important; /*32*/
  line-height: 1.25;
}

h4
{
  font-size: 1.5 !important; /*24px*/
  line-height: 1.35;
}

h5
{
  font-size: 1.25 !important; /*20px*/
  line-height: 1.4;
}

h6
{
  font-size: 1 !important; /*16px*/
  line-height: 1.4;
}

        @media screen and (max-width: 640px){
          h1
          {
            font-size: 2rem !important; /*48px*/
            line-height: 1.15;
          }

          h2
          {
            font-size: 1.75rem !important; /*48px*/
            line-height: 1.15;
          }

          h3
          {
            font-size: 1.5rem !important; /*48px*/
            line-height: 1.15;
          }  
          
          h4
          {
            font-size: 1.25rem !important; /*48px*/
            line-height: 1.15;
          }

          h5
          {
            font-size: 1rem !important; /*48px*/
            line-height: 1.15;
          }

          h6
          {
            font-size: 0.875rem !important; /*48px*/
            line-height: 1.15;
          }
        }


p
{
  font-size: 1.063rem  !important; /*17px*/
  line-height: 1.4;
}

p.large
{
  font-size: 1.125rem  !important; /*18px*/
  line-height: 1.5;
}

p.small
{
  font-size: 0.938rem  !important; /*15px*/
}

p.xsmall
{
  font-size: 0.813rem  !important; /*13px*/
}