@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

html { font-family: 'Nunito', sans-serif; }

body {
    background-color: #F2F4F6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    font-family: 'Nunito';
    color: #000000;
    margin: 0px;
}

h1, h2, h3, p {
    font-family: 'Nunito';
}

h1 {
  font-weight: 800;
  margin: 0;
}

p {
  margin: 0;
  font-size: 16px;
}

.grid {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 15px;
  row-gap: 15px;
}

.grid2 {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 15px;
  row-gap: 15px;
}

.screen-no-transition {
  animation: screenNoTransition 0s ease-in-out;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  -webkit-transform:translateZ(0);
}

@keyframes screenNoTransition {
  0% {transform: translate3d(0, 0, 0);}
  100% {transform: translate3d(0, 0, 0);}
}

.screen-bottom-to-top {
  animation: screenBottomToTop 0.2s ease-in-out;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  -webkit-transform:translateZ(0);
}

@keyframes screenBottomToTop {
  0% {transform: translate3d(0, 150%, 0);}
  100% {transform: translate3d(0, 0, 0);}
}

.screen-top-to-bottom {
  animation: screenTopToBottom 0.3s ease-in-out;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  -webkit-transform:translateZ(0);
}

@keyframes screenTopToBottom {
  0% {transform: translate3d(0, -150%, 0);}
  100% {transform: translate3d(0, 0, 0);}
}

.screen-left-to-right {
  animation: screenLeftToRight 0.2s ease-in-out;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  -webkit-transform:translateZ(0);
}

@keyframes screenLeftToRight {
  0% {transform: translate3d(-150%, 0, 0);}
  100% {transform: translate3d(0%, 0, 0);}
}

.screen-right-to-left {
  animation: screenRightToLeft 0.2s ease-in-out;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  -webkit-transform:translateZ(0);
}

@keyframes screenRightToLeft {
  0% {transform: translate3d(0, 0, 0);}
  100% {transform: translate3d(-150%, 0, 0);}
}

.simpleAnimateScale {
  animation: simpleAnimateScale 1.5s linear infinite;
}

@keyframes simpleAnimateScale {
  0% {transform: scale3d(0.7,0.7,0.7);}
  50% {transform: scale3d(1,1,1);}
  100% {transform: scale3d(0.7,0.7,0.7);}
}

.simpleAnimateRotate {
  animation: simpleAnimateRotate 1.5s linear infinite;
}

@keyframes simpleAnimateRotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.animated-path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: dash 1s linear alternate infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

a {
  text-decoration: none;
  color: #0091FF;
  font-weight: 700;
}

.custom-font-placeholder::placeholder {
    font-family: "Indie Flower";
}

.show-on-mobile {
  display: none;
}

.show-on-desktop {
  display: block;
}

.default-hover {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.default-hover:hover {
  opacity: 0.7 !important;
}

.primary-hover {
  cursor: pointer;
}

.primary-hover:hover {
  color: #0091FF !important;
}

.clickable {
  cursor: pointer;
}

.top-bar {
  width: 300px;
}

.straight-to-content {
  width: 80%;
}

.in-app-straight-to-content {
  width: 100%;
}

.grid-2x {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 1em;
}

.screenshot {
  margin-bottom: 20px;
  width: 100%;
  object-fit: contain;
}

.pro {
  background-color: #0091FF;
  color: #ffffff;
  font-weight: 500;
  border-radius: 20px;
  font-size: 16px;
}

.lesson-video-container {
  height: 480px;
  width: 640px;
}

.lesson-video-iframe {
  height: 480px;
  width: 640px;
}


@media only screen and (max-width: 800px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 800px) {

  .lesson-video-container {
    height: 240px;
    width: 320px;
  }
  
  .lesson-video-iframe {
    height: 240px;
    width: 320px;
  }

}

@media only screen and (max-width: 500px) {



  .straight-to-content {
    width: 95%
  }

  .top-bar {
    width: 280px;
  }

  .grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .show-on-mobile {
    display: block;
  }

  .show-on-desktop {
    display: none;
  }

  .grid-2x {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: 10px;
    row-gap: 1em;
  }
}

@media (prefers-color-scheme: dark) {
    body {
      background-color: #414141;
      color: #ffffff;
    }
}

@media print {
  body {
    font-family: 'Nunito', sans-serif;
  }

  .no-print, .no-print *
  {
      display: none !important;
  }

  .print-bordered {
    margin: 20px;
    border-color: #F2F4F6;
    border-width: 1px;
    border-style: solid;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
  }

  @media (prefers-color-scheme: dark) {
    .print-bordered {
      background-color: #414141 !important;
    }
  }
  
}