@import url("./reset.css");
@import url("./typography.css");
@import url("./controls.css");
@import url("./nav.css");
@import url("./auth-form.css");
@import url("./admin-panel.css");
@import url("./home.css");
@import url("./notes.css");
@import url("./checklists.css");
@import url("./events.css");
@import url("./calendar.css");
@import url("./profile.css");
@import url("./about.css");
@import url("./contact.css");
@import url("./news.css");
@import url("./error.css");
@import url("./footer.css");

:root {
  --color-gray-light: #cdd3d3;
  --color-sky-blue: #43739a;
  --color-light-green: #8d9a48;
  --color-pastel-peachy: #b78d63;
  --color-body-background: #4a5759;
  --color-menu-pale-silver: #c5c6c7;
  --color-menu-soft-sky-blue: #8295a3;
  --color-menu-soft-sky-blue-transparent: rgba(130, 149, 163, 0.4);
  --color-menu-icon-soft-sky-blue: #4d5d6a;
  --color-menu-creamy-peach: #c1b09f;
  --color-menu-creamy-peach-transparent: rgba(193, 176, 159, 0.4);
  --color-menu-icon-creamy-peach: #847a70;
  --color-menu-cool-gray: #7f8d8d;
  --color-menu-creamy-gray: #8a9a9a;
  --color-menu-icon-cool-gray: #4c5b5b;
  --color-menu-green-light: #9fa28f;
  --color-menu-green-light-transparent: rgba(159, 162, 143, 0.4);
  --color-menu-green-dark: #5a5e55;
  --color-menu-icon-green-light: #676a5a;
  --color-menu-soft-gray: #909090;
  --color-menu-dark-soft-gray: #4c5b5b;
  --color-menu-dark-soft-gray-transparent-01: rgba(76, 91, 91, 0.1);
  --color-menu-dark-soft-gray-transparent-02: rgba(76, 91, 91, 0.2);
  --color-menu-dark-soft-gray-transparent-04: rgba(76, 91, 91, 0.4);
  --color-ivory: #f2f0e6;
  --color-error-red: #5c0707;
  --color-checklists-bckgd: #c7b97e;
  --color-checklist-new-bckgd: #dfd8a4;

  --shadow-base: 1px 4px 4px 1px rgba(0, 0, 0, 0.2);
  --left-box-shadow: -10px 0 10px rgba(0, 0, 0, 0.2);
  --bottom-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2);
  --semi-transparent-filter: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}

.xmark {
  cursor: pointer;
}

body {
  margin: 0;
  padding-left: 10vw;
  background-color: var(--color-body-background);
}

main {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  height: 100vh;
  min-height: 465px;
  gap: 5vw;
  padding-right: 10vw;
  background-color: var(--color-menu-cool-gray);
}

.content {
  width: 60vw;
  height: 93.1vh;
  margin-top: 3.5vh;
  background-color: var(--color-gray-light);
  box-shadow: var(--left-box-shadow);
  overflow-y: auto;
}

main.home {
  background-color: var(--color-menu-cool-gray);
}

main.notes {
  background-color: var(--color-menu-soft-sky-blue);
}

main.checklists {
  background-color: var(--color-menu-creamy-peach);
}

main.events {
  background-color: var(--color-menu-green-light);
}

main.profile {
  background-color: var(--color-menu-soft-gray);
}

@media (max-width: 520px) {
  body {
    padding-left: 0;
  }

  body main {
    height: 92vh;
    padding-right: 0;
  }

  body main .backdrop {
    width: 100vw;
    height: 100vh;
    left: unset;
    transform: none;
  }

  body main .spinner-container {
    width: 86vw;
    height: 83.5vh;
    margin-top: 2vh;
    margin-left: 11vw;
  }

  body .footer {
    width: 91.4vw;
    margin-left: 8vw;
    height: 2vh;
    bottom: -4vw;
  }

  .footer * {
    font-size: 1.6vw;
  }

  body main .nav .top-bar,
  body main .nav .bottom-bar {
    margin-left: 13vw;
    width: 81.6vw;
    height: 4vh;
    gap: 3vw;
  }

  .top-bar *,
  .bottom-bar * {
    font-size: 3vw;
  }

  .top-bar-controls {
    gap: 3vw;
  }

  .top-bar .greeting {
    left: 0;
  }

  body main .auth-form {
    top: 6vh;
    width: 44vw;
    left: 52vw;
  }

  body main .auth-form * {
    font-size: 3vw;
  }

  body main .auth-form .fa-xmark {
    font-size: 3vw;
  }

  .auth-form button.login,
  .auth-form button.register {
    font-size: 4vw;
    border-radius: 0.1vw;
  }

  .auth-form.register {
    height: 56vw;
  }

  .auth-form button.login {
    top: 22vw;
    width: 14vw;
    height: 6vw;
  }

  .auth-form button.register {
    width: 18vw;
  }

  .auth-form input {
    padding-left: 4.2vw;
    width: 42vw;
  }

  .error.auth {
    font-size: 3vw;
    width: 42vw;
    line-height: 2.2vw;
  }

  body main .nav .sidebar {
    padding: 2.2vh 0 6vw;
    height: 92vh;
    width: 8vw;
  }

  body main .nav .sidebar #logo img {
    margin-bottom: 2vh;
  }

  body main .nav .sidebar .connect {
    flex-direction: column;
    justify-content: unset;
    width: auto;
  }

  body main .nav .sidebar .connect i {
    font-size: 4vw;
    padding: 0;
  }

  body main .nav .sidebar .menu li {
    padding: 0.2vh 0 1vw;
  }

  body main .content {
    height: 83.5vh;
    width: 82vw;
    margin-top: 4.5vh;
  }

  body main .content .error-page {
    width: 81.8vw;
  }

  body main .content.home .options li {
    width: 23vw;
    height: 16vw;
  }

  body main .content.home .featured-img {
    height: 26vh;
  }

  body main .content.home .intro {
    flex-direction: column;
    gap: 2vw;
    margin-bottom: 2vw;
  }

  body main .content.home .intro h3,
  body main .content.home .intro p {
    font-size: 1.8vw;
    width: 98%;
  }

  body main .content.about-us .location #bing-map {
    width: 34.4vw;
  }

  body main .content.contact .submit {
    padding: 0.1vw 1vw;
    border-radius: 0.2vw;
    font-size: 2vw;
  }

  body main .content.contact .form.contact-us h4 {
    font-size: 2vw;
  }
}