* {
  margin: 0;
  padding: 0;
}

body {
  background: url("../img/bg.webp"), #fff9e9;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  width: 100%;
}

p {
  padding: 0.5em;
  color: var(--theme-ui-colors-white);
}

ul, li {
  margin: 0.5em;
}

.rotator2-view-component-wrap {
  background-color: var(--theme-ui-colors-white);
}

.view-desktop {
  display: block;
}

.view-mobile {
  display: none;
}

.noticeboard {
  display: flex;
  justify-content: center;
  align-items: center;
}

.left, .right, .greenboard, .noticeboard-mobile {
  position: relative;
}

.comments img {
  width: 13vw;
}

.comments {
  position: absolute;
  top: 7%;
  left: 10%;
}

.pink-post-it img, .orange-post-it img {
  width: 6vw;
}

.pink-post-it {
  position: absolute;
  top: 17%;
  left: 50%;
}

.museum img {
  width: 16vw;
}

.museum {
  position: absolute;
  top: 37%;
  left: 26%;
}

.crowdsource img {
  width: 11vw;
}

.crowdsource {
  position: absolute;
  top: 6%;
  left: 40%;
}

.poster img {
  width: 12vw;
}

.poster {
  position: absolute;
  top: 38%;
  left: 15%;
}

.orange-post-it {
  position: absolute;
  top: 8%;
  left: 32%;
}

.greenboard-content {
  padding: 0 2em;
  width: 100%;
}

.greenboard-content p {
  font-family: "hellofont-id-chenyanxingkai", sans-serif;
  font-size: 1.1rem;
  line-height: 1.7rem;
  margin-bottom: 0;
}

.xie-shi-yan {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding-top: 2em;
  z-index: 1;
}

.xie-shi-yan img {
  width: 10vw;
}

.sponsored-logos, .other-sponsored-logos {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 4em;
  padding-top: 1rem;
}

.main-sponsor, .co-sponsor {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.main-sponsor p, .co-sponsor p, .co-presenter p, .supporting-partner p, .special-thanks p {
  margin: 0;
  padding: 0;
  color: var(--theme-ui-colors-black);
  font-size: 0.75rem;
  text-align: center;
}

.main-sponsor img {
  width: 150px;
}

.co-sponsor img {
  width: 200px;
}

.co-presenter-logos img, .supporting-partner img, .special-thanks img {
  width: 140px;
}

.special-thanks-names {
  display: flex;
  gap: 1em;
  justify-content: center;
  padding: 2rem;
}

.special-thanks-names p {
  font-size: 1.1rem;
}

.playlist {
  padding-top: 2rem;
}

.playlist-bg {
  background: url("../img/old-classroom.png"), #754d25;
  background-size: cover;
  background-position: center;
  border-radius: 1em;
  margin: auto;
  padding: 3em;
  display: flex;
  gap: 2em;
}

.playlist-content {
  display: flex;
  flex-direction: column;
  color: var(--theme-ui-colors-white);
  text-align: left;
}

.playlist-text {
  font-size: 1.4em;
}

.playlist-btn {
  max-width: 120px !important;
  width: 100% !important;
}

.playlist-btn button {
  border-radius: 5em;
  background-color: var(--theme-ui-colors-main) !important;
  color: var(--theme-ui-colors-white) !important;
  border: none;
  padding: 10px;
}

.playlist-btn button a {
  text-decoration: none;
  color: var(--theme-ui-colors-white) !important;
}

.playlist-btn button:hover {
  background-color: var(--theme-ui-colors-white) !important;
  color: var(--theme-ui-colors-main) !important;
}

.playlist-btn button a:hover {
  color: var(--theme-ui-colors-main) !important;
}

.xie-shi-yan-sub-page {
  width: 30%;
  display: flex;
}

@media (min-width: 1200px) and (max-width: 1470px) {
  .xie-shi-yan img {
    width: 12vw;
  }

  .comments img {
    width: 11vw;
  }

  .pink-post-it img, .orange-post-it img {
    width: 6vw;
  }

  .museum img {
    width: 14vw;
  }

  .crowdsource img {
    width: 10vw;
  }
}

@media (min-width: 1471px) and (max-width: 1599px) {
  .xie-shi-yan img {
    width: 10vw;
  }

  .comments img {
    width: 9vw;
  }

  .pink-post-it img, .orange-post-it img {
    width: 4vw;
  }

  .museum img {
    width: 13vw;
  }

  .crowdsource img {
    width: 9vw;
  }
}

@media (min-width: 1600px) {
  .xie-shi-yan img {
    width: 9vw;
  }

  .comments img {
    width: 8vw;
  }

  .pink-post-it img, .orange-post-it img {
    width: 4vw;
  }

  .museum img {
    width: 12vw;
  }

  .crowdsource img {
    width: 8vw;
  }

  .poster img {
    width: 10vw;
  }
}

@media (min-width: 1900px) {
  .museum img {
    width: 10vw;
  }
}

@media (min-width: 2400px) {
  .poster img {
    width: 9vw;
  }
  .museum img {
    width: 8vw;
  }
  .comments img {
    width: 6vw;
  }
}

@media (max-width: 1000px) {
  .view-desktop {
    display: none;
  }

  .view-mobile {
    display: block;
  }

  .xie-shi-yan img {
    width: 22vw;
  }

  .comments img {
    width: 26vw;
  }

  .comments {
    position: absolute;
    top: 10%;
    left: 7%;
  }

  .pink-post-it img, .orange-post-it img {
    width: 12vw;
  }

  .pink-post-it {
    position: absolute;
    top: 20%;
    left: 27%;
  }

  .museum img {
    width: 34vw;
  }

  .museum {
    position: absolute;
    top: 33%;
    left: 18%;
  }

  .crowdsource img {
    width: 24vw;
  }

  .crowdsource {
    position: absolute;
    top: 8%;
    left: 55%;
  }

  .poster img {
    width: 30vw;
  }

  .poster {
    position: absolute;
    top: 33%;
    left: 61%;
  }

  .orange-post-it {
    position: absolute;
    top: 11%;
    left: 74%;
  }

  .playlist-bg {
    flex-direction: column;
    padding: 1.5em;
  }

  .playlist-podcast {
    padding: 1em 0;
  }
}

@media (max-width: 767px) {
  .view-desktop {
    display: none;
  }

  .view-mobile {
    display: block;
  }

  .greenboard-content {
    padding: 0 1em;
  }

  .greenboard-content p {
    font-size: 1.3rem;
    line-height: 1.9rem;
  }

  .xie-shi-yan {
    padding-top: 1.3em;
  }

  .xie-shi-yan img {
    width: 30vw;
  }

  .comments img {
    width: 24vw;
  }

  .comments {
    position: absolute;
    top: 10%;
    left: 7%;
  }

  .pink-post-it img, .orange-post-it img {
    width: 12vw;
  }

  .pink-post-it {
    position: absolute;
    top: 20%;
    left: 27%;
  }

  .museum img {
    width: 33vw;
  }

  .museum {
    position: absolute;
    top: 30%;
    left: 23%;
  }

  .crowdsource img {
    width: 22vw;
  }

  .crowdsource {
    position: absolute;
    top: 10%;
    left: 52%;
  }

  .poster img {
    width: 27vw;
  }

  .poster {
    position: absolute;
    top: 35%;
    left: 64%;
  }

  .orange-post-it {
    position: absolute;
    top: 13%;
    left: 69%;
  }

  .sponsored-logos, .other-sponsored-logos {
    flex-direction: column;
    gap: 1em;
  }

  .co-presenter-logos, .supporting-partner-logos, .special-thanks-logos, .special-thanks-names {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
  }

  .special-thanks-names {
    padding: 0;
    padding-bottom: 2rem;
  }

  .main-sponsor p, .co-sponsor p, .co-presenter p, .supporting-partner p, .special-thanks p {
    font-size: 1.2rem;
  }
}