* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
body,
html {
  overflow-x: hidden;
  max-width: 100vw;
}
.bg {
  background-image: url("img/Untitled_Artwork.jpg");
  width: 100%;
  align-items: center;
  justify-content: center;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg .content1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}
.bg .content1 .top {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 10%;
}
.bg .content1 .top .img1,
.img3 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25vh;
}
.bg .content1 .top .img2 {
  display: flex;
  align-items: last baseline;
  justify-content: center;
  height: 25vh;
}
.bg .content1 .top .img1 img,
.bg .content1 .top .img3 img {
  max-width: 10vw;
  height: auto;
}
.bg .content1 .top .img2 img {
  max-width: 50vw;
  height: auto;
}
.bg .content1 .top .img3 a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg .content1 .middle,
.bg .content2 .wrapper .top-secret,
.bg .content3 .wrapper .bottom-secret {
  display: none;
}
.bg .content1 .bottom {
  display: flex;
  justify-content: center;
  align-items: last baseline;
  height: 45vh;
}
.bg .content1 .bottom div {
  display: flex;
  gap: 15rem;
  align-items: center;
}
.bg .content1 .bottom div a img {
  width: 15vw;
  height: auto;
}
.bg .content2,
.bg .content4 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg .content2 .wrapper,
.bg .content3 .wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px;
  flex-direction: column;
  gap: 3rem;
}
.bg .content2 .wrapper .top img {
  max-width: 60vw;
  height: auto;
}
.bg .content2 .wrapper .middle img {
  max-width: 55vw;
  height: auto;
}
.bg .content3 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15rem;
}
.bg .content3 .wrapper .top img {
  max-width: 25vw;
  height: auto;
}
.bg .content3 .wrapper .bottom {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.bg .content3 .wrapper .bottom img {
  max-width: 30vw;
  height: auto;
}
.bg .content3 .wrapper .bottom img:nth-child(3) {
  max-width: 37vw;
  height: auto;
}
.bg .content4 a img {
  max-width: 8vw;
  height: auto;
  padding: 12px 0;
}
@media (max-width: 900px) {
  .bg {
    background-position: 65%;
  }
  .bg .content1 {
    height: 100vh;
  }
  .bg .content1 .top {
    gap: 60%;
  }
  .bg .content1 .top .img1,
  .img3 {
    height: 20vh;
  }
  .bg .content1 .top .img1 img,
  .bg .content1 .top .img3 img,
  .bg .content4 a img {
    max-width: 15vw;
  }
  .bg .content1 .top .img2,
  .bg .content3 .wrapper .bottom {
    display: none;
  }
  .bg .content1 .middle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .bg .content1 .middle img {
    max-width: 80vw;
    height: auto;
  }
  .bg .content1 .bottom {
    top: 30%;
    left: 100px;
    position: relative;
    height: 20vh;
  }
  .bg .content1 .bottom div {
    gap: 0;
  }
  .bg .content1 .bottom div a img {
    width: 25vw;
  }
  .bg .content2 .wrapper .middle img,
  .bg .content2 .wrapper .top img,
  .bg .content3 .wrapper .bottom-secret img {
    max-width: 100vw;
  }
  .bg .content3 {
    margin-top: 20px;
  }
  .bg .content3 .wrapper .bottom img {
    max-width: 70vw !important;
    margin-bottom: 1rem;
  }
  .bg .content3 .wrapper .top img {
    max-width: 45vw;
  }
  .bg .content3 .wrapper .bottom-secret {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 530px) {
  .bg .content1 {
    height: 70vh;
  }
  .bg .content1 .top {
    gap: 40%;
  }
  .bg .content1 .top .img1,
  .img3 {
    height: 15vh;
  }
  .bg .content1 .top .img1 img,
  .bg .content1 .top .img3 img,
  .bg .content4 a img {
    max-width: 20vw;
  }
  .bg .content1 .bottom {
    top: 15%;
    left: 70px;
    height: 28%;
  }
  .bg .content1 .bottom a img {
    width: 35vw;
  }
  .bg .content2 .wrapper,
  .bg .content3 .wrapper {
    gap: 0;
  }
  .bg .content2 .wrapper .middle {
    display: none;
  }
  .bg .content2 .wrapper .top-secret {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .bg .content2 .wrapper .top-secret img {
    max-width: 100vw;
  }
  .bg .content3 .wrapper .top img {
    max-width: 30vw;
  }
}