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

* {
  margin: 0;

  --color-bg: #4e6378;
  --color-action-primary: #3498db;
  --color-text: #ecf0f1;
  --color-link: #0000ee;
  --color-error: #c26324;
  --color-warning: #ffbf00;
  --color-placeholder: lightgray;

  --border-radius-medium: 0.65rem;
}

* {
  line-height: calc(1em + 0.5rem);
}

body {
  background-color: var(--color-bg);
  font-family: "Source Sans Pro", system-ui, sans-serif;
  display: flex;
  max-width: 75%;
  margin: 0 auto;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

input {
  background-color: whitesmoke;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}