xpub.nl/2022/pagedjs/mobile_p.css

@media only screen and (min-device-width: 360px) and (max-device-width: 767px) and (orientation: portrait) {
  body {
    overflow: hidden;
  }
  #home {
    top: 4%;
    left: 2.75%;
    font-size: 0.68rem;
    letter-spacing: 0.05rem;
    z-index: 999;
    color: black;

    padding: 0.25% 0.7%;
  }
    
    #designer {
    position: absolute;
    z-index: 999;
    width: 15%;
    bottom: 0%;
    right: 3%;
    }

  .wrapper {
    width: 100%;
  }

  #title {
    width: 68%;
    padding: 0 0.15%;
    margin: 3% auto;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
  }

  #title h1 {
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 0.005rem;
    line-height: 1.4;
    margin-top: 2%;
    margin-bottom: 2%;
  }
  #tape {
    transform: rotate(45deg);
    left: 75%;
    top: -1.6%;
  }
  .bar {
    box-shadow: rgba(0, 0, 0, 0.6) 0px 2px 16px,
      rgba(0, 0, 0, 0) 0px 7px 13px 3px, rgba(0, 0, 0, 0.1) 0px -3px 0px inset;
  }

  .bar1 {
    top: 17%;
    left: 6.5%;
    width: 40%;
    height: 30.5%;
  }
  .bar1 .frame {
    width: 85%;
    height: 90%;
    border: 2px navy double;
    justify-content: start;
  }

  .bar1 h3 {
    font-size: 0.9rem;
    line-height: 1;
    margin-top: 5%;
    margin-bottom: 0;
  }
    
    #adobe{
    z-index: 10;
    }
    
    #nomore{
    z-index:9;    
    display: block;
    }
    
  #adobe,
  #nomore {
    position: absolute;
/*     z-index: 10; */
    width: 18%;
    top: 84.5%;
    left: 80%;
    transform: translate(-50%, -50%);
  }
  .bar1 p {
    font-size: 0.7rem;
    /* line-height: 125%; */
    padding: 0% 6%;
  }

  .bar2 {
    top: 20%;
    left: 55.5%;
    width: 36%;
    height: 29.5%;
    display: inline-block;
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
  }

  .bar2:hover {
    transform: none;
  }

  .deco1 {
    margin-left: 0%;
  }

  .bar2 .frame {
    position: absolute;
    /* background-color: yellow; */
    top: 0;
    left: 5%;
    width: 97%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1% 2%;
  }

  .bar2 h3 {
    font-size: 0.9rem;
    width: 90%;
    margin-bottom: 0;
    margin-top: 0;
  }
  .bar2 p {
          width: 95%;
    font-size: 0.7rem;
    line-height: 122%;
  }

  .bar2 .frame img {
    width: 45.5%;
  }
  .bar3 {
    top: 57%;
    left: 6.5%;
    width: 32%;
    height: 29.5%;
  }

  .bar3 h3 {
    font-size: 1rem;
    line-height: 0;
    margin-bottom: 4%;
  }
  #t1{
    padding-top: 5%;
    }

  #t1,
  #t5 {
    color: #2b710c;
  }
  #t2,
  #t6 {
    color: #c11818;
  }
  #t3,
  #t4 {
    color: #0b0d7f;
  }
  #t6 {
    font-size: 0.6rem;
    text-align: center;
    margin-top: 40%;
    padding-top: 0;
  }

  #note {
    top: 57%;
    left: 6.5%;
    width: 64%;
    height: 29.5%;
  }

  .page1 {
    color: #c11818;
    background: #fbfcf7;
    background: linear-gradient(
      to right,
      #fbfcf7 0%,
      #fffaed 50%,
      #f0edd3 100%
    );
    left: 0;
    justify-content: start;
    align-items: flex-start;
  }
  .page2 {
    background: #fbfcf7;
    background: linear-gradient(to left, #fbfcf7 0%, #fffaed 39%, #d4d1ba 90%);
    justify-content: center;
    align-items: center;
    left: 50%;
    overflow-wrap: break-all;
  }
  .page1 p,
  .page2 p {
  }
  .page1 p {
    font-size: 0.6rem;
    padding: 1% 5%;
    width: 100%;
  }
  .page2 p {
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 2% 15%;
  }

  .bar4 {
    top: 55%;
    left: 43.5%;
    width: 50%;
    height: 39.5%;
  }
  .bar4 .frame {
    padding: 0% 3%;
    width: 90%;
    display: inline-block;
  }

  .bar4 .frame img {
    width: 20%;
    position: absolute;
    right: 2%;
    top: 2%;
  }
  .bar4 h3 {
    font-size: 1rem;
    line-height: 0;
    line-height: 1.4;
    margin-top: 4.5%;
    margin-bottom: 0;
    cursor: pointer;
    text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4),
      -1px -1px 0 rgba(255, 255, 255, 1);
  }

  .bar4 p {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 125%;
    padding: 1% 2%;
    margin-top: 4%;
  }

  .bar5 {
    transform: rotate(40deg);
    top: 44%;
    left: 37%;
    width: 20%;
    z-index: 11;
    padding-left: 1.5%;
    padding-right: 1%;
  }

  .bar5 p {
    /* margin: 0 auto; */
    padding: 0% 2%;

    font-size: 0.7rem;
    letter-spacing: 0;
  }

  .bar5 p a {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
  }
}