.wrapper {
    display: grid;
    grid-template-columns:
    1fr
    min(65ch, 100%)
    1fr;
}

.wrapper > * {
  grid-column: 2;
}

.full-bleed {
  width: 100%;
  grid-column: 1 / 4;
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(Rubik.ttf) format('truetype');
}
@font-face {
    font-family: 'Rubik Italic';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url(italic.ttf) format('truetype');
  }
  @font-face {
    font-family: 'Rubik Bold';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(bold.ttf) format('truetype');
  }
  

body {
    background-color: #292e39;
    color: #d8dee9;
    font-family: Rubik, sans-serif;
}

h1, h2, h3 {
    font-family: "Rubik Bold", sans-serif;
}

nav {
    background-color: #4c566a;
    border: 2px;
    position: fixed;
    left: 0;
    top: 0;
    width: 12rem;
    padding: 2rem;
    margin: 5px;
    border-radius: 10%;
}

@media(max-width: 1200px) {
    nav {
        display: none;
    }
}

pre {
    background-color: #434c5e;
    border-radius: 3%;
    padding: 3px;
}

em {
    font-weight: bold;
    color: #88c0d0;
}

p {
    text-align: justify;
}

a:visited {
    color: #d8dee9;
}

ul {
    padding-left: 20px;
}

.img-center {
    display: flex;
    justify-content: center;
}

img {
    max-width: 100%;
}