/* sono-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Sono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/sono-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* sono-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Sono';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/sono-v12-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
  font-family: 'Sono', monospace;
}

 footer {
background-color: #4e4e4e; /* Darker color for the rectangle */
color: #bcbcbc; /* Makes the text readable */
width: 100%;
padding: 20px 0;
text-align: center;
}

 footer a,
footer a:visited,
footer a:active {
    color: white;
    text-decoration: none;
    transition: 0.2s;
}

footer a:hover {
    color: white;
    text-decoration: underline;
}

.footer-nav {
    display: flex;          /* Put them in a row */
    justify-content: center; /* Center them horizontally */
    gap: 15px;              /* Put space between the links */
    margin-bottom: 10px;    /* Space between links and copyright */
}

/* Adding the "|" using CSS "After" logic */
.footer-nav a:not(:last-child)::after {
    content: "|";           /* Add a pipe after every link... */
    margin-left: 15px;      /* ...except the last one */
    color: #555;            /* Make the pipe a bit dimmer than the text */
}