* { margin: 0; padding: 0; box-sizing: border-box;
  
  /* Color scheme */
  
  --textcolor: #D3D7CF;
  --bgcolor: #2E3436;
  --highlight: #fff;

}

body {
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--textcolor);
  background: var(--bgcolor);
  position: relative;
  width: 75rem;
  max-width: 100%;
  margin: 0 auto;
  font-family:'Courier New', Courier, monospace;
  font-weight: normal;
  font-style: normal;
  overflow: overlay;
}

/* ------- Sections ------- */

section {
  padding: calc(10em + 5vw) 5vw 0 5vw;
  display: none;
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100%;
  background: var(--bgcolor);
}

section:target { /* Show section */
  display: block;
}

section#about { /* Show #about by default */
  display: block;
}

/* ------- Header ------- */

header {
  padding: 5vw;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  position: absolute;
  width: 100%;
  z-index: 2;
}

header h1 {
  font-size: 1.5em;
  flex: 1; /* pushes nav to the right */
  white-space: nowrap;
  padding: 0 5vw .5em 0;
}

nav a:not(:last-of-type) {
  margin-right: 1.5vw;
}

a {
    color: var(--textcolor);
}

a:hover {
    color: var(--highlight);
}

.text-logo {
    color: var(--highlight);
    text-decoration: none;
}

h1 {
    font-size: 2em;
    padding: 2rem 0 .5rem 0;
}

p {
    padding: 1rem 0;
}

article {
    border-bottom: solid 2rem var(--textcolor);
    padding-bottom: 3rem;
    min-height: 100%;
}

.blinking-cursor {
    -webkit-animation: 1s blink step-end infinite;
    -moz-animation: 1s blink step-end infinite;
    -ms-animation: 1s blink step-end infinite;
    -o-animation: 1s blink step-end infinite;
    animation: 1s blink step-end infinite;
  }
  
  @keyframes "blink" {
    from, to {
      color: transparent;
    }
    50% {
      color: ;
    }
  }
  
  @-moz-keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: var(--textcolor);
    }
  }
  
  @-webkit-keyframes "blink" {
    from, to {
      color: transparent;
    }
    50% {
      color: var(--textcolor);
    }
  }
  
  @-ms-keyframes "blink" {
    from, to {
      color: transparent;
    }
    50% {
      color: var(--textcolor);
    }
  }
  
  @-o-keyframes "blink" {
    from, to {
      color: transparent;
    }
    50% {
      color: var(--textcolor);
    }
  }

  .menu {
      display: none;
  }

  @media screen and (max-width: 1200px) {
    header h1 {
        font-size: 1.1em;
        padding: 0;
    }

    .menu {
        display: inline-block;
        color: var(--textcolor);
        text-decoration: none;
    }

    nav {
        display: none;
    }

    header {
        position: relative;
    }

    .mobile-menu {
        grid-template-rows: auto;
        align-content: start;
        gap: 3rem;
        padding: 2rem;
        position: absolute;
        z-index: 3;
        top: 0;
        left: 0;
        background: var(--bgcolor);
        width: 100%;
        height: 100vh;
    }

    .mobile-menu a {
        color: var(--textcolor);
        font-weight: bold;
        text-align: end;
    }

    section {
        padding: calc(6em + 5vw) 5vw 8vw 5vw;
        height: 90vh;
    }
  }

  @media screen and (max-width: 361px) {

  }