html{
    scroll-behavior: smooth;
}

body{
  font-family: 'Mitr', sans-serif;
}

.all-link{
    margin-left: 20px;
    margin-top: 10px;
    line-height: 35px;
}

.text-link{
    text-decoration: none;
}

.center{
    text-align: center;
}

.margin-auto{
    margin: auto;
}

.allimglink{
    width: 100%;
}

.text-kl{
    background-color: rgba(0, 0, 0, 0.600);
    color: white;
    position: absolute;
    width: 100%;
    right: 0;
    bottom: 40%;
    padding: 5px 0px;
}


.img-logo{
  width: 100%; max-width: 120px;
}

.text-logo{
  font-size: 40px; font-weight: bold;
}

.con-logo{
  margin-left: -60px; margin-bottom: 10px;
}

@media only screen and (max-width: 1080px) {
  .img-logo{
    width: 100%; max-width: 80px;
  }

  .text-logo{
    font-size: 25px; font-weight: bold;
  }
  .con-logo{
    margin-left: 0px; margin-bottom: 20px;
  }

}


h6 {
    -align: center;
    font-size: x-large;
    padding: 0.4em 0.5em;
    color: #000000;
    background: #f4f4f4;
    border-left: solid 5px #ffaf58;
    border-bottom: solid 3px #d7d7d7;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
    }  

h7 {
    font-size: x-large;
    padding: 0.4em 0.5em;
    display: inline-block;
    color: #000000;
    background: #f4f4f4;
    border-left: solid 5px #ffaf58;
    border-bottom: solid 3px #d7d7d7;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
    }    

    h8 {
      font-size: larger;
      padding: 0.4em 0.5em;
      display: inline-block;
      color: #000000;
      background: #f4f4f4;
      border-left: solid 5px #1322f1;
      border-bottom: solid 3px #d7d7d7;
      box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
      } 

      h9 {
        font-size: x-large;
        padding: 0.4em 0.5em;
        display: inline-block;
        color: #000000;
        background: #f4f4f4;
        border-left: solid 5px #1322f1;
        border-bottom: solid 3px #d7d7d7;
        box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
        }    

      h10 {
        font-size: 17.5px;
        font-weight: bold;
        }

      h11 {
        font-size: 25px;
        padding: 0.3em;
        display: inline-block;
        color: #000000;
        background: #f4fffc;
        border-left: solid 5px #ffaf58;
        border-bottom: solid 3px #d7d7d7;
        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
        /*box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;*/
        }

        h12 {
          font-size: xx-large;
          padding: 0.4em 0.5em;
          display: inline-block;
          color: #000000;
          background: #f4f4f4;
          border-left: solid 5px #ffaf58;
          border-bottom: solid 3px #d7d7d7;
          box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
          }    

          h13 {
            font-size: larger;
            padding: 0.4em 0.5em;
            display: inline-block;
            color: #000000;
            background: #f4f4f4;
            border-left: solid 5px #ffaf58;
            border-bottom: solid 3px #d7d7d7;
            box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
            }    

            h14 {
              font-size: x-large;
              padding: 0.4em 0.5em;
              display: inline-block;
              color: #000000;
              background: #f4f4f4;
              border-left: solid 5px #ffaf58;
              border-bottom: solid 3px #d7d7d7;
              box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
              }  
          
              h15 {
                font-size: 25px;
                padding: 0.3em;
                display: inline-block;
                color: #000000;
                background-image: linear-gradient(to right, #53c43c, #c6e4c0);
                border-left: solid 5px #14770f;
                border-bottom: solid 3px #979797;
                box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
                /*box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;*/
                }

                h16 {
                  font-size: 25px;
                  padding: 0.3em;
                  display: inline-block;
                  color: #000000;
                  background-image: linear-gradient(to right, #29bcda, #abe4f0);
                  border-left: solid 5px #1a6e8f;
                  border-bottom: solid 3px #979797;
                  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
                  /*box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;*/
                  }

                  h17 {
                    font-size: 25px;
                    padding: 0.3em;
                    display: inline-block;
                    color: #000000;
                    background-image: linear-gradient(to right, #eb9c58, #f6deca);
                    border-left: solid 5px #ce6e33;
                    border-bottom: solid 3px #979797;
                    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
                    /*box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;*/
                    }

                    h18 {
                    font-size: 25px;
                    padding: 0.3em;
                    display: inline-block;
                    color: #000000;
                    background-image: linear-gradient(to right, #d058eb, #f6deca);
                    border-left: solid 5px #ce33b4;
                    border-bottom: solid 3px #979797;
                    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
                    /*box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;*/
                    }

    a {
        color: inherit;
        text-decoration: none;
      }
      
      a {
        background:
          linear-gradient(
            to right,
            rgba(241, 237, 237, 0),
            rgba(255, 255, 255, 0)
          ),
          linear-gradient(
            to right,
            rgba(255, 0, 0, 1),
            rgba(255, 0, 180, 1),
            rgba(0, 100, 200, 1)
        );
        background-size: 100% 3px, 0 3px;
        background-position: 100% 100%, 0 100%;
        background-repeat: no-repeat;
        transition: background-size 400ms;
      }

      a:hover {
        background-size: 0 3px, 100% 3px;
      }

      img2 {
        --c: #e9741b; /* the border color */
        --b: 3px;    /* the border thickness*/
        --g: 0px;     /* the gap on hover */
        
        padding: calc(var(--g) + var(--b));
        --_g: #0000 25%,var(--c) 0;
        background: 
          conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g))
           var(--_i,200%) 0  /200% var(--_i,var(--b))  no-repeat,
          conic-gradient(            at bottom var(--b) left  var(--b),var(--_g))
           0   var(--_i,200%)/var(--_i,var(--b)) 200%  no-repeat;
        transition: .3s, background-position .3s .3s;
        cursor: pointer;
      }
      img2:hover {
        --_i: 100%;
        transition: .3s, background-size .3s .3s;
      }

      .grow img{
        transition: 0.3s ease;
        }
        
        .grow img:hover{
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        transition: 0.3s ease;
        }

        .border-image-clip-path {
          width: 100%;
          height: 100%;
          border: 5px solid;
          border-image: linear-gradient(45deg, gold, deeppink) 1;
          clip-path: polygon(0px round 10px);
          animation: huerotate 3s infinite linear;
          filter: hue-rotate(360deg);
      }


      @keyframes huerotate {
          0% {
              filter: hue-rotate(0deg);
          }
          100% {
              filter: hue-rotate(360deg);
          }
      }