*,
*:before,
*:after {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: #F2F2F2;
}

::-webkit-scrollbar-thumb {
  background: #BDBDBD;
  border-radius: 9px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6E6E6E;
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
}

@media screen and (min-width: 0) and (max-width: 413px) {
  html {
    font-size: 70%
  }
}

@media screen and (min-width: 414px) and (max-width: 639px) {
  html {
    font-size: 80%
  }
}

@media screen and (min-width: 640px) and (max-width: 767px) {
  html {
    font-size: 75%
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  html {
    font-size: 80%
  }
}

@media screen and (min-width: 1024px) and (max-width: 1299px) {
  html {
    font-size: 82%
  }
}

@media screen and (min-width: 1300px) and (max-width: 1439px) {
  html {
    font-size: 85%
  }
}

@media screen and (min-width: 1440px) and (max-width: 1639px) {
  html {
    font-size: 90%
  }
}

@media screen and (min-width: 1640px) and (max-width: 1739px) {
  html {
    font-size: 95%
  }
}

@media screen and (min-width: 1740px) {
  html {
    font-size: 100%
  }
}

html,
body {
  height: 100%;
}

.main-container {
  width: 100%;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  background: url('pattern1.svg') center / 9.375rem repeat;
}

div picture {
  max-width: 36.375rem;
  width: 100%;
  height: 100%;
  display: flex;
  aspect-ratio: 0.83/1;
}

@media screen and (min-width: 0) and (max-width: 413px) {
  div picture {
    margin: 50px 30px;
  }
}

@media screen and (min-width: 414px) and (max-width: 639px) {
  div picture {
    margin: 50px 60px;
  }
}

@media screen and (min-width: 640px) {
  div picture {
    margin: 50px 30px;
  }
}

div picture img {
  object-fit: cover;
  height: auto;
  width: 100%;
}