* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  --background-color: #1a1a1d;
  --text-color: #f5f5f5;
  --svg-stroke: #f5f5f5;
  --primary-color: #5b9cff;
  --error-color: #dc3545;
  --warning-color: #ffc107;
  --focus-outline: #ffbe5b;
  --layer-color: rgba(255, 255, 255, 0.1);
  --border-color: rgba(255, 255, 255, 0.2);
  --primary-font: 'Poppins', sans-serif;
  --primary-body-font-size: 1rem;
  --primary-heading-font-size: 2.5rem;
  --section-heading-font-size: 2rem;
  --sub-heading-font-size: 1.5rem;
  --border-radius: 10px;
  --border-radius-small: 3px;
}

body {
  margin: unset;
  padding: unset;
  min-height: 100svh;
  background-color: var(--background-color);
  overflow: hidden;
}

#root {
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
th,
td button {
  /* Default styling for text within the app */
  margin: unset;
  color: var(--text-color);
  font-family: var(--primary-font);
  font-size: var(--primary-body-font-size);
}

button,
a.button {
  appearance: none;
  outline: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--border-radius);
  background-color: var(--primary-color);
  color: var(--background-color);
  border: 1px solid var(--border-color);
  text-transform: capitalize;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.2s ease-in-out;
}
button svg > *,
a.button svg > * {
  --svg-stroke: var(--background-color);
}
button.secondary,
a.button.secondary {
  background-color: var(--background-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}
button.secondary svg > *,
a.button.secondary svg > * {
  --svg-stroke: var(--primary-color);
}
button.icon,
a.button.icon {
  background-color: transparent;
  color: var(--text-color);
  border: 0px;
  padding: 0px 10px 0px 10px;
}
button.icon svg > *,
a.button.icon svg > * {
  --svg-stroke: var(--text-color);
}
button:hover,
a.button:hover {
  filter: brightness(1.2);
}
button:active,
a.button:active {
  filter: brightness(0.8);
}
button:disabled,
a.button:disabled {
  filter: grayscale(1);
  cursor: not-allowed;
}
button:focus-visible,
a.button:focus-visible {
  outline: 3px solid var(--focus-outline);
}

input[type=text] {
  appearance: none;
  outline: transparent;
  padding: 5px 15px;
  border-radius: var(--border-radius-small);
  border: 1px solid var(--border-color);
  background-color: var(--layer-color);
  color: var(--text-color);
}
input[type=text]:focus {
  border-color: var(--primary-color);
}
input[type=text]:invalid {
  border-color: var(--error-color);
}

h1 {
  font-size: var(--primary-heading-font-size);
  font-weight: 700;
}

h2 {
  font-size: var(--section-heading-font-size);
  font-weight: 700;
}

h3 {
  font-size: var(--sub-heading-font-size);
}

body {
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 0;
  background-image: url("https://source.unsplash.com/Xu4Pz7GI9JY");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
}

nav {
  width: 100vw;
}
nav > .nav-contents {
  max-width: 1920px;
  margin-inline: auto;
  padding: 10px 20px;
}
nav > .nav-contents > a {
  display: contents;
}

main {
  flex: 1 1 0;
  overflow-y: auto;
}

footer {
  background-color: var(--layer-color);
}
footer > .footer-contents {
  max-width: 1920px;
  margin-inline: auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}