* {
  margin: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: var(--backgroundColor);
}

/* Custom properties */
:root {
  /* Colors */
  --backgroundColor: rgba(100%, 100%, 100%, 100%);
  --purpleWebsite: rgba(68%, 0%, 68%, 100%);
  --grayWebsite: rgba(95%, 95%, 95%, 100%);
  --textGrayWebsite: rgba(25%, 25%, 25%, 100%);
  --textLightGrayWebsite: rgba(50%, 50%, 50%, 100%);
  --shadowGrayWebsite: rgba(78%, 78%, 78%, 100%);
  --shadowMediumGrayWebsite: rgba(134, 134, 134, 1.0);
  --iphoneShadow: rgb(134, 134, 134, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root {
    --backgroundColor: rgba(0%, 0%, 0%, 100%);
    --grayWebsite: rgba(5%, 5%, 5%, 100%);
    --textGrayWebsite: rgba(75%, 75%, 75%, 100%);
    --textLightGrayWebsite: rgba(60%, 60%, 60%, 100%);
    --shadowGrayWebsite: rgba(16%, 16%, 16%, 100%);
    --shadowMediumGrayWebsite: rgba(0, 0, 0, 1.0);
    --iphoneShadow: rgb(0, 0, 0, 1.0);
  }
}

/* Navbar */
.navbar ul {
  z-index: 100;
  text-align: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--backgroundColor);
  box-shadow: 0 2px 3px 0 var(--shadowGrayWebsite);

  /* Sticky navbar */
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar li {
  display: inline-block;
  width: 15%;
}

.navbar li a {
  display: inline-block;
  color: var(--purpleWebsite);
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  text-shadow: 0 1px 1px var(--shadowMediumGrayWebsite);
}

.navbar a {
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  position: relative;
  text-decoration: none;
}

.navbar a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--purpleWebsite);
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.25s ease-in-out 0s;
}

.navbar a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

.logo-mobile {
  visibility: hidden;
}

/* Top anchor to compensate for navbar's height when user clicks on links in navbar */
a.anchor-home-content {
  display: block;
  position: relative;
  top: -109px;
  visibility: hidden;
}

a.anchor {
  display: block;
  position: relative;
  top: -48px;
  visibility: hidden;
}

/* Page content */
.content {
  margin: 140px 14% 0px 14%;
}

.content h1 {
  font-family: 'Lato', sans-serif;
  font-size: 60px;
  color: var(--purpleWebsite);
  text-align: center;
  text-shadow: 0 2px 5px var(--shadowMediumGrayWebsite);

/*  font-weight: normal;
  font-style: normal;*/
}

.content br {
  display: block; /* Gives the <br> a width */
  content: ""; /* Clears the default height */
  margin-top: 120px;
}

.force-height-spacing p {
  margin-top: 100px;
}

.content h2, h3, p, ul, li {
  font-family: 'Lato', sans-serif;
  line-height: 1.6;
  text-decoration: none;

/*  font-weight: normal;
  font-style: normal;*/
}

.content h2 {
  font-size: 1.9vw; /* "vw" sets the font-size to the relation of the screen width */
  color: var(--purpleWebsite);
  text-shadow: 0 1px 1px var(--shadowMediumGrayWebsite);
}

.content h3 {
  font-size: 1.4vw; /* "vw" sets the font-size to the relation of the screen width */
  color: var(--textGrayWebsite);
}

.content p {
  font-size: 1.4vw; /* "vw" sets the font-size to the relation of the screen width */
  color: var(--textGrayWebsite);
}

.content ul {
  font-size: 1.2vw; /* "vw" sets the font-size to the relation of the screen width */
  color: var(--textGrayWebsite);
  list-style-type: square;
}


.home-content {
  overflow: auto;
  height: auto;
  padding-bottom: 80px;
}

.image-home-content img {
  float: left;
  width: 28%;
  height: auto;
  position: relative;
  margin-left: 24px;
  box-shadow: 0 5px 8px var(--iphoneShadow);
  border-radius: 3.1vw;
}

.download-img-responsive-ios img, .download-img-responsive-android img {
  display: none;
}

.text-home-content {
  display: inherit;
  float: inherit;
  padding: 2% 0 0 48%;
}

.text-home-content br {
  display: block; /* Gives the <br> a width */
  content: ""; /* Clears the default height */
  margin-top: 25px;
}

.text-home-content #download-img-desktop-ios img, .text-home-content #download-img-desktop-android img {
  display: inline;
  margin: 8%;
  height: auto;
}

.text-home-content #download-img-desktop-ios img {
  float: left;
  width: 30%;
}

.text-home-content #download-img-desktop-android img {
  float: right;
  width: 33%;
}

.about-content {
  border-top: 1px solid var(--purpleWebsite);
  overflow: auto;
  height: auto;
  margin: 0 4% 0 4%;
  padding-top: 18px;
  padding-bottom: 50px;
}

.about-content br {
  display: block; /* Gives the <br> a width */
  content: ""; /* Clears the default height */
  margin-top: 25px;
}

.contact-content {
  border-top: 1px solid var(--purpleWebsite);
  overflow: auto;
  height: auto;
  margin: 0 4% 0 4%;
  padding-top: 18px;
  padding-bottom: 50px;
}

.contact-content br {
  display: block; /* Gives the <br> a width */
  content: ""; /* Clears the default height */
  margin-top: 25px;
}

.privacy-content {
  border-top: 1px solid var(--purpleWebsite);
  overflow: auto;
  height: auto;
  margin: 0 4% 0 4%;
  padding-top: 18px;
  padding-bottom: 50px;
}

.privacy-content br {
  display: block; /* Gives the <br> a width */
  content: ""; /* Clears the default height */
  margin-top: 25px;
}

/* Footer */
.footer {
  width: 100%;
  height: 140px;
  background: var(--grayWebsite);
}

.footer p {
  font-size: 1.0vw; /* "vw" sets the font-size to the relation of the screen width */
  color: var(--textLightGrayWebsite);
}

.footer a {
  color: var(--textGrayWebsite);
}

.contact-section {
  float: right;
  width: 50%;
  height: auto;
}

.text-contact-section {
  margin: 42px 0 -42px 0;
  text-align: center;
}

.copyright-section {
  float: left;
  width: 50%;
  height: auto;
}

.text-copyright-section {
  margin: 42px 0 -42px 0;
  text-align: center;
}

/* For mobile phones */
@media only screen and (max-width: 767px) {

  /* Content settings */
  .content br {
    display: block; /* Gives the <br> a width */
    content: ""; /* Clears the default height */
    margin-top: 50px;
  }

  .force-height-spacing p {
    margin-top: 0px;
  }

  .content h1 {
    display: none;
  }

  .content h2 {
    font-size: 4.4vw; /* "vw" sets the font-size to the relation of the screen width */
    text-shadow: 0 1px 1px var(--shadowMediumGrayWebsite);
  }

  .content h3 {
    font-size: 4.0vw; /* "vw" sets the font-size to the relation of the screen width */
  }

  .content p {
    font-size: 3.6vw; /* "vw" sets the font-size to the relation of the screen width */
  }

  .content ul {
    font-size: 3.0vw; /* "vw" sets the font-size to the relation of the screen width */
  }

  /* Navbar */
  .navbar {
    z-index: 100;
    overflow: hidden;
    background-color: var(--backgroundColor);
    box-shadow: 0 2px 3px 0 var(--shadowGrayWebsite);
    height: 50px;
    position: fixed;
    top: 0;
    width: 100%;
  }

  .navbar ul {
    box-shadow: none;
    padding: 50px 35px;
    background-color: var(--purpleWebsite);
  }

  .navbar ul li {
    display: block;
  }

  /* TODO: Fix color: white; */
  .navbar li a {
    color: white;
  }

  .navbar a {
    font-size: 20px;
    text-shadow: 0 0.4px 1px var(--shadowMediumGrayWebsite);
  }

  .navbar a:hover::before {
    display: none;
  }

  .menuButtons {
    position: fixed;
    z-index: 101; /* Setting the hamburger menu on top of content */
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border: none;
    color: var(--purpleWebsite);
    background: var(--backgroundColor);
    cursor: pointer;
  }

  .xIcon {
    display: none;
  }

  .menu {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    transform: translateY(-100%);
    transition: transform 0.25s;
  }

  /* TODO: Fix color: white; */
  .menuLink {
    display: inline;
    color: white;
    text-decoration: none;
  }

  .menu a {
    font-size: 26px;
  }

  .showMenu {
    transform: translateY(0);
  }

  .logo-mobile {
    width: 100%;
    float: left;
    height: 50px;
    visibility: visible;
    text-align: center;
    color: var(--purpleWebsite);

    /* Center aligning the logo vertically */
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
  }

  /* Page content */
  .content {
    margin: 75px 5% 0 5%; /* Adding 60px top margin to avoid content overlay with the navbar */
  }

  .home-content {
    padding-bottom: 50px;
  }

  .image-home-content img {
    display: block;
    width: 76%;
    margin-top: 20px;
    margin-left: 12%;
    margin-right: 12%;
    box-shadow: 0 5px 8px var(--iphoneShadow);
    border-radius: 10.6vw;
  }

  .download-img-responsive-ios img, .download-img-responsive-android img {
    display: inline;
    margin: 17px 5% 20px 5%;
    height: auto;
  }

  .download-img-responsive-ios img {
    float: left;
    width: 36%;
  }

  .download-img-responsive-android img {
    float: right;
    width: 40%
  }

  .text-home-content {
    margin-top: 25px;
    float: left;
    padding: 0;
  }

  .text-home-content br {
    display: block; /* Gives the <br> a width */
    content: ""; /* Clears the default height */
    margin-top: 10px;
  }

  .text-home-content #download-img-desktop-ios img, .text-home-content #download-img-desktop-android img {
    display: none;
  }

  .about-content {
    margin: 0;
    padding-top: 12px;
    padding-bottom: 50px;
  }

  .about-content br {
    display: block; /* Gives the <br> a width */
    content: ""; /* Clears the default height */
    margin-top: 10px;
  }

  .contact-content {
    margin: 0;
    padding-top: 12px;
    padding-bottom: 50px;
  }

  .contact-content br {
    display: block; /* Gives the <br> a width */
    content: ""; /* Clears the default height */
    margin-top: 10px;
  }

  .privacy-content {
    margin: 0;
    padding-top: 12px;
    padding-bottom: 80px;
  }

  .privacy-content br {
    display: block; /* Gives the <br> a width */
    content: ""; /* Clears the default height */
    margin-top: 10px;
  }

  /* Footer */
  .footer {
    height: 220px;
    width: 100%;
  }

  .footer p {
    font-size: 2.8vw; /* "vw" sets the font-size to the relation of the screen width */
  }

  .contact-section {
    width: 100%;
  }

  .text-contact-section {
    margin: 40px 0 0 0;
    text-align: center;
  }

  .copyright-section {
    width: 100%;
  }

  .text-copyright-section {
    margin: 40px 0 40px 0;
    text-align: center;
  }
}