/* Basic styling */
body {
    font-family: Arial, sans-serif;
    background-color: rgb(226, 232, 237);
    text-align: center;
    margin: 0;
    padding: 0;
    animation: animasi-warna 10s ease-in-out infinite;
    background-size: cover;
    background-position: center;
  }

header {
    background-color: rgb(22, 22, 22);
    color: rgb(226, 232, 237);
    padding:20px;
}

h1 {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
letter-spacing: -1px;
word-spacing: -1.8px;
color: rgb(226, 232, 237);
font-weight: 400;
text-decoration: none solid rgb(68, 68, 68);
font-style: normal;
font-variant: normal;
text-transform: none;

animation: animasi-h1 4s ease-in-out infinite;
  transform-origin: center;

    margin: 0;
    font-size: 2em;
    
}


main {
    margin-top: 50px;
}

.button-list {
    display: inline-block;
    margin-top: 20px;
}

.btn {
    display: block;
    margin: 40px 0;
    padding: 25px 80px;
    background-color: rgb(22, 22, 22);
    color: rgb(226, 232, 237);
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
    box-shadow: -2px 11px 26px 5px rgba(0,0,0,0.75);
-webkit-box-shadow: -2px 11px 26px 5px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 11px 26px 5px rgba(0,0,0,0.75);


}

.btn:hover {
    background-color: #000000;
}

footer {
    margin-top: 50px;
    padding: 20px 0;
    background-color: #333;
    color: white;
}

@keyframes animasi-h1 {
    0% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(6px);
    }
    50% {
        transform: translateY(-6px);
      }
    75% {
        transform: translateY(6px);
      }
      100% {
        transform: translateY(0px);
      }
  }

  @keyframes animasi-warna {
    0% {
        background-image: url('gambar1.jpg');
      }
      20% {
        background-image: url('gambar2.jpg');
      }
      40% {
        background-image: url('gambar3.jpg');
      }
      60% {
        background-image: url('gambar4.jpg');
      }
      80% {
        background-image: url('gambar5.jpg');
      }
      100% {
        background-image: url('gambar1.jpg');
      }
  }