@import url('https://fonts.googleapis.com/css2?family=Qwigley&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rochester&display=swap');
#judul{
  padding-top: 20px;
  font-size: 30px;
  font-family: 'Rochester', sans-serif;
  text-align: center;
  color: white;
}

#judul2 h4{
  font-size: 25px;
  text-align: center;
  color: gold;
}

body{
  background-size: cover;
  background-attachment: fixed;
  padding-top: 40px;
  background-image: url("/style/background.png");
}

@media (max-height:800px){
  footer { position: static; }
  header { padding-top:40px; }
}

#dobt img{
  --s: 105px;
  --b: 10px;
  --g: 18px;
  --c: #ffff;
  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s)/2) solid rgba(100, 61, 61, 0.6);
  outline-offset: calc(var(--s)/-2);
  cursor: pointer;
  transition: 0.3s;
}

#dobt img:hover{
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

#dobt img{
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-around   ;
  flex-wrap: wrap;
  width: 150px;
  height: 100px;
  border-radius: 1%;
}

#struktur-organisasi{
  padding-bottom: 0;
  text-shadow: 2px 2px red;
}

#struktur-organisasi .img{
  display: flex;
  justify-content: center;
  justify-content: space-around   ;
  flex-wrap: wrap;
  align-items: center;
}

#struktur-organisasi .buttonketengah{
  /* align-items: center; */
  justify-content: center;
  /* justify-content: space-around   ; */
  flex-wrap: wrap;
  text-shadow: 2px 2px red;
  display: flex;
}

#struktur-organisasi .buttonketengah .btn{
  color: white;
  background-color: gold;
  width: 290px;
  /* padding: 10px 20px; */
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  /* transition-duration: 0.4s; */
  cursor: pointer;
  align-items: center;
  border: none;
}

#struktur-organisasi .buttonketengah .button{
  color: black;
  border: 1px solid #8fa790;
  border-radius: 50px 10px;
  background-color: white;
}

#struktur-organisasi .buttonketengah i{
  padding-left: 20px;
  /* align-items: left; */
  /* justify-content: left; */
  /* justify-content: space-around   ; */
  flex-wrap: wrap;
  /* color: gold; */
  /* display: flex; */
}

#struktur-organisasi .buttonketengah .button:hover {
  color: white;
  border: 2px solid #c40c80 ;
  font-size: 23px;
  background-color: #9a9f9a;
}

#sosmed{
  padding-bottom: 10px;
  display: flex;
  /* align-items: center; */
  justify-content: center;
  justify-content: space-around   ;
  flex-wrap: wrap;
  padding-top: 10px;
}

.icons{
  column-gap: 25px;
  display: flex;
}

.icon{
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 26px;
  color: #ffff;
  border-radius: 50%;
  outline: 2px solid #fff;
  transition-property:
  outline-offset, outline-color, background-color;
  transition-duration: .25s;
  width: 60px;
}

  .icon:hover{
    outline-offset: 4px;
  }

  .icon:hover i{
    animation: shake .25s;
  }

  .icon--instagram:hover{
    background-image: radial-gradient(circle at 30% 107%,
    #fdf497 0% , #fdf497 5%,
    #fd5949 45%, #d6249f 80%,
    #285aeb 90%);
    outline-color: #a02d76;
  }

  .icon--youtube:hover{
    color:#ed0202;
    /* background-image: radial-gradient(circle at 30% 107%,
    #fdf497 0% , #fdf497 5%,
    #fd5949 45%, #d6249f 80%,
    #285aeb 90%); */
    outline-color: #a02d76;
  }
  .icon--facebook:hover{
    color: white;
    background-image: radial-gradient(circle at 30% 107%,
    #4973bc , #4973bc 5%,
    #4973bc 45%, #4973bc 80%,
    #4973bc 90%);
    outline-color: #a02d76;
  }
  
  #footer{
    bottom: 0;
    position: fixed;
}
/* 
@media (max-height:800px){
	footer { position: static; }
	header { padding-top:40px; }
} */
@media (max-height:800px){
  footer { 
    position: static;
    padding-bottom: 250px; 
  }
}

.footer-distributed{
  box-sizing: border-box;
	width: 100%;
  background-color: #2c292f;
	text-align: left;
	font: bold 16px sans-serif;
	padding: 50px 50px 60px 50px;
	margin-top: 80px;
}

.responsive {
  width: 100%;
  height: auto;
}

#tabungan {
  justify-content: center;
}

  @keyframes shake{
    10%{transform: rotate(10deg);}
    20%{transform: rotate(-10deg);}
    30%{transform: rotate(10deg);}
    40%{transform: rotate(-10deg);}
  }