.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }

  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
  }

  .kotak {
    width: 30px;
    height: 30px;
    background-color: #BADA55;
    text-align: center;
    line-height: 30px;
    margin: 3;
    float: left;
    transition: 1s;
  }

  .biru {
    background-color: #0ABFBC;
  }

  .Hijau {
    background-color: #BADA55;
  }

  .Orange {
    background-color: darkorange;
  }

  .kotak:hover {
    transform: rotate(360deg);
    border-radius: 50%;
  }

  .close {
    position: static;
    right: ;
    width: 20px;
    height: 20px;
    vertical-align: top;
    margin-right: 0;
  }

  .Lihat {
    background-color: burlywood;
    width: 80%;
    height: 90%;
    overflow: hidden;
  }
  

  iframe {
    max-width: 95%;
    text-align: center;
  }