:root {
  --summer: #f2f012;
  --summer-translucent: rgba(242, 240, 18, 0.7);
  --summer-sun: #f7c21e;
  --summer-dark: #f0d912;
  --summer-sun-dark: #f0b523;
}

body, html {
  min-height: 100vh;
  font-size: 16.8px;
  font-weight: 360;
  scroll-behavior: smooth;
}

html, body.os-host > .os-padding > .os-viewport {
    scroll-behavior: smooth
}

.text-container {
  max-width: 1088px;
  padding: 20px;
  margin: auto;
}

.navbar {
  position: fixed !important;
  width: 100%;
}

.wrapper {
  margin-top: 92px; /* exact height of the navbar */
}

hr {
  background-color: #777;
  border-color: #777;
  color: #777;
}

/* Custom background colors */

.bg-black {
  background-color: #16181a !important;
}
a.bg-black:focus, a.bg-black:hover, button.bg-black:focus, button.bg-black:hover {
  background-color: #0a0c0e !important;
}

.bg-light-gray {
  background-color: #e6eaf0 !important;
}
a.bg-light-gray:focus, a.bg-light-gray:hover, button.bg-light-gray:focus, button.bg-light-gray:hover {
  background-color: #d0dfd7 !important;
}

.bg-translucent-white {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

.bg-translucent-danger {
  background-color: rgba(220, 53, 69, 0.7) !important;
}

/* The special summer color */

.bg-summer {
  background-color: var(--summer) !important;
}
a.bg-summer:focus, a.bg-summer:hover, button.bg-summer:focus, button.bg-summer:hover {
  background-color: var(--summer-sun) !important;
}
.bg-translucent-summer {
  background-color: var(--summer-translucent) !important;
}
.text-summer {
  color: var(--summer) !important
}
a.text-summer:focus, a.text-summer:hover {
  color: var(--summer-sun) !important
}
.text-dark-summer {
  color: var(--summer-dark) !important
}
a.text-dark-summer:focus, a.text-dark-summer:hover {
  color: var(--summer-sun-dark) !important
}
.text-translucent-summer {
  color: var(--summer-translucent) !important;
}


/* Custom text colors */

.text-light-blue {
  color: #4fe3ff !important;
}
a.text-light-blue:focus, a.text-light-blue:hover {
  color: #03b9ff !important;
}

/* Custom text environments */
.centeredtitle {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

.thin {
  font-weight: 300;
  line-height: 1.2;
}

.display-5 {
  font-size: 2.7rem;
  font-weight: 300;
  line-height: 1.2;
}