:root {
  --primary-color: #641e8c;
  --secondary-color-dark: #687890;
  --secondary-color-medium: #bda69e;
  --secondary-color-light: #E7E2E2;
}

html {
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

body {
  background-color: var(--secondary-color-light);
  margin: 0;
  font-family: Tahoma;
}

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

.navbar {
  background-color: var(--secondary-color-medium);
  padding: 1em;
  position: -webkit-sticky;
  position: sticky;
  z-index: 999;
  top: 0;
}

.navbar .container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 180px auto;
      grid-template-columns: 180px auto;
}

.navbar img {
  margin-left: 1em;
  height: 50px;
}

.navbar img:hover {
  cursor: pointer;
}

.navbar .navbar-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: auto 0;
}

.navbar .navbar-content .primary-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: auto 0;
  padding: 0;
}

.navbar .navbar-content .nav-item a {
  font-weight: bold;
  font-size: 1.5em;
  color: var(--secondary-color-dark);
  margin: 0 0.5em;
}

.navbar .navbar-content .nav-item a:hover {
  color: var(--primary-color);
  cursor: pointer;
}

.navbar .navbar-content .secondary-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: auto 0 0 0;
  padding: 0;
}

.navbar .navbar-content .user-info a {
  font-weight: bold;
  font-size: 1em;
  color: var(--secondary-color-dark);
}

.navbar .navbar-content .logout a {
  color: var(--primary-color);
  border: 3px solid var(--primary-color);
  border-radius: 5em;
  font-weight: bold;
  font-size: 1em;
  padding: 0.1em 1em;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  margin: 0 1em;
}

.navbar .navbar-content .logout a:hover {
  background: var(--primary-color);
  color: var(--secondary-color-light);
  cursor: pointer;
}

section {
  padding-bottom: 0.75em;
}

section .header {
  background-color: var(--secondary-color-dark);
}

section .header h1 {
  margin: 0;
  padding: 0.5em 0;
}

@media only screen and (min-width: 1080px) {
  .container {
    width: 1080px;
    margin: 0 auto;
  }
}
/*# sourceMappingURL=base.css.map */