/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: 'retro';
  src: url('PixelOperator8.eot'); 
  src: url('PixelOperator8.eot?#iefix') format('embedded-opentype'),
       url('PixelOperator8.ttf') format('truetype'),
       url('PixelOperator8.ttf') format('truetype'),
       url('PixelOperator8.ttf') format('truetype'),
       url('PixelOperator8.ttf#tffPixelOperator8') format('truetype');
}
/* Reset basic margins and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "retro";
}

.logo {
   transform: translateY(2px);
}

/* Style the main navbar container */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: black;
    padding: 5px 30px;
    outline: 3px solid white;
}

/* Remove default list styling and display items horizontally */
.nav-links {
    list-style: none;
    display: flex;
}

/* Add spacing between links */
.nav-links li {
    padding: 0 10px;
}

/* Style the actual clickable links */
.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 13px;
    transition: color 0s;
}

/* Change link color on hover */
.nav-links a:hover {
    color: yellow;
}

body {
  background-color: black;
  color: white;
  font-family: "retro";
  font-size: 0.85rem;
}