.form-group {
  background: var(--border);
  padding: 0.25rem 1rem;
  display: block;
  border: 1px solid var(--border);
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  color: var(--text);
}
.form-group label {
  font-size: var(--fs-md);
  color: var(--text-muted);
  display: block;
}
.form-group:focus-within {
  border-color: var(--primary);
}
.form-group:focus-within label {
  color: var(--primary);
}
.form-group:focus-within input:not([type=radio], [type=submit]) {
  color: var(--text);
  font-size: var(--fs);
}
.form-group input:not([type=radio], [type=submit]),
.form-group select {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-muted);
  font-size: var(--fs-md);
  transition: 0.25s;
  width: 100%;
}

.btn {
  border: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  border: 1px solid #ccc;
}
.btn.btn-sm {
  font-size: var(--fs-md);
  padding: 0.35rem 0.5rem;
}
.btn.btn-transparent {
  background-color: transparent;
  border-color: transparent !important;
  transition: 0.25rem;
  color: var(--text);
}
.btn.btn-transparent:hover {
  background-color: var(--highlight);
}

.btn.btn-primary {
  background-color: hsl(195, 67%, 63%);
  color: white;
}
.btn.btn-primary:focus {
  outline: 2px solid hsl(195, 67%, 23%);
  outline-offset: 2px;
}
.btn.btn-primary.btn-outline {
  background-color: transparent;
  border: 2px solid hsl(195, 67%, 63%);
}

.btn.btn-primary.light {
  background-color: hsl(192, 100%, 14%);
  color: white;
  cursor: pointer;
}
.btn.btn-primary.light:focus {
  outline: 2px solid hsl(192, 100%, 4%);
  outline-offset: 2px;
}
.btn.btn-primary.light.btn-outline {
  background-color: transparent;
  border: 2px solid hsl(195, 67%, 63%);
}

.btn.btn-secondary {
  background-color: hsl(17, 69%, 70%);
  color: white;
}
.btn.btn-secondary:focus {
  outline: 2px solid hsl(17, 69%, 30%);
  outline-offset: 2px;
}
.btn.btn-secondary.btn-outline {
  background-color: transparent;
  border: 2px solid hsl(17, 69%, 70%);
}

.btn.btn-secondary.light {
  background-color: hsl(19, 70%, 26%);
  color: white;
  cursor: pointer;
}
.btn.btn-secondary.light:focus {
  outline: 2px solid hsl(19, 70%, 16%);
  outline-offset: 2px;
}
.btn.btn-secondary.light.btn-outline {
  background-color: transparent;
  border: 2px solid hsl(17, 69%, 70%);
}

.btn.btn-danger {
  background-color: hsl(9, 70%, 64%);
  color: white;
}
.btn.btn-danger:focus {
  outline: 2px solid hsl(9, 70%, 24%);
  outline-offset: 2px;
}
.btn.btn-danger.btn-outline {
  background-color: transparent;
  border: 2px solid hsl(9, 70%, 64%);
}

.btn.btn-danger.light {
  background-color: hsl(9, 60%, 50%);
  color: white;
  cursor: pointer;
}
.btn.btn-danger.light:focus {
  outline: 2px solid hsl(9, 60%, 40%);
  outline-offset: 2px;
}
.btn.btn-danger.light.btn-outline {
  background-color: transparent;
  border: 2px solid hsl(9, 70%, 64%);
}

.btn.btn-warning {
  background-color: hsl(52, 19%, 57%);
  color: white;
}
.btn.btn-warning:focus {
  outline: 2px solid hsl(52, 19%, 17%);
  outline-offset: 2px;
}
.btn.btn-warning.btn-outline {
  background-color: transparent;
  border: 2px solid hsl(52, 19%, 57%);
}

.btn.btn-warning.light {
  background-color: hsl(52, 23%, 34%);
  color: white;
  cursor: pointer;
}
.btn.btn-warning.light:focus {
  outline: 2px solid hsl(52, 23%, 24%);
  outline-offset: 2px;
}
.btn.btn-warning.light.btn-outline {
  background-color: transparent;
  border: 2px solid hsl(52, 19%, 57%);
}

.btn.btn-success {
  background-color: hsl(146, 17%, 59%);
  color: white;
}
.btn.btn-success:focus {
  outline: 2px solid hsl(146, 17%, 19%);
  outline-offset: 2px;
}
.btn.btn-success.btn-outline {
  background-color: transparent;
  border: 2px solid hsl(146, 17%, 59%);
}

.btn.btn-success.light {
  background-color: hsl(147, 19%, 36%);
  color: white;
  cursor: pointer;
}
.btn.btn-success.light:focus {
  outline: 2px solid hsl(147, 19%, 26%);
  outline-offset: 2px;
}
.btn.btn-success.light.btn-outline {
  background-color: transparent;
  border: 2px solid hsl(146, 17%, 59%);
}

.btn.btn-info {
  background-color: hsl(217, 28%, 65%);
  color: white;
}
.btn.btn-info:focus {
  outline: 2px solid hsl(217, 28%, 25%);
  outline-offset: 2px;
}
.btn.btn-info.btn-outline {
  background-color: transparent;
  border: 2px solid hsl(217, 28%, 65%);
}

.btn.btn-info.light {
  background-color: hsl(217, 22%, 41%);
  color: white;
  cursor: pointer;
}
.btn.btn-info.light:focus {
  outline: 2px solid hsl(217, 22%, 31%);
  outline-offset: 2px;
}
.btn.btn-info.light.btn-outline {
  background-color: transparent;
  border: 2px solid hsl(217, 28%, 65%);
}

:root {
  --bg-dark: hsl(205, 100%, 1%);
  --bg: hsl(198, 89%, 4%);
  --bg-light: hsl(196, 58%, 8%);
  --text: hsl(197, 100%, 93%);
  --text-muted: hsl(196, 35%, 67%);
  --highlight: hsl(196, 29%, 37%);
  --highlight-dark: hsl(196, 29%, 17%);
  --border: hsl(195, 41%, 25%);
  --border-muted: hsl(194, 76%, 14%);
  --grid-border: hsl(190, 32.2%, 35.41%);
  --primary: hsl(195, 67%, 63%);
  --secondary: hsl(17, 69%, 70%);
  --danger: hsl(9, 70%, 64%);
  --warning: hsl(52, 19%, 57%);
  --success: hsl(146, 17%, 59%);
  --info: hsl(217, 28%, 65%);
  --main-menu-bg: hsl(196, 29%, 20%);
  --main-menu-bg-active: hsl(196, 29%, 33%);
  --fs-sm: 0.6rem;
  --fs-md: 0.75rem;
  --fs: 1rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
}

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

body.light {
  --bg-dark: hsl(197, 51%, 89%);
  --bg: hsl(197, 95%, 94%);
  --bg-light: hsl(197, 100%, 99%);
  --text: hsl(201, 100%, 4%);
  --text-muted: hsl(195, 41%, 25%);
  --highlight: hsl(197, 100%, 98%);
  --highlight-dark: hsl(197, 100%, 78%);
  --border: hsl(196, 23.72%, 87.71%);
  --border-muted: hsl(196, 28%, 60%);
  --grid-border: hsl(190, 38%, 15%);
  --primary: hsl(192, 100%, 14%);
  --secondary: hsl(19, 70%, 26%);
  --danger: hsl(9, 60%, 50%);
  --warning: hsl(52, 23%, 34%);
  --success: hsl(147, 19%, 36%);
  --info: hsl(217, 22%, 41%);
  --main-menu-bg: hsl(196, 66%, 89%);
  --main-menu-bg-active: hsl(196, 80%, 70%);
}

body {
  background-color: var(--bg-light);
  color: var(--text-muted);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

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

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

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

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

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

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

.text-error {
  color: hsl(0, 70%, 50%);
}

/*# sourceMappingURL=style.css.map */