/* ================ VARIABLES ================ */
:root {
  --primary: #cc1616;
  --secondary: #3a3a3a;
  --white: #ffffff;
  --black: #111111;
  --border-radius: 10px;
  --transition: 0.3s ease-in-out;
}

/* ================ FONTS ================ */
* {
  font-family: nexa, sans-serif;
}

/* ================ COLORS ================ */

.text-primary {
  color: var(--primary);
}

.text-secondary {
  color: var(--secondary);
}

.bg-primary {
  background-color: var(--primary);
}

.bg-secondary {
  background-color: var(--secondary);
}

/* ================ BUTTONS ================ */

.btn-primary {
  background-color: var(--primary);
  padding: 10px 25px;
  color: var(--white);
  transition: var(--transition);
  border-radius: var(--border-radius);
}

.btn-primary:hover {
  opacity: 0.5;
}

.btn-white {
  background-color: var(--white);
  padding: 10px 25px;
  color: var(--primary);
  transition: var(--transition);
  border-radius: var(--border-radius);
}

.btn-white:hover {
  opacity: 0.5;
}

.btn-secondary {
  background-color: var(--secondary);
}

.btn-secondary:hover {
}

/* ================ LINKS ================ */

a {
  transition: var(--transition);
}

a:hover:not(:has(img)) {
  opacity: 0.5;
}

.link-header {
  color: var(--black);
  text-decoration: none;
  background-image: linear-gradient(var(--primary), var(--primary));
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 100%;
  background-repeat: no-repeat;
  transition: background-size var(--transition);
}

.link-header:hover,
.link-header:focus,
.link-header:active,
.link-header.active {
  background-size: 100% 0.1em;
  background-position-x: 0%;
}

.link-header-hero {
  color: var(--white);
  text-decoration: none;
  background-image: linear-gradient(var(--white), var(--white));
  background-size: 0% 0.1em;
  background-position-y: 100%;
  background-position-x: 100%;
  background-repeat: no-repeat;
  transition: background-size var(--transition);
}

.link-header-hero:hover,
.link-header-hero:focus,
.link-header-hero:active,
.link-header-hero.active {
  background-size: 100% 0.1em;
  background-position-x: 0%;
}

/* ================ CONTENT ================ */

.content-box p {
  text-align: justify;
}

.content-box h1 {
  font-size: 28px;
  margin-bottom: 15px;
}

.content-box h2 {
  font-size: 24px;
  margin-bottom: 12px;
  margin-top: 15px;
}

.content-box h3 {
  font-size: 20px;
  margin-bottom: 10px;
  margin-top: 15px;
}

.content-box h4 {
  font-size: 18px;
  margin-bottom: 8px;
}

.content-box h5 {
  font-size: 16px;
  margin-bottom: 6px;
}

.content-box h6 {
  font-size: 14px;
  margin-bottom: 4px;
}

.content-box ol,
.content-box ul {
  margin-bottom: 15px;
}

.content-box ol {
  list-style-type: decimal;
}

.content-box ul {
  list-style-type: disc;
}

.content-box li {
  margin-left: 20px;
}

.content-box ul ul,
.content-box ol ol,
.content-box ul ol,
.content-box ol ul {
  margin-left: 20px;
}

/* ================ ANIMATION ================ */

.hero-zoom {
  animation: heroZoom 10s ease-in-out infinite;
}

@keyframes heroZoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}