/* Mobile */
@media only screen and (min-width: 0rem) {
    :root {
      --dark: #05110c;
      --mediumDark: #081811;
      --medium: #0d291e;
      --accent: #113024;
      --lightAccent: #275040;
      --light: #fafbfc;
      --bodyTextColorWhite: #fafbfc;
      --darkModeAccent: #F08260;
      --darkModeAccent2: #9A2F0E;
      --darkNavBG: #0f0f0f;
      --darkBanner: #181818;
      --darkForm: #090909;
      --darkFormTextArea: #242424;
    }
    body.dark-mode {
      background-color: var(--dark);
    }
    body.dark-mode p,
    body.dark-mode li,
    body.dark-mode h1,
    body.dark-mode h2,
    body.dark-mode h3,
    body.dark-mode h4,
    body.dark-mode h5,
    body.dark-mode h6,
    body.dark-mode .title,
    body.dark-mode .text,
    body.dark-mode .li {
      color: var(--bodyTextColorWhite);
    }
    body.dark-mode .topper {
      color: var(--darkModeAccent);
    }
    body.dark-mode .light {
      display: none;
    }
    body.dark-mode .dark {
      display: block !important;
    }
    .dark {
      /* class used to hide elements that only need to be seen when dark mode is enabled */
      display: none;
    }
    body.dark-mode .button-solid {
      color: #fff;
      background-color: var(--accentColor);
      box-shadow: rgba(132, 139, 146) 0px 4px 20px 0px;
    }
    body.dark-mode .button-solid:before {
      background: #fff;
    }
    body.dark-mode .button-solid:hover {
      color: var(--darkModeAccent);
    }
}