@font-face {
  font-family: "Montserrat";
  src: url("/src/assets/fonts/Montserrat-VariableFont_wght.ttf");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url("/src/assets/fonts/Roboto-VariableFont_wdth\,wght.ttf");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Exo 2";
  src: url("/src/assets/fonts/Exo2-VariableFont_wght.ttf");
  font-weight: 100 900;
  font-style: normal;
}

:root {
  --primary-color: #ffc733;
  --primary-color-hover: #cc9e28;
  --primary-color-active: #b38922;
  --primary-color-metallic: #d4b45a;
  --secondary-color: #ffffff;
  --secondary-color-hover: #f2f2f2;
  --secondary-color-active: #e6e6e6;
  --background-global-color: #1a1a1a;
  --background-main-color: #0f0f0f;
  --background-credits-developer-color: #141414;
  --medium-gray: #2b2b2b;
  --light-gray: #666666;
  --light-gray-hover: #5a5a5a;
  --light-gray-active: #4d4d4d;
  --very-light-gray: #a6a6a6;
  --ultra-light-gray: #cccccc;
  --gradient-title-color: linear-gradient(
    135deg,
    #f8f8f8 0%,
    #e0e0e0 50%,
    #ffffff 100%
  );
  --blend-black: rgba(0, 0, 0, 0.75);
  --button-green-color: #008901;
  --button-green-color-hover: #006f01;
  --button-green-color-active: #005501;
}

html {
  scroll-behavior: smooth;
}

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

body {
  width: 100%;
  height: 100%;
  font-family: "Roboto", sans-serif;
  background-color: var(--background-global-color);
  color: var(--secondary-color) !important;
}

header,
nav {
  background-color: var(--background-global-color);
}

section {
  scroll-margin: 0.75rem;
}

#faq {
  scroll-margin: 8.75rem;
}

h1 {
  font-family: "Exo 2", sans-serif;
  background: var(--gradient-title-color);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
  font-family: "Montserrat", sans-serif;
  color: var(--primary-color) !important;
}

h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
  color: var(--ultra-light-gray) !important;
}

span {
  font-weight: bold;
  color: var(--primary-color);
}

strong {
  color: var(--primary-color);
}

.navbar-custom {
  background-color: var(--background-global-color);
}

.navbar-brand img {
  width: 54px;
  height: auto;
}

button.navbar-toggler span {
  font-size: 1.75rem;
  color: var(--secondary-color);
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
  color: var(--secondary-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s ease-in-out;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.navbar-custom .nav-link .material-symbols-outlined {
  transition: color 0.3s ease-in-out !important;
}

.navbar-custom .navbar-brand:hover,
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:hover .material-symbols-outlined {
  color: var(--primary-color);
}

.offcanvas-end {
  width: 60% !important;
  right: 0;
  left: auto;
  border-radius: 0.5rem 0 0 0.5rem;
}

.offcanvas-header {
  background-color: var(--background-global-color);
  color: var(--primary-color);
}

.offcanvas-header .btn-close {
  filter: invert(100%);
}

.offcanvas-body {
  background-color: var(--background-global-color);
  padding: 1rem;
}

.offcanvas-body a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--secondary-color);
  text-decoration: none;
  padding: 10px 0;
  transition: color 0.3s ease-in-out;
}

.offcanvas-body a i,
.offcanvas-body a .material-symbols-outlined {
  font-size: 1.2rem;
  transition: color 0.3s ease-in-out !important;
}

.offcanvas-body a:hover,
.offcanvas-body a:hover i,
.offcanvas-body a:hover .material-symbols-outlined {
  color: var(--primary-color);
}

.divider {
  background-color: var(--primary-color-metallic);
  width: 100%;
  height: 1px;
}

.footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  background-color: var(--background-global-color);
  color: var(--secondary-color-active);
}

.footer-content {
  padding: 1rem 1.5rem;
  text-align: center;
}

.credits-developer {
  width: 100%;
  padding: 0.65rem;
  background-color: var(--background-credits-developer-color);
  text-align: center;
}

.credits-developer .profile {
  font-weight: 600;
  text-decoration: none;
  color: var(--ultra-light-gray);
}

.profile:hover {
  color: var(--very-light-gray);
}

.profile:active {
  color: var(--light-gray-active);
}

@media (min-width: 710px) {
  section {
    scroll-margin: 12rem;
  }

  #faq {
    scroll-margin: 17rem;
  }

  .offcanvas-end {
    max-width: 35% !important;
  }
}

@media (min-width: 992px) {
  .offcanvas-end {
    max-width: 25% !important;
  }
}

@media (min-width: 1200px) {
  .offcanvas-end {
    max-width: 20% !important;
  }
}

@media (min-width: 1400px) {
  .offcanvas-end {
    max-width: 15% !important;
  }
}