.header {
  padding: 0px 14%;
}

.main > .center, .footer {
  padding: 0px 14%;
}

.main > .center h1 {
  font-size: 2.5rem;
  margin: 0 auto;
}

.main > .center p {
  font-size: 1.2rem;
  margin: 30px auto;
}

.main > .center img {
  width: 100%;
  margin-top: 30px;
}

.downloadActions a {
  margin: 0px 8px;
}

.main .features .feature {
  padding: 16px 14% 32px 14%;
}

.practice-mode {
  background: white;
  border-radius: 16px;
  padding: 20px;
  width: 33%;
}

.practice-mode:not(:first-child):not(:last-child) {
  margin: 0px 32px;
}

.practice-mode i {
  color: var(--highlightColor);
  font-size: 32px;
}

.practice-mode > p {
  width: 100%;
}

.main .features .feature:nth-child(2n-1) {
  background: #e5e5e5;
}

.feature .text {
  margin: 64px 0px;
  width: 50%;
}

.phone-screenshot {
  max-height: 400px;
  min-width: 300.7px;
  margin: 32px;
  overflow: hidden;
}

.phone-screenshot img {
  height: 600px;
  width: 100%;
}

.categories {
  margin: 32px 0px 0px 0px;
  display: block;
}

.categories .tag {
  background: white;
  padding: 16px;
  border-radius: 16px;
  margin: 4px;
  display: inline-block;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 6px 20px 0 rgba(0, 0, 0, 0.14);
  cursor: default;
}

.categories .tag:hover {
  transform: translateY(-4px);
  transition: transform 0.2s linear;
}

.categories .tag i {
  margin-right: 6px;
}

@media screen and (max-width: 800px) {
  body:not(.handlesPadding)>div {
    padding: 0px 16px;
  }

  .main > .center {
    padding: 0px 16px;
  }

  .main .features .feature {
    padding: 16px 16px 32px 16px;
  }

  .main .features .feature .center .flexbox .practice-mode {
    width: calc(100% - 40px) !important;
    margin: 16px 0px !important;
  }

  .feature .text .categories {
    margin: 32px 0px;
  }

  .header {
    padding: 4px 16px;
  }

  .phone-screenshot {
    max-height: none;
  }

  .phone-screenshot img {
    height: auto;
  }

  div.text {
    width: 100% !important;
  }

  div.flexbox {
    display: block;
  }

  div.flexbox > div {
    width: 100% !important;
    margin: 0 !important;
  }

  .header-contents {
    display: none;
  }
}

@media screen and (min-width: 800px) {
  .main > .center p {
    width: 60%;
  }
}