body {
background: linear-gradient(-45deg, #020222, #00506a, #020222, #00506a);
background-size: 400% 400%;
animation: gradient 9s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  25% {
    background-position: 50% 100%;
  }

  50% {
    background-position: 100% 50%;
  }

  75% {
    background-position: 50% 0%;
  }

  100% {
    background-position: 0% 50%;
  }
}

a {
text-decoration: none;
}

.container {
max-width: 700px;
margin: 0 auto;
}

.card .layanan:hover {
transition: transform 0.3s ease-in-out;
transform: scale(0.97);
}

.medsos {
margin: auto;
font-size: 20px;
animation: medsos-animation 3s ease infinite;
transform-origin: 50% 50%;
}

@keyframes medsos-animation {
0% { transform:translate(0,0) }
1.78571% { transform:translate(3px,0) }
3.57143% { transform:translate(0,0) }
5.35714% { transform:translate(3px,0) }
7.14286% { transform:translate(0,0) }
8.92857% { transform:translate(3px,0) }
10.71429% { transform:translate(0,0) }
100% { transform:translate(0,0) }
}

@keyframes rocket {
0%, 100% {
  transform: scale(1);
}
50% {
  transform: scale(1.1);
}
}

.rocket {
width: 100px;
animation: rocket 1s infinite alternate ease-in-out; 
}

.card {
background-color: rgba(233, 233, 233, 0.2);
color: #fff;
}

.card img {
width: 150px;
border-radius: 50%;
justify-content: center;
align-items: center;
box-sizing: border-box;
margin: auto;
}

.bg-name {
width: 250px;
justify-content: center;
align-items: center;
}

.bg-job {
width: 250px;
justify-content: center;
align-items: center;
}

.bio {
font-weight: bold;
padding: 15px;
width: 90%;
margin: auto;
}

.bio h3 {
font-size: 1.1em;
}

.bi-box-arrow-up-right {
border-radius: 5px;
padding: 5px;
background-color: rgba(233, 233, 233, 0.2);
box-shadow: 1px 1px 1px #000;
color: #fff;
}

.article-image:hover {
transition: transform 0.3s ease-in-out;
transform: scale(0.97);
} 

.article-image {
position: relative;
}

.article img {
margin-left: auto;
margin-right: auto;
display: block;
width: 100%;
height: 185px;
object-fit: cover; 
border-radius: 10px;
box-shadow: 1px 1px 5px #000;
}

.article h3 {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
padding: 10px;
margin: 0;
color: #fff;
font-weight: bold;
}

.tools:hover {
transition: transform 0.3s ease-in-out;
transform: scale(0.97);
} 

.element-font {
font-size: 19px;
color: #ffffff;
text-shadow: 2px 1px 2px #000;
}