.home-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

.home-section .tablet {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-height: 100vh;
  margin-left: 12vw;
  margin-top: -12vh;
  scale: 0.9;
  z-index: 300;
}

.tablet-screen img {
  margin: 3vw 0;
  width: 15vw;
  height: 15vw;
}

.tablet-screen h3 {
  font-size: 1.6vw;
  text-align: center;
  color: #333333;
  width: 80%;
}

.home-section h1 {
  font-size: 3vw;
  margin: 0;
  color: #333333;
}

.home-section span.text {
  padding: 0;
  padding-right: 1vw;
  border-right: 0.15vw solid #747474;
  animation: blink 0.75s infinite;
}

.home-section .blue {
  color: #4480ff;
}

.home-section .green {
  color: #4caf50;
}

.home-section .yellow {
  color: #f4b400;
}

.home-section .red {
  color: #f44336;
}

.home-section p.info {
  font-size: 1.2vw;
  margin-top: 6vh;
  color: #747474;
}

.home-section p.info a {
  text-decoration: none;
  color: #4480ff;
}


.home-section .tablet .tablet-screen {
  width: 58.5vw;
  height: 77vh;
  background: #EDEDED;
  border-radius: 2.4vw;
  border: 6px solid black;
  outline: 3px solid rgb(218, 218, 218);
  box-shadow:
    -2vw -1vw 3vw hsla(0, 0%, 0%, 0.4),
    0 0 0 0.1vw hsl(0, 0%, 67%) inset;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 300;
}

.home-section .tablet .stylus img {
  height: 50vh;
  width: 5vw;
  background: transparent;
  filter: drop-shadow(-0.8vw -0.2vw 0.4vw rgba(0, 0, 0, 0.4));
}

.home-section .keyboard-container {
  position: absolute;
  bottom: -10vw;
  right: -30vw;
  width: 70%;
  overflow: visible;
  justify-content: center;
  transform: rotate(-16deg);
  z-index: 200;
}

.pot-container {
  position: absolute;
  bottom: -10vw;
  left: -6vw;
  z-index: 400;
}

.pot img {
  width: 24vw;
  height: 24vw;
  filter: drop-shadow(-1.4vw 1.2vw 1.5vw rgba(0, 0, 0, 0.6));
}

@keyframes blink {
  0% {
    border-right: 0.15vw solid #747474;
  }

  50% {
    border-right: 0.15vw solid transparent;
  }

  100% {
    border-right: 0.15vw solid #747474;
  }
}

@media screen and (max-width: 768px) {
  .home-section .tablet .stylus img {
    max-height: 280px;
    height: 50vh;
    width: 8vw;
  }

  .home-section .tablet .tablet-screen {
    width: 48vw;
    height: 78vh;
  }
}

@media screen and (max-width: 431px) {
  .home-section {
    flex-direction: row;
    margin-left: 14vw !important;
    align-items: center;
  }

  .home-section .tablet {
    margin: 0;
    margin-top: -12vh;
  }

  .tablet-screen img {
    width: 32vw;
    height: 32vw;
  }

  .tablet-screen h3 {
    font-size: 3.2vw;
    width: 90%;
  }

  .home-section h1 {
    font-size: 6vw;
    width: 90%;
    text-align: center;
  }

  .home-section .tablet .stylus img {
    height: 40vh;
    width: 16vw;
    margin-left: -4vw;
  }

  .home-section .tablet .tablet-screen {
    width: 75vw;
    height: 57vh;
    gap: 8vh;
  }

  .pot-container {
    left: -14vw;
    top: -14vw;
  }

  .pot img {
    width: 52vw;
    height: 52vw;
    filter: drop-shadow(-1.4vw 1.2vw 1.5vw rgba(0, 0, 0, 0.6));
  }

  .home-section .keyboard-container {
    bottom: -32vw;
    right: 20vw;
    scale: 0.5;
  }

}

@media screen and (max-height: 431px) and (orientation: landscape) {
  .home-section .tablet {
    margin-left: 0 !important;
  }

  .home-section .keyboard-container {
    bottom: -20vw;
    right: -15vw;
    scale: 0.6;
  }

  .pot img {
    scale: 0.8;
  }
}

@media screen and (max-width: 933px) {
  .home-section {
    margin: 0;
  }
}