:root {
  /*FONTS FAMILIES*/
  --ff-title: "Heebo", sans-serif;
  --ff-text: "Work Sans", sans-serif;
  /*FONTS*/
  /*--fs-900 = 35px*/
  --fs-900: 2.188rem;
  /*--fs-800 = 29px*/
  --fs-800: 1.813rem;
  /*--fs-700 = 24px*/
  --fs-700: 1.5rem;
  /*--fs-600 = 22px*/
  --fs-600: 1.25rem;
  /*--fs-500 = 17px*/
  --fs-500: 1.063rem;
  /*--fs-400 = 14px*/
  --fs-400: 0.875rem;
  /*--fs-300 = 13px*/
  --fs-300: 0.813rem;
  /*--fs-200 = 12px*/
  --fs-200: 0.75rem;
  /*COLORS*/
  --clr-bg-white: #fff;
  --clr-bg-white-1: #fcfcfc;
  --clr-bg-white-2: #fafafa;
  --clr-bg-white-3: #f7f7f7;
  --clr-bg-white-4: #f1f1f1;
  --clr-bg-dark: #23272a;
  --clr-bg-darkgray: #2c2f33;
  --clr-bg-lightgray: #99aab5;
  --clr-bg-light: #7289da;
  --clr-bg-light-hover: #667BC4;
  --clr-text-white: var(--clr-bg-white);
  --clr-text-dark: var(--clr-bg-dark);
  --clr-text-darkgray: var(--clr-bg-darkgray);
  --clr-text-lightgray: var(--clr-bg-lightgray);
  --clr-text-light: var(--clr-text-light);
  --clr-text-light-hover: var(--clr-bg-light-hover);
  --clr-bg-error: #ee3440;
  --clr-bg-error-hover: #C42B35;
  --clr-text-error: var(--clr-text-white);
  --clr-bg-warning: #ff6200;
  --clr-bg-warning-hover: #C44B00;
  --clr-text-warning: var(--clr-text-white);
  --clr-bg-info: #345378;
  --clr-bg-info-hover: #1D78E0;
  --clr-text-info: var(--clr-text-white);
  --clr-bg-validation: #02a388;
  --clr-bg-validation-hover: #18806E;
  --clr-text-validation: var(--clr-text-white);
  --clr-bg-announce: #854c9e;
  --clr-bg-announce-hover: #A65EC4;
  --clr-text-announce: var(--clr-text-white);
  --clr-bg-blank: var(--clr-text-white);
  --clr-bg-blank-hover: #C4C4C4;
  --clr-text-blank: var(--clr-text-dark);
}

*,
*::before,
*::after {
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--fs-400);
  font-family: var(--ff-text);
}

body {
  width: 100vw;
  margin-inline: auto;
  background-color: var(--clr-bg-white-1);
  color: var(--clr-text-dark);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff-title);
}

h1 {
  font-size: var(--fs-900);
}

h2 {
  font-size: var(--fs-800);
}

h3 {
  font-size: var(--fs-700);
}

h4 {
  font-size: var(--fs-600);
}

h5,
h6 {
  font-size: var(--fs-500);
}

a,
a:visited {
  color: var(--clr-text-light);
}

a:hover {
  color: var(--clr-text-light-hover);
}

.main-content {
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.main-head {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.main-head-title {
  width: 100%;
  text-align: center;
}

.main-nav {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-block: .5rem;
  position: relative;
  z-index: 1;
}

#wrap-menu {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fs-700);
  font-weight: 400;
  margin-inline: auto .5rem;
  background-color: var(--clr-bg-validation);
  color: var(--clr-text-white);
  border: .15rem solid var(--clr-bg-validation);
  border-radius: .25rem;
}

#wrap-menu:hover {
  cursor: pointer;
  border: .15rem solid var(--clr-bg-white-1);
}

.main-menu {
  width: max-content;
  height: auto;
  content-visibility:visible;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: .75rem;
  background-color: var(--clr-bg-white-3);
  border: .1rem solid var(--clr-bg-lightgray);
  border-right: .5rem solid var(--clr-bg-validation-hover);
  border-radius: .25rem .05rem .05rem .25rem;
  overflow: hidden;
  padding-block: 1rem;
  padding-inline: .5rem;
  position: absolute;
  top: 0;
  right: -100vw;
  z-index: 999;
  transition: right .125s ease-in-out;
}

#wrap-menu-close {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fs-400);
  font-weight: 400;
  background-color: var(--clr-bg-error);
  color: var(--clr-text-white);
  border: .15rem solid var(--clr-bg-error);
  border-radius: 50%;
  margin-inline: auto .5rem;
}

#wrap-menu-close:hover {
  cursor: pointer;
  border: .15rem solid var(--clr-bg-white-3);
}

.main-menu-items {
  width: 100%;
  max-width: 50vw;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
}

.main-menu-links {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-block: .25rem;
  padding-inline: .5rem;
  border-radius: .25rem;
  text-decoration: none;
  font-size: var(--fs-500);
  background-color: var(--clr-bg-validation);
  color: var(--clr-text-white);
  transition: background-color .225s ease-out;
}

.main-menu-links:hover {
  cursor: pointer;
  background-color: var(--clr-bg-validation-hover);
  color: var(--clr-text-white);
}