* {
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    font-weight: 500;

}

body {
    background: linear-gradient(90deg, hsl(26, 66%, 8%) 0%, hsl(39, 77%, 1%) 100%);
    background-position: center;
    background-size: contain;
    background-color: black;
    margin-top: 20px;
    margin-left: 0;
    /* background-size: 100%; */
}

.bg video {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -100;
    object-fit: cover;
    
}   

.area {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -100;
    object-fit: cover;

}

h1 {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    text-align: center;
    color: #fff;
}

h2 img {
    width: 21%;
}
p {
    color: #bfbfbf;
}
h3 {
    font-weight: 400;
    color: white;
    margin-top: 10px;
    text-align: center;

}

h3 a{
    color: white;
}

h3 > a:hover{
    color:gold;
}

h4{
    color: #FF8BFF;
    text-align: center;
    font-size: 14px;
}

a:hover {
    text-decoration: none;
}

.container {
    width: 100%;
    margin-left: auto ;
    margin-right: auto;
}

.wrapper {
    width: 100%;
    padding: 0;
   /* white-space: nowrap;*/
    /*overflow: hidden;*/
    position: relative;
    z-index: 0;
}

.lgogo {
    text-align: center;
    align-items: center;
    position: relative;
    
}


.lgogo img {
    width: 8%;
    padding: 10px;
    align-items: center;
    opacity: 0.5;
}


.announcement {
    width: 100%;
    padding: 7px;
    color: white;
    position: relative;
    display: flex;

}


.fa-solid {
    font-size: 20px;
}
@media (max-width: 500px) {
    h2 img {
        display: flex;
        margin-left: auto;
        margin-right: auto;
        width: 31%;
    }
    


}

@media (max-width: 772px) {
.card {
    width: 33.33%; 
    height: 200px;

}

h1 {
    font-size: 25px;
}
.lgogo img {
    width: 18%;
}

h2 img {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 32%;
}

.slot-sidebar-nav i {
    font-size: 5px;
}

.img-zoom {
    display: inline-block;
    align-items: center;
}

h6 {
    font-size: 0.7rem;
}

p {
    font-size: 0.8rem;
}

.table {
    font-size: 0.75rem;
}

}

.slot-sidebar-nav {
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    overflow: auto;
    overflow-y: hidden;
 

}

.slot-sidebar-nav > li {
    border-bottom: 1px solid #FF8BFF;
    width: 20%;
    position: relative;
    display: block;
}

.slot-sidebar-nav > li > a {
    color: rgb(249, 244, 244);
    font-size: 5px;
    padding: 7px 10px;
    display: block;

}

.slot-sidebar-nav > li > a:hover {
    color:#FF8BFF;

}


.slot-sidebar-nav i {
    color: #fff;
    font-size: 5px;
    padding: 7px 10px;
    display: block;
}


h6 {
    text-align: center;
}

h5 {
    font-size: 10px;
    letter-spacing: 2px;
}


  .footer {
    display: inline-block;
    left: 0;
    bottom: 0px;
    width: 100%;
    color: white;
    text-align: center;
    font-size: 15px;
  }


.footer a {
    color: white;
}

.footer a:hover {
    color: gold;
}

/*Tulisan ngarang indah*/
.container-indah {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    /* width: 75%;  */
  }
  
  table.ngarang {
    width: 100%;
    text-align: left;
    color: white;
    border-collapse: collapse;
    border-radius: 10px;
    box-shadow: rgba(234, 168, 0, 0.35) 0px 5px 15px;
    backdrop-filter: blur(4px);
  
  }
  
  table.ngarang tr {
    border-radius: 10px;
  }
  
  table.ngarang td, table.ngarang th {
    padding: 10px 5px 10px;
    border-collapse: collapse;
    
  }
  
  table.ngarang th {
    text-align: center;
    font-weight: lighter;
    border-radius: 10px;
  }
  
  table.ngarang tbody td {
    color: #bfbfbf;
  }

  .table td, .table th {
    border-top: none;
    vertical-align: middle;
  }
  
  .table thead th {
    border-bottom: none;

    }

blockquote{
    quotes:"“" "”" "‘" "’";
    color:white;
    text-align:center;
    width:80%;
    margin-top:10px;
    margin-left:auto;
    margin-right:auto
}
blockquote::before{content:open-quote}
blockquote::after{content:close-quote}