/* intro */

.clsIntroWrapper {
  position: relative;
  height: auto;
  margin: 7vh 15vw 5vh 15vw;
  padding: 3vh 3vw;
  color: #000;
  background-color: rgb(var(--text-back-rgb));
  background: linear-gradient(0deg, 
    rgba(var(--text-back-rgb), 0.5) 0%, 
    rgba(var(--text-back-rgb), 1) 15%, 
    rgba(var(--text-back-rgb), 1) 85%, 
    rgba(var(--text-back-rgb), 0.5) 100%);
  border-radius: var(--border-radius);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  clear: both;
  box-shadow: 2px 2px 8px rgba(32,32,32,0.7);
}

@media screen and (orientation: portrait) and (max-device-width: 539px) {
  .clsIntroWrapper { }  /*same as buttomwrapper*/
}

--@media screen and (max-width: 740px) { .clsIntroWrapper { width: auto; left: 2%; right: 5%; } } /*same as buttomwrapper*/
--@media screen and (max-width: 650px) { .clsIntroWrapper { width: auto; left: 8px; right: 8px; } }

--@media screen and (max-height: 600px) { .clsIntroWrapper { top: 4%; } }
--@media screen and (max-height: 550px) { .clsIntroWrapper { top: 2%; } }

#intro {
  font-size: 110%;
  line-height: 1.5;
}

@media screen and (max-height: 769px) {
  #intro { font-size: 102%; line-height: 1.4; padding: 20px; }
}

@media screen and (max-height: 480px) {
  #intro { font-size: 102%; line-height: 1.3; padding: 10px; }
}