iframe  {
      margin: auto;
      width: 800px;
      height: 450px;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
}

.box-size  {
      width: 700px;
      height: 700px;
      margin: auto;
}

.extra-data  {
      width: 70%;
      margin: auto;
}

.pic-mid   {
      margin: auto;
      width: 900px;
}

.pic-val  {
      font-size: 1.4rem;
      color: rgb(47, 25, 245);
}

.js_pic  {
      display: block;
      max-height:700px;
      max-width:700px;
      width: auto;
      height: auto;
      margin-left: auto;
      margin-right: auto;
}


ol  {
      display: grid;
      grid-template-columns: 30% 30%;
      column-gap: 7%;
      margin-left: 15%;
}

.downloadBtn  {
      background-color: blanchedalmond;
      color: rgb(245, 56, 56);
      font-size: 1rem;
      font-weight: bolder;
      padding: 0.25rem;
      border-radius: 0.7rem;
      text-align: center;
      margin-bottom: 0.8rem;
}

.downloadBtn:hover  {
     background-color: rgb(199, 199, 247);
     box-shadow: 3px 2px rgb(163, 162, 162);
}

@media only screen and (max-width: 900px)   {
      iframe  {
            margin: auto;
            width: 768px;
            height: 532px; 
      }

      .list_cls  {
            font-size: 1.2rem;
      }

      ol  {
            display: grid;
            grid-template-columns: 40% 40%;
            column-gap: 10%;
            margin-left: 2%;
      }
} 


@media only screen and (max-width: 768px)   {
      iframe      {
            margin: auto;
            width: 608px;
            height: 342px; 
      }

      .extra-data  {
            width: 75%;
      }

      .pic-mid   {
            margin: 0;
            width: 640px;
      }

      .box-size  {
            width: 580px;
            height: 580px;
            margin: auto;
      }

      .js_pic  {
            display: block;
            max-height: 580px;
            max-width: 580px;
            width: auto;
            height: auto;
            margin-left: auto;
            margin-right: auto;
      }

      .js_arro  {
            width: 30px;
            height: 30px;
      }

      .list_cls  {
            font-size: 1.1rem;
      }

      ol  {
            display: grid;
            grid-template-columns: 50% 40%;
            column-gap: 7%;
            margin-left: 2%;
      }
} 

@media only screen and (max-width: 640px) {
      iframe  {
            margin: auto;
            width: 448px;
            height: 252px; 
      }

      .extra-data  {
            width: 85%;
      }

      .pic-val  {
            font-size: 1rem;
      }

      .pic-mid   {
            margin: 0;
            width: 400px;
      }

      .box-size  {
            width: 400px;
            height: 400px;
            margin: auto;
      }

      .js_pic  {
            display: block;
            max-height: 400px;
            max-width: 400px;
            width: auto;
            height: auto;
            margin-left: auto;
            margin-right: auto;
      }

      .js_arro  {
            width: 25px;
            height: 25px;
      }

      .extra-data  {
            width: 90%;
            margin: auto;
      }

      .list_cls  {
            font-size: 1rem;
      }

      ol  {
            display: grid;
            grid-template-columns: 50% 35%;
            column-gap: 10%;
            margin-left: 2%;
      }
}

@media only screen and (max-width: 420px) {
      iframe  {
            margin: auto;
            width: 400px;
            height: 225px;
      }

      .extra-data  {
            width: 98%;
      }


      .extra-data  {
            width: 98%;
            margin: auto;
            font-size: 1rem;
      }

      .pic-val  {
            font-size: 1rem;
      }

      .pic-mid   {
            margin: 0;
            width: 400px;
      }

      .box-size  {
            width: 340px;
            height: 340px;
            margin: auto;
      }

      .js_pic  {
            display: block;
            max-height: 340px;
            max-width: 340px;
            width: auto;
            height: auto;
            margin-left: auto;
            margin-right: auto;
      }

      .js_arro  {
            width: 20px;
            height: 20px;
      }

      ol  {
            display: grid;
            grid-template-columns: 50% 40%;
            column-gap: 9%;
            margin-left: 1%;
      }

      .list_cls  {
            font-size: 1rem;
      }
}