:root {
  --text-main: #000000;
  --text-dark: #333;
  --text-light: #fff;
  --text-primary: #004f9e;
  --text-accent: #ffcc00;

  --background: #f4f4f4;
  --primary: #004f9e;
  --secondary: #dde6ff;
  --dark: #001d3a;
  --light: #f0f0f0;
  --warning: #ff5451;
  --success: #71ff51;
  --accent: #ffcc00;
  --white: #ffffff;

  --title-font: 'Marko One', serif;
  --second-font: normal normal 300 1em 'Roboto', sans-serif;
  --accent-font: normal normal 300 1em 'Roboto Mono', monospace;
}

body {
  font-family: 'Inter', sans-serif;
}

.btn-outline-primary,
.btn-primary:hover {
  color: var(--text-primary);
  border-color: var(--primary);
  background-color: var(--white);
}

.btn-outline-primary:hover,
.btn-primary,
.btn-primary-accent {
  color: var(--text-light);
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-primary-accent:hover {
  color: var(--text-main);
  background-color: var(--accent);
  border-color: var(--accent);
}

.btn-outline-warning {
  color: var(--text-main);
  border-color: var(--accent);
  background-color: var(--white);
}
.btn-outline-warning:hover {
  background-color: var(--accent);
}
#head {
  background-color: var(--primary);
  color: var(--text-light);
  padding: 10px 0;
}
#head-container {
  display: grid;
  grid-template-columns: 1fr 100px;
  align-items: center;
}

#head h1 {
  font-family: var(--title-font);
}

.form-group {
  margin: 15px 0;
}