@import url("https://fonts.googleapis.com/css?family=Roboto:100");

    html,
    body {
      background: url(https://pkl.stis.ac.id/57/assets/images/aaa.jpg) no-repeat bottom fixed;
      background-size: cover;
    }

    h4,
    h2 {
      font-family: "Roboto", sans-serif;
    }

    h2 {
      font-size: 40pt;
    }

    h4 {
      font-size: 30pt;
    }

    .card-header {
      border-bottom: white;
      background-color: white;
    }

    .paragraf {
      text-indent: 3em;
    }

    .carousel-control {
      border-radius: 100%;
      background: rgb(224, 222, 222);
      height: 50px;
      width: 50px;
      text-align: center;
    }

    .carousel-control-icon {
      font-weight: bolder !important;
      font-size: 30px;
      color: rgb(6, 60, 139)
    }

    @media (min-width: 768px) {

      /* show 3 items */
      .carousel-inner .active,
      .carousel-inner .active+.carousel-item,
      .carousel-inner .active+.carousel-item+.carousel-item {
        display: block;
      }

      .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
      .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item,
      .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item {
        transition: none;
      }

      .carousel-inner .carousel-item-next,
      .carousel-inner .carousel-item-prev {
        position: relative;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }

      .carousel-inner .active.carousel-item+.carousel-item+.carousel-item+.carousel-item {
        position: absolute;
        top: 0;
        right: -33.33333%;
        z-index: -1;
        display: block;
        visibility: visible;
      }

      /* left or forward direction */
      .active.carousel-item-left+.carousel-item-next.carousel-item-left,
      .carousel-item-next.carousel-item-left+.carousel-item,
      .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item,
      .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item+.carousel-item {
        position: relative;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
      }

      /* farthest right hidden item must be abso position for animations */
      .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
      }

      /* right or prev direction */
      .active.carousel-item-right+.carousel-item-prev.carousel-item-right,
      .carousel-item-prev.carousel-item-right+.carousel-item,
      .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item,
      .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item+.carousel-item {
        position: relative;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
      }
    }