:root {
 --background-light: #f9f9f9;
 --text-primary-light: #222222;
 --text-secondary-light: #4a4a4a;
 --accent-light: #007aff;
 --border-light: #e0e0e0;
 --shadow-light: rgba(0, 0, 0, 0.1);

 --background-dark: #1a1a1a;
 --text-primary-dark: #f5f5f5;
 --text-secondary-dark: #cccccc;
 --accent-dark: #00bfff;
 --border-dark: #333333;
 --shadow-dark: rgba(255, 255, 255, 0.1);

 --font-stack: Chalkboard, ChalkboardSE-Regular, ChalkboardSE, ChalkDuster, Comic Sans MS, comic-sans, sans-serif;
}

h1 {
 font-size: 3rem;
}

a {
 color: unset;
}

/* Light Theme */
body {
 background-color: var(--background-light);
 color: var(--text-primary-light);
 font-family: var(--font-stack);
}

body a:hover {
 color: var(--accent-light);
}

button {
 /* Remove all default styling */
 background: none;
 border: none;
 padding: 0;
 margin: 0;
 font: inherit;
 color: inherit;
 cursor: pointer;
 outline: none;

 /* Fix for odd text sizing in some browsers */
 line-height: normal;

 /* Prevent text selection */
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;

 /* Remove default focus styles */
 -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
 outline: 2px solid #4d90fe;
 outline-offset: 2px;
}

button::-moz-focus-inner {
 border: 0;
 padding: 0;
}

body button {
 background: none;
 color: unset;
}
body button:hover {
 color: var(--accent-light);
}

body .secondary-text {
 color: var(--text-secondary-light);
}

body .border {
 border-color: var(--border-light);
}

body .shadow {
 box-shadow: 0 2px 4px var(--shadow-light);
}

svg.logo {
 height: 60vh;
 width: 60vh;
 margin-bottom: -10vh;
 margin-top: -10vh;
}

html {
 height: 100%;
 width: 100%;
}

body {
 overflow-x: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 height: 100%;
 width: 100%;
 margin: auto;
 text-align: center;
}

.links {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 margin: 0 1.25rem;
 gap: 1.25rem;
}

.links svg {
 height: 2.5rem;
 width: 2.5rem;
 vertical-align: middle;
}

body a[title="bluesky"]:hover {
 color: #0085ff;
}

body a.semble-link:hover {
 color: #ff6400;
}

.semble-link svg {
 width: auto;
}

.leaflet-link svg {
 width: auto;
}

body a.leaflet-link:hover {
 color: #639431;
}

@media (prefers-color-scheme: dark) {
 body {
  background-color: var(--background-dark);
  color: var(--text-primary-dark);
  font-family: var(--font-stack);
 }

 body a:hover {
  color: var(--accent-dark);
 }

 body .secondary-text {
  color: var(--text-secondary-dark);
 }

 body .border {
  border-color: var(--border-dark);
 }

 body .shadow {
  box-shadow: 0 2px 4px var(--shadow-dark);
 }

 body a[title="bluesky"]:hover {
  color: #0085ff;
 }

 body a.semble-link:hover {
  color: #ff6400;
 }

 body a.leaflet-link:hover {
  color: #639431;
 }

 .leaflet-inner {
  fill: var(--background-dark);
 }
}

.bluesky-flutter {
 display: flex;
 gap: 0.5em;
 align-items: center;
}

.bluesky-flutter svg {
 width: 2em;
 height: 2em;
 transition: 200ms;
}

.bluesky-flutter .left {
 transform-origin: center;
}
.bluesky-flutter .right {
 transform-origin: center;
 transform: scale(-1, 1);
}
.bluesky-flutter:hover .left,
.bluesky-flutter:focus .left {
 animation: flutter 430ms ease-in-out;
 --flip: 1;
}
.bluesky-flutter:hover .right,
.bluesky-flutter:focus .right {
 animation: flutter 500ms ease-in-out;
 --flip: -1;
}
.bluesky-flutter:hover svg,
.bluesky-flutter:focus svg {
 transform: rotate(-5deg);
 transition: 500ms;
}

@media (prefers-reduced-motion) {
 .bluesky-flutter:hover .left,
 .bluesky-flutter:focus .left,
 .bluesky-flutter:hover .right,
 .bluesky-flutter:focus .right {
  animation: none;
 }
}

@keyframes flutter {
 10% {
  transform: scale(calc(var(--flip) * 1), 0.9);
 }
 20% {
  transform: scale(calc(var(--flip) * 0.5), 1);
 }
 40% {
  transform: scale(calc(var(--flip) * 0.9), 0.95);
 }
 60% {
  transform: scale(calc(var(--flip) * 0.3), 1);
 }
 80% {
  transform: scale(calc(var(--flip) * 0.9), 0.95);
 }
 100% {
  transform: scale(calc(var(--flip) * 1), 1);
 }
}