main.css

@import url('https://fonts.googleapis.com/css2?family=Catamaran&family=Nunito+Sans:wght@700&family=Vujahday+Script&display=swap');

:root {
  --primary-one: #c53058;
  --primary-two: #aa284b;
  --accent-one: #249369;
  --accent-two: #107b53;
  --base-one: #1c1917;
  --base-two: #292524;
  --base-three: #404040;
  --base-four: #a8a29e;
  --base-five: #d4d4d4;
  --base-six: #f5f5f5;
  --black: var(--base-one);
  --white: #fff;

  --bg: var(--base-six);

  --text-color-strong: var(--primary-one);
  --text-color-medium: var(--base-two);
  --text-color-light: var(--base-three);
  --text-color-deemphasized: var(--base-four);

  --text-shadow-dark: 1px 1px 2px rgba(0, 0, 0, 0.2);

  --border-width: 1px;
  --border-radius: 8px;
  --grid-md: 15px;
  --grid-sm: 10px;
  --grid-xs: 5px;

  --base-font-size: 18px;

  --screen-sm: 600px;
  --screen-md: 768px;
  --screen-lg: 992px;
  --screen-xl: 1200px;

  --transition: all 0.2s ease-in-out;
}

@media (prefers-color-scheme: dark) {
  :root {
    --base-one: #f5f5f5;
    --base-two: #d4d4d4;
    --base-three: #a8a29e;
    --base-four: #404040;
    --base-five: #292524;
    --base-six: #1c1917;
    --white: var(--base-five);

    --text-color-strong: var(--base-one);
    --text-color-medium: var(--base-two);
    --text-color-light: #fff;
    --text-color-deemphasized: #374a57;
  }
}

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

html {
  font-size: 20px;
  font-weight: 300;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
  line-height: 1.5;
}

body {
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text-color-medium);
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--text-color-medium);
  font-family: Futura PT, 'Nunito Sans', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1 {
  color: var(--text-color-strong);
}

.mono {
  font-family: monospace;
}

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

a {
  color: var(--primary-one);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--primary-two);
  text-decoration: underline;
}

button:hover {
  cursor: pointer;
}

button:focus {
  box-shadow: 0 0 0 3px rgba(197, 48, 88, 0.75);
}

button:focus-visible {
  outline: 0;
}

.input-location-filter {
  position: absolute;
  top: var(--grid-md);
  right: var(--grid-md);
  border-radius: var(--border-radius);
  padding: var(--grid-sm);
  border: 3px solid transparent;
  outline: none;
}

.input-location-filter:focus,
.input-location-filter:active {
  border: 3px solid var(--primary-two);
}

/* Layout */
aside {
  position: absolute;
  width: 0px;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
}
@media (min-width: 600px) {
  aside {
    width: 25%;
  }
}

aside header {
  padding: var(--grid-md);
}

.item {
  padding: var(--grid-md);
  border-bottom: var(--border-width) solid var(--base-five);
  text-decoration: none;
}

.logs {
  height: 100%;
  overflow: auto;
  padding-bottom: 110px;
}

.logs .item:last-child {
  border-bottom: none;
}

.item .title {
  display: block;
  font-size: 1.2em;
  font-weight: 700;
}

.logs .item.active .title,
.logs .item .title:hover {
  color: var(--primary-two);
}

.label {
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
}

.logs .item.active {
  background-color: var(--base-five);
}

.header {
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  background: var(--base-six);
  padding: var(--grid-sm) var(--grid-md);
  border-bottom: var(--border-width) solid var(--base-five);
}

.description {
  display: flex;
  justify-content: space-between;
}

::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  border-left: 0;
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: var(--primary-two);
  border-radius: var(--border-radius);
}

/* Map Styles */
#map {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  bottom: 0;
}
@media (min-width: 600px) {
  #map {
    left: 25%;
    width: 75%;
  }
}

.mapboxgl-popup {
  top: -40px;
}

.mapboxgl-popup-close-button {
  font-size: 18px;
  padding: var(--grid-sm);
  border-top-right-radius: var(--border-radius);
}

.mapboxgl-popup-content {
  padding: 0;
  width: auto;
  border-radius: var(--border-radius);
}

.mapboxgl-popup-content h2 {
  color: #333;
  margin: 10px 38px 10px 10px;
  font-weight: 700;
  font-size: 18px;
}

.mapboxgl-popup-content p {
  margin: var(--grid-sm);
  color: #292524;
  font-size: 16px;
}

.mapboxgl-popup-content p.description,
.mapboxgl-popup-content p.date {
  color: #626262;
}

.mapboxgl-popup-content i {
  color: var(--primary-one);
}

.marker {
  border: none;
  cursor: pointer;
  height: 40px;
  width: 25px;
  background-image: url('./marker-icons/mapbox-marker-icon-green.svg');
}

.marker-national-park {
  background-size: cover;
  width: 28px;
  height: 36px;
  background-image: url('./marker-icons/mapbox-marker-icon-national-park.svg');
}

.marker-scenic-point {
  background-image: url('./marker-icons/mapbox-marker-icon-green.svg');
}

.marker-alpine-skiing {
  background-size: cover;
  width: 35px;
  height: 40px;
  background-image: url('./marker-icons/mapbox-marker-icon-snow.png');
}

.marker-camp-site {
  background-size: cover;
  width: 35px;
  height: 40px;
  background-image: url('./marker-icons/mapbox-marker-icon-camp-site.svg');
}

.marker-golf-course {
  background-size: cover;
  width: 30px;
  height: 30px;
  background-image: url('./marker-icons/mapbox-marker-icon-golf-course.png');
}

.marker-pga {
  background-size: cover;
  width: 30px;
  height: 35px;
  background-image: url('./marker-icons/mapbox-marker-icon-pga-tour.svg');
}