:root {
  --enphasys_color: #FF196C;
  --white_color: #ffffff;

  --blue-100: #87A9FC;
  --blue-200: #5F8DFC;
  --blue-300: #2A67FB;
  --blue-400: #0E4DF1;
  --blue-500: #083AB5;

  --darkblue-100: #5E6C97;
  --darkblue-200: #485484;
  --darkblue-300: #384271;
  --darkblue-400: #282D58;
  --darkblue-500: #1A1A3D;

  --lightblue-100: #F2F4FC;
  --lightblue-200: #E6EAF9;
  --lightblue-300: #D0D7F0;
  --lightblue-400: #B9C1E4;
  --lightblue-500: #ABB2D9;

  --m1-000: #F9E8E8;
  --m1-100: #BE1311;
  --m1-200: #A41210;

  --m2-000: #ECE5F9;
  --m2-000: #4400BD;
  --m2-000: #3C06A4;

  --m3-000: #E6F4F9;
  --m3-000: #0992BB;
  --m3-000: #0B7EA3;

  --m4-000: #E5F7F3;
  --m4-100: #00B787;
  --m4-200: #049E76;

  --m5-000: #F4F8E6;
  --m5-000: #95BB00;
  --m5-000: #7D9A0A;

  --m6-000: #FEF6E6;
  --m6-000: #F9A700;
  --m6-000: #D89000;

  --m7-000: #FBECF4;
  --m7-000: #E0428F;
  --m7-000: #C23A7C;

  --m8-000: #FEF2E8;
  --m8-000: #F67F10;
  --m8-000: #D76D0B;

  --purple-gradient: linear-gradient(to right, #A41210, #6C71ED);

  --cold-gradient: linear-gradient(to right, #32BDFF, #E9F8FF);

}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: 100%;
}

h1,
h2 {
  font-family: 'Dela Gothic One';
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
}

p, h3, a {
  font-family: 'Poppins', sans-serif;
}