:root {
  --blu-900: #161a20ff;
  --blu-900-opacity-500: rgba(14, 22, 28, 0.5);
  --blu-800: #1b2a38ff;
  --blu-800-opacity-500: rgba(27, 42, 56, 0.5);
  --blu-700: #2b4156ff;
  --blu-700-opacity-500: rgba(61, 96, 128, 0.5);
  --blu-600: #3d6080ff;
  --blu-600-opacity-500: rgba(61, 96, 128, 0.5);
  --light-brown-900: #f5f0e6ff;
  --light-brown-800: rgb(211, 202, 185);
  --light-brown-700: rgb(170, 158, 140);
  --light-brown-600: rgb(130, 119, 103);

  --navbar-height: 60px;
  --navbar-bg-color: var(--blu-800);

  --sidemenu-width: 300px;
  --sidemenu-bg-color: var(--navbar-bg-color);

  --footer-bg-color: var(--blu-700);
  --sub-footer-bg-color: var(--blu-700);

  --accent-color: rgb(246, 245, 242);
}

@font-face {
  font-family: "MontSerrat";
  src: url("/fonts/montserrat.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: optional;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Montserrat, Arial, sans-serif;
}

body {
  background-color: var(--blu-900);
  color: var(--light-brown-800);
  font-size: 16px;
  line-height: 1.5;
}

.no-scroll {
  height: 100vh;
  overflow: hidden;
}

a {
  text-decoration: none;
}

svg {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 32px auto;
  padding: 0 32px;
}
ul,
ol {
  padding-left: 20px;
  margin-bottom: 16px;
}