* {
   padding: 0;
   margin: 0;
}

:root {
   --theme-color: #f69b46;
}

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

@media (prefers-color-scheme: dark) {
   body {
      background-color: #222;
      color: #ddd;
   }
}

/* Footer styles */
.footer {
   padding: 3rem 1rem;
   display: grid;
   grid-template-columns: auto auto;
   background-color: #222;
   color: #fff;
   border-bottom: solid .4rem var(--theme-color);
   font-family: "Nunito", "Times New Roman", Times, serif;
   overflow: auto;
}

.footer h2 {
   position: relative;
   margin: 1rem .75rem .75rem 2.5rem;
   font-size: 1.5rem;
   transition: .2s;
}

.footer h2::before {
   content: "";
   position: absolute;
   top: .5rem;
   left: -.6rem;
   height: 1rem;
   width: .25rem;
   border-radius: 5rem;
   background-color: var(--theme-color);
   transition: .2s;
}

.footer h2:hover {
   margin: 1rem .75rem .75rem 3rem;
}

.footer h2:hover::before {
   left: -1.1rem;
}

.footer p {
   margin: .5rem 2rem;
}

.faded-footer {
   color: #bbb;
}




/* menu */
.menu {
   position: fixed;
   top: 0;
   left: .3rem;
   bottom: 0;
   width: 10rem;
   display: flex;
   justify-items: center;
   align-items: center;
   transition: .2s;
   z-index: 10;
}

.menu:hover {
   left: .6rem;
}

.menu .item {
   height: 3rem;
   width: 3rem;
   background-color: #f4f4f4;
   border: solid .2rem #ebebeb;
   border-radius: 50%;
   transition: .2s;
   margin: .5rem auto;
   display: flex;
   justify-content: center;
   align-items: center;
   line-height: 1em;
}

.menu .item img {
   filter: invert(80%);
   transition: .2s;
}

.menu .item:hover img {
   filter: none;
}

.menu .item:hover {
   background-color: var(--theme-color);
   transform: scale(1.15);
   margin: 1rem auto;
}

@media only screen and (max-width: 700px) {
   .menu {
      left: 0;
      bottom: 0;
      right: 0;
      top: auto;
      width: auto;
      height: 5rem;
   }
   .menu div {
      margin: auto;
   }
   .menu:hover {
      left: 0;
   }
   .menu .item {
      display: inline-flex;
      margin: auto .5rem;
      transform: scale(1.3);
   }
   .menu .item:hover {
      margin: auto 1rem;
      transform: scale(1.5);
   }

   .footer {
      grid-template-columns: auto;
      padding: 3rem 1rem 6rem 1rem;
   }
}

@media (prefers-color-scheme: dark) {
   .menu .item {
      background-color: #333;
      border: solid .2rem #444;
   }

   .menu .item img {
      filter: none;
   }

   .footer {
      background-color: #000;
   }
}