:root {
  --main: #1c1f2e;
  --secondary: #2b2d42;
  --third: #e41d60;
  --cp1: #F0ECE3;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body { min-height: 100dvh; max-width: 100dvw; overflow: hidden;}
body { 
  width: 100dvw;
  background-color: var(--main);
  display: flex; 
  flex-direction: column;
  align-items: center;
}
header, main, footer { width: 80%; }

h1,h2,h3,p { color: var(--cp1) }

.text-xs	{
  font-size: 0.75rem; /* 12px */
  line-height: 1rem; /* 16px */
}

.text-sm	{
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
}

.text-base	{
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px */
}

.text-lg	{
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem; /* 28px */
}

.text-xl	{
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
}

.text-2xl	{
  font-size: 1.5rem; /* 24px */
  line-height: 2rem; /* 32px */
}

.hero {
  gap: 2vw;
  padding-left: 5vw;
  padding-right: 5vw;
  margin-bottom: 2.5vh;
  min-height: 100vh;
  display: grid;
  align-items: center;
}

.hero-flex {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 1.2rem;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 25px;
  border-radius: 5px;
  background-color: rgba(19, 19, 29, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: heroFadeIn .5s ease-in-out;
}