:root{
  --blue-500: #00aeef;
  --yellow-dark: #FFC72C;
  --dark-green: #033646;
  --green-black: #021E26;
}


.background-image-centered{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


.bg-none{ background-color: transparent; }
.bg-dark-green{ background-color: var(--dark-green); }
.bg-yellow-dark{ background-color: var(--yellow-dark); }
.bg-blue-500{ background-color: var(--blue-500); }
.bg-green-black{ background-color: var(--green-black); }

.text-dark-green{ color: var(--dark-green); }
.text-yellow-dark{ color: var(--yellow-dark); }
.text-blue-500{ color: var(--blue-500); }
.text-green-black{ color: var(--green-black); }
.text-white{ color:rgb(255, 255, 255); }
.text-black{ color:rgb(0, 0, 0); }


/* FONT FAMILY  */
.font-graphik { font-family: "graphik"; }


/* PADDING */

/* .p-0\.5{ padding: 8px; } */
.p-0{ padding: 0px; }
.p-2 { padding: 0.5rem; }
.p-2\.5 { padding: 0.625rem; }
.p-3 { padding: 0.75rem; } /* 12px */
.p-4{ padding: 1rem; } /* 16px */
.p-5{ padding: 1.25rem; }
.p-6{ padding: 1.5rem; } /* 24 px */
.p-7{ padding: 1.75rem; }
.p-7\.5{ padding: 1.875rem; } /* 30px */
.p-8{ padding: 2rem; } /* 32px */
.p-10{ padding: 2.5rem; } /* 40px */
.p-12{ padding: 3rem; } /* 48px */


.pb-7\.5{ padding-bottom: 1.875rem; } /* 30px */
.pb-10{ padding-bottom: 2.5rem; } /* 30px */
.pb-4{ padding-bottom: 1rem; } /* 16px */
.pb-8{ padding-bottom: 2rem; } /* 32px */
.pb-12{ padding-bottom: 3rem; } /* 48px */
.pb-16{ padding-bottom: 4rem; } /* 64px */



.pt-4{ padding-top: 1rem; } /* 16px */
.pt-8{ padding-top: 2rem; } /* 32px */
.pt-12{ padding-top: 3rem; } /* 48px */
.pt-16{ padding-top: 4rem; } /* 64px */

.px-0{ padding-left: 0px; padding-right: 0px; }
.px-2{ padding-left: 8px; padding-right: 8px; }
.px-3{ padding-left: 12px; padding-right: 12px; }
.px-4{ padding-left: 1rem; padding-right: 1rem ; }
.px-5{ padding-left: 1.25rem; padding-right: 1.25rem ; }
.px-6{ padding-left: 1.5rem ; padding-right: 1.5rem ; }
.px-7{ padding-left: 1.75rem ; padding-right: 1.75rem ; }
.px-7\.5{ padding-left: 1.875rem; padding-right: 1.875rem; } /* 30px */
.px-8{ padding-left: 2rem; padding-right: 2rem ; }

.py-0{ padding-top: 0px ; padding-bottom: 0px; }
.py-2{ padding-top: 8px; padding-bottom: 8px; }
.py-2\.5{ padding-top: 10px; padding-bottom: 10px; }
.py-3{ padding-top: 12px; padding-bottom: 12px; }
.py-4{ padding-top: 1rem; padding-bottom: 1rem; }
.py-5{ padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6{ padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-7{ padding-top: 1.75rem; padding-bottom: 1.75rem; }
.py-7\.5{ padding-top: 1.875rem; padding-bottom: 1.875rem; } /* 30px */
.py-8{ padding-top: 2rem; padding-bottom: 2rem; }





/* MARGIN  */

.m-0{ margin: 0px; }
.m-2{ margin: 8px; }
.m-2\.5{ margin: 10px; }
.m-3{ margin: 12px; }
.m-4{ margin: 1rem; } /* 16px */
.m-5{ margin: 1.25rem; }
.m-6{ margin: 1.5rem; }
.m-7{ margin: 1.75rem; }
.m-8{ margin: 2rem; }

.mb-0{ margin-bottom: 0px; }
.mb-2{ margin-bottom: 8px; }
.mb-2\.5{ margin-bottom: 10px; }
.mb-3{ margin-bottom: 12px; }
.mb-4{ margin-bottom: 1rem; } /* 16px */
.mb-5{ margin-bottom: 1.25rem; }
.mb-6{ margin-bottom: 1.5rem; }
.mb-7{ margin-bottom: 1.75rem; }
.mb-8{ margin-bottom: 2rem; }







/* FONT SIZE */
.text-4 { font-size: 1rem; }
.text-5 { font-size: 1.25rem; }
.text-5\.5 { font-size: 1.375rem; }
.text-6 { font-size: 1.5rem; }
.text-7 { font-size: 1.75rem; }
.text-8 { font-size: 2rem; } /* 32px */
.text-9 { font-size: 36px; } /* 36px */
.text-10 { font-size: 2.5rem; } /* 40px */
.text-12 { font-size: 3rem; } /* 48px */

.font-thin{ font-weight: 100; }
.font-extralight { font-weight: 200; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }