body {
  background-image: url("../images/dither_it_tree-min.png") !important;
  background-position-y: 50vh;
  background-repeat: repeat-x;
  background-size: cover;
}

#wrapper3 {
  display: block !important;
}

.questions {
  margin-top: 0rem !important;
}

.main-title {
  width: 60% !important;
}

.main-section {
  height: 88.5vh !important;
  background-color: rgb(255, 255, 255);
  box-shadow: none !important;
  border: 1px dotted green;
  overflow-y: hidden !important;
}

#workshop-ele {
  position: relative;
  width: 75%;
}

#workshop-ele li {
  margin-left: 2rem;
  margin-top: 1rem;
  margin-bottom: 0;
  line-height: 1.75rem;
}

.marquee {
  border: 4px dashed #51a953;
  width: 100%;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 2vh;
}

.noti {
  font-family: "Sligoil-Micro Regular";
  color: #51a953;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 0.65vh;
}

.marquee__item {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: marquee-content;
  animation-timing-function: linear;
  padding: 5px 15px 5px 15px;
}

.marquee:hover .marquee__item {
  animation-play-state: paused;
}

@keyframes marquee-content {
  /* Element one fully ON screen at left-edge of container. */
  from {
    transform: translateX(0%);
  }
  /* Element one fully OFF screen (just beyond left-ledge of container). */
  to {
    transform: translateX(-100%);
  }
}

/*Desktop HIDPI 1920 x 1080 https://blisk.io/devices*/
@media only screen and (min-width: 1441px) and (max-width: 1920px) {
  #workshop-ele li {
    font-size: 1.15rem;
    line-height: 1.6;
  }
}

/******Laptop Big******/
@media only screen and (min-width: 1280px) and (max-width: 1440px) {
}

/******Laptop Small******/
@media only screen and (min-width: 921px) and (max-width: 1279px) {
}

/******Mobile Portrait******/
@media only screen and (min-device-width: 360px) and (max-device-width: 920px) and (orientation: portrait) {
  body {
    background-image: none !important;
  }

  .wrapper {
    top: 0 !important;
    left: 1.75vw;
  }

  .main-title {
    width: 90% !important;
  }

  .main-section {
    overflow-y: auto !important;
    margin-left: 4.5vw !important;
    padding: 0.5rem 1.75rem !important;
    /*margin-left and padding are different with other pages*/
    height: 100vh !important;
    box-shadow: none;
    border: none;
  }

  #workshop-ele {
    width: 100%;
  }
}