:root {
   --color-primary: #26767c;
   --color-secondary: #13919b;
}

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

html {
   scroll-behavior: smooth;
}

body {
   font-family: sans-serif;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #444;
}

pre{
   white-space: pre-line;
}

a {
   color: var(--color-primary);
   font-weight: 600;
}

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

.main {
   position: relative;
}

.sidebar {
   height: 210px;
   overflow: auto;
   box-shadow: 2px 0 3px rgba(0,0,0,0.5);
}

.logo {
   font-size: 1.2rem;
   text-transform: uppercase;
   color: var(--color-primary);
   padding-block: 1em;
}

.primary-nav {
   height: 100%;
   padding: 0 1.5em 1.5em;
   overflow: auto;
}

.primary-nav__item {
   list-style: none;
   padding-block: 1em;
   border-bottom: 1px solid #ddd;
}

.primary-nav__item:first-child {
   border-top: 1px solid #ddd;
}

.primary-nav__link {
   text-decoration: none;
}

.content {
   padding: 2em 1.5em;
}

.main-section__heading {
   font-size: 1.75rem;
   font-weight: 400;
   color: var(--color-primary);
   padding-block: 0.5em;
}

.main-section__content {
   margin-bottom: 1em;
}

.main-section__paragraph:not(:last-child) {
   margin-bottom: 1.25em;
}

.main-section__pre {
   background-color: #eee;
   padding-inline: 2em;
   margin-block: 1em;
}

.main-section__list {
   margin-block: 1.5em;
   margin-left: 2em;
}

.main-section__list li {
   margin-left: 0.75em;
}

.main-section__list li:not(:last-child) {
   margin-bottom: 1em;
}

@media (min-width: 450px) {
   .logo {
      font-size: 1.5rem;
   }
}

@media (min-width: 850px) {
   .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      max-width: 350px;
      width: 100%;
      height: 100vh;
      box-shadow: 0 2px 3px rgba(0,0,0,0.5);
   }
   
   .primary-nav {
      padding: 1em 1.5em;
   }

   .logo {
      padding-block: 1.25em;
   }

   .content {
      position: absolute;
      top: 0;
      left: 350px;
      padding: 2em 3.5em;
   }

   .main-section__pre {
      padding-inline: 4em;
   }
}