/* Import + Variables */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

:root {
   --primary: #464a4d;
   --secondary: #2e3133;
   --tertiary: #c2c6ca;
}

/* Reset */
* {
   margin: 0;
   box-sizing: border-box;
}

/* Body */
body {
   font-family: 'Lato', sans-serif;
   line-height: 1.6;
}

/* Headers */
h1, h2, h3, h4 {
   color: var(--secondary);
}

/* Links */
a {
   color: var(--primary);
}

a:hover {
   color: grey;
   text-decoration: none;
}

/* Navigation Lists */
.nav {
   padding: 0;
   list-style-type: none;
}

/* Layout */
.container {
   display: flex;
}

main {
   margin: 0 0 0 212px;
}

aside {
   width: 212px;
   height: 100vh;
   position: fixed;
}

@media (max-width: 768px) {
   .container {
      width: 100%;
      height: auto;
      position: relative;
      flex-direction: column;
   }

   aside {
      width: 100%;
      height: auto;
      position: relative;
   }

   main {
      margin-left: 0;
   }
}

/* Padding */
main {
   padding: 10px;
}
aside {
   padding: 10px 10px 10px 16px;
}

/* Sections */
.links {
   border: 1px solid var(--tertiary);
   margin: 10px 0 0 0;
}

/* Drop down */
details summary {
   list-style: none;
   cursor: pointer;
}

details summary::-webkit-details-marker {
   display: none;
}