:root {
   --mp-white: #FFFFFF;
   --mp-black: #202020;

   --mp-light-gray: #F2F3F4;
   --mp-gray: #c9cdd1;
   --mp-dark-gray: #a0a7ae;

   --mp-light-green: #8d9e72;
   --mp-green: #5c9646;
   --mp-dark-green: #437c5b;

   --mp-light-yellow: #9ea291;
   --mp-dark-yellow: #474531;

   --mp-light-blue: #506674;
   --mp-blue: #465865;
   --mp-dark-blue: #313e47;

   --mp-light-orange: #ec5830;
   --mp-orange: #d65419;
   --mp-dark-orange: #c04b16;

   --mp-light-plum: #563b3e;
   --mp-plum: #473133;
   --mp-dark-plum: #382728;

   --mp-red: #a30000;
   --mp-dark-red: #473133;
   --mp-alert-red: #CE2029;

   --mp-icon-filter-white: invert(97%) sepia(77%) saturate(0%) hue-rotate(356deg) brightness(103%) contrast(101%);
   --mp-icon-filter-light-gray: invert(88%) sepia(2%) saturate(99%) hue-rotate(165deg) brightness(109%) contrast(97%);
   --mp-icon-filter-dark-blue: invert(20%) sepia(9%) saturate(1252%) hue-rotate(162deg) brightness(101%) contrast(89%);

   --mp-icon-logo: url("assets/images/icons/logo.svg");
   --mp-icon-spinner: url("assets/images/icons/spinner.svg");

   --mp-font-size-h1: 1.51rem;
   --mp-font-size-h2: 1.31rem;
   --mp-font-size-h3: 1.17rem;
   --mp-font-size-h4: 1.05rem;
   --mp-font-size-h5: .94rem;
   --mp-font-size-h6: .83rem;
   --mp-font-size-p: .95rem;

   --mp-box-shadow: 0 5px 15px rgb(0 0 0 / 25%);
}

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

html {
   color: var(--mp-black);
}

h1 {
   font-size: var(--mp-font-size-h1);
}

body {
   display: flex;
   flex-direction: column;
   height: 100vh;
   width: 100vw;
   min-width: 600px;
   background-color: var(--mp-white);
}

header {
   text-align: left;
   background-color: var(--mp-dark-blue);
   color: var(--mp-white);
   font-size: 2rem;
   font-weight: bold;
   padding: .5em 1em;
}

main {
   display: flex;
   flex-direction: column;
   align-content: center;
}

footer {
   margin-top: auto;
   padding: 1em;
}

nav {
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid var(--mp-white);
}

nav ul {
   display: flex;
   list-style: none;
}

nav li {
   display: flex;
}

nav .login {
   margin-left: auto;
}

nav a {
   display: flex;
   align-items: center;
   text-decoration: none;
   color: var(--text-color);
   padding: 1em 2em;
   transition: background-color 150ms ease;
}

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

nav a.active-link {
   border-bottom: 2px solid var(--mp-dark-blue);
}

nav a.accent-link {
   background-color: var(--mp-dark-blue);
   color: var(--mp-white);
}

.logo {
   background-image: var(--mp-icon-logo);
}

.input-expanding {
   display: inline-block;
   background-color: var(--secondary);
   width: 80vw;
   height: 100px;
   padding: 4px;
   border: 1px solid var(--mp-dark-blue);
   border-radius: 4px;
}

.button {
   width: 80vw;
   background-color: var(--accent);
   color: var(--mp-white);
   font-size: 25px;
   font-weight: bold;
   text-align: center;
   vertical-align: baseline;
   box-sizing: border-box;
   padding: 5px 10px;
   margin: 10px 0;
   border: 2px solid var(--mp-dark-blue);
   border-radius: 7px;
   cursor: pointer;
}

.button:hover,
.button:focus {
   transition-duration: 0.2s;
   filter: brightness(120%);
}

#open-sidebar-button {
   display: none;
   background: none;
   border: none;
   padding: 1em;
   margin-left: auto;
   cursor: pointer;
}

#close-sidebar-button {
   display: none;
   background: none;
   border: none;
   padding: 1em;
   cursor: pointer;
}

#overlay {
   display: none;
   background-color: rgba(0, 0, 0, 0.5);
   position: fixed;
   inset: 0;
   z-index: 9;
}

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

   #open-sidebar-button,
   #close-sidebar-button {
      display: block;
   }

   nav {
      position: fixed;
      top: 0;
      right: -100%;
      height: 100vh;
      width: min(15em, 100%);
      z-index: 10;
      border-left: 1px solid var(--color-hover);
   }

   nav.show {
      right: 0;
   }

   nav.show~#overlay {
      display: block;
   }

   nav ul {
      width: 100%;
      flex-direction: column;
   }

   nav a {
      width: 100%;
      padding-left: 2.5em;
   }

   nav a.active-link {
      border-bottom: none;
   }

   nav .home-li {
      margin-right: unset;
   }

   main {
      flex-wrap: wrap;
   }
}