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

body {
  padding: 0;
  margin: 0;
  font-family: var(--Inter);
}

:root {
  --primary: #f4970b;
  --secondary: #164290;
  --brdr: 1px solid #f00;
  --fa: FontAwesome;
  --pacifico: Pacifico;
  --success: #4CAF50;
  --info: #2196F3;
  --warning: #ffeb3b;
  --danger: #f44336;
  --Inter: Inter;
  --dimmed: #727171;
}

::selection {
  color: yellow;
  background-color: red;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('/fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format("embedded-opentype"), url('/fonts/fontawesome-webfont.woff2?v=4.7.0') format("woff2"), url('/fonts/fontawesome-webfont.woff?v=4.7.0') format("woff"), url('/fonts/fontawesome-webfont.ttf?v=4.7.0') format("truetype"), url('/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url(../fonts/Inter/Inter-Black.ttf) format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: Inter;
  src: url(/fonts/Inter/Inter-Bold.ttf) format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 800;
}
@font-face {
  font-family: Inter;
  src: url(/fonts/Inter/Inter-ExtraBold.ttf) format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: Inter;
  src: url(/fonts/Inter/Inter-Medium.ttf) format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}
@font-face {
  font-family: Inter;
  src: url(/fonts/Inter/Inter-Regular.ttf) format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: Inter;
  src: url(../fonts/Inter/Inter-SemiBold.ttf) format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: Pacifico;
  src: url(/fonts/pacifico/Pacifico.ttf) format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: normal;
}

.info, .danger, .success, .warning {
    text-align: center;
    padding: 10px;
}
.info, .danger, .success {
  color: white;
}

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

.success {
  background-color: var(--success);
}
.warning {
  background-color: var(--warning);
}
.danger {
    background-color: var(--danger);
}
a {
  text-decoration: none;
  color: inherit;
}
#error-message {
  color: red;
  margin-top: 10px;
}