/* RESET */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* BASE */

body {
  font-family: Helvetica, Arial, sans-serif;
  background: #fff;
  color: #111;
  line-height: 1.5;
}

/* LINKS */

:root {
--hover: #BEF527;
}

a {
  text-decoration: none;
  color: inherit;
}

/* NAV */

.nav {
  position: fixed;

  top: 40px;
  left: 40px;

  width: 100px;
}

.nav h1 {
  font-size: 18px;
  font-weight: normal;

  margin-bottom: 170px;
}

.nav a {
  display: block;

  margin-bottom: 6px;

  font-size: 12px;
  color: #999;

  transition: color 0.2s ease;
}

.nav a:hover {
  color: var(--hover);
}

/* CONTENT */

.content {
  position: relative;

  margin-left: 140px;

  padding: 60px 80px 80px;

  max-width: 1400px;
}

/* MOBILE */

@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  /* NAV */

  .nav {
    position: static;

    width: 100%;

    margin: 24px 0 48px;

    padding: 0 20px;
  }

  .nav h1 {
    margin-bottom: 28px;

    font-size: 16px;
  }

  .nav nav {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 18px;
  }

  .nav a {
    font-size: 11px;
  }

  /* CONTENT */

  .content {
    margin-left: 0;

    width: 100%;

    padding: 0 20px 40px;
  }

}