@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

body{
   background-color: #090D15;
   font-family: "Orbitron", sans-serif;
   font-optical-sizing: auto;
}

.btn {
   background-color: #754FF7;
   color: #f5f5f5!important;
   transition: all 0.3s ease;
}

.btn:hover{
   background-color: #805DF8;
}
.item {
   margin: 15px;
   border: solid 1px #2c2e40;
   border-radius: 8px;
   overflow: hidden;
}
.embed-responsive {
   width: auto;
   aspect-ratio: 16/9;
}

.owl-next span,
.owl-prev span {
   font-size: 22px;
   color: #e5e5e5;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #2c2e40;
   overflow: hidden;
   border-radius: 50%;
}
button.owl-next,
button.owl-prev,
button.owl-next:hover span,
button.owl-prev:hover span {
   background-color: #754FF7;
   overflow: hidden;
   border-radius: 50% !important;
}



.owl-dot{
   border-radius: 50%;
}

.owl-nav{
   display: flex;
   flex-direction: row;
   justify-content: end;
   margin-right: 1em;
}

.owl-dots{
   display: inline-block;
   text-align: left;
}

.top-bar {
   height: 80px;
   display: flex;
   margin: 0;
   align-items: center;
   background-color: #181928;
   box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
   color: #f5f5f5;
   justify-content: space-between;
}

img.brand-logo {
   height: 42px;
   width: auto;
}

.top-bar ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   display: flex;
   gap: 8px;
}

.top-bar ul li {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background-color: #2c2e40;  
   box-sizing: border-box;
}

.icon i {
   font-size: 22px;
   color: #f5f5f5;
   line-height: 22px;
}

.icon:hover {
   background-color: #754FF7;
}

.text-muted.date{
   color: #2c2e40;
   font-size: 0.6em;
   padding-top: 8px;
   text-align: left;
}

.video-info{
   font-size: 0.8em;
   color: #999999;
   padding: 8px;
}

@media (max-width: 450px){
   body{
      font-size: 12px;
   }
   .text-muted.date{
      font-size: 1em;
   }
}