@font-face {
    font-family: 'Katsukagi';
    src: url('../fonts/CFKenjiroDemo.woff2') format('woff2'),
         url('../fonts/CFKenjiroDemo.woff') format('woff'); /* Sesuaikan dengan nama dan path file font yang Anda unduh */
    font-weight: normal;
    font-style: normal;
}

a {
    color:crimson;
    text-decoration: none;
}
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Katsukagi', sans-serif; /* Gunakan font Katsukagi sebagai font utama */
}

.mainHeader {
    text-align: center;
    font-size: 80px;
    color: white;
    
}

.container-bg {
    background-image: url('../images/bg2.png');
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* height: 50vh; Menggunakan 100vh untuk membuatnya memenuhi tinggi layar */
}
.container-bg2 {
    background-image: url('../images/bg3.png');
    /* background-color: black; */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* height: 50vh; Menggunakan 100vh untuk membuatnya memenuhi tinggi layar */
}


.container-bg3 {
    background-image: url('../images/download.png');
    /* background-color: black; */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    
    /* Menggunakan 100vh untuk membuatnya memenuhi tinggi layar */
}

.container-bg4 {
    /* background-image: url('../images/bg3.png'); */
    background-color: black;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30vh;
    /* height: 50vh; Menggunakan 100vh untuk membuatnya memenuhi tinggi layar */
}

.container-bg5 {
    background-image: url('../images/bg4.png');
    /* background-color: black; */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    /* height: 50vh; Menggunakan 100vh untuk membuatnya memenuhi tinggi layar */
}

.container {
    position: relative;
    display: flex;
    justify-content: left;
    align-items: left;
    margin-right: 500px;
    height: 50vh;
}

.marquee-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 50px; /* Sesuaikan tinggi sesuai kebutuhan */
  }
  
  .marquee {
    position: absolute;
    top: 0;
    right: 1; /* Mengatur mulai dari sisi kanan */
    animation: marquee-animation 10s linear infinite; /* Mengatur kecepatan */
  }
  .marquee-left {
    position: absolute;
    bottom: 0;
    left: 1; /* Mengatur mulai dari sisi kiri */
    animation: marquee-animation-left 10s linear infinite; /* Mengatur kecepatan */
  }
  
  @keyframes marquee-animation {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%); /* Bergerak ke arah yang berlawanan */
    }
  }
  

  @keyframes marquee-animation-left {
    0% {
      transform: translateX(-100%); /* Mulai dari luar layar sebelah kiri */
    }
    100% {
      transform: translateX(100%); /* Pindah ke luar layar sebelah kanan */
    }
  }

p {
    margin-top: 200px;
    color: white;
    text-align: center;
}

a {
    text-decoration: none;
    color: white;
}