/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* ====================================== */
/* Google Fonts */
/* ====================================== */
@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");

/* ============================== */
/* CSS Reset */
/* ============================== */
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* =========================== */
/* Variables */
/* =========================== */
:root {
  --color-primary: #0a352c;
  --color-secondary: #3fc67f;
  --color-white: #f5f5f5;
  --color-black: #151515;

  --color-red: #ff2727;
  --color-gray-light: #dedede;
  --color-gray-transparent: rgba(191, 191, 191, 0.4);
  --color-secondary-light: #60d797;
  --color-red-light: #ff4c4c;

  --font-primary: "Marcellus", serif;
  --font-secondary: "Mulish", sans-serif;
}

/* ========================= */
/* Base Styles */
/* ========================= */
body {
  font-family: var(--font-secondary);
  background-color: var(--color-white);
}

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

.navbar .navbar-brand {
  font-weight: bold;
  font-size: 2rem;
  font-style: italic;
}

.container {
  color: var(--color-white);
  max-width: 60rem;
}

.container .navbar-nav {
  gap: 2rem;
  border-bottom: 1px solid transparent;
}

.container .navbar-nav .nav-link {
  color: var(--color-white);
}

.container .navbar-nav .nav-link:hover,
.container .navbar-nav .nav-link.active {
  border-bottom: 1px solid white;
}

.container .navbar-nav .dropdown-toggle {
  color: var(--color-secondary);
}

.container .navbar-nav .dropdown-toggle:hover {
  border-bottom: none;
}

.container .navbar-nav .dropdown-menu {
  background-color: var(--color-secondary);
}

.container .navbar-nav .dropdown-menu .dropdown-item:hover {
  background-color: var(--color-primary);
}

#not-found-header {
  background-color: var(--color-primary);
}

#not-found-header .not-found-btn {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border: none;
}

#not-found-header .not-found-btn:active,
#not-found-header .not-found-btn:hover {
  background-color: var(--color-secondary-light);
}