/* Scrollbar */
.scrollbar::-webkit-scrollbar {
   width: 10px;
}

.scrollbar {
   overflow-y: scroll;
   scrollbar-width: thin;
   scrollbar-color: rgba(255, 255, 255, 0.60) rgba(255, 255, 255, 0.116);
}

.scrollbar::-webkit-scrollbar-track {
   background-color: rgba(255, 255, 255, 0.1);
}

.scrollbar::-webkit-scrollbar-thumb {
   background-color:rgba(255, 255, 255, 0.20);
}

/* Transparency */
.bg-primary {
   background: rgba(39, 39, 38, 0.98);
   box-shadow: 0 8px 32px 0 rgba(113, 114, 129, 0.37);
   backdrop-filter: blur(0.0px);
   -webkit-backdrop-filter: blur(0.0px);
}

.sidebar-icons ul li:hover {
   background: rgba( 255, 255, 255, 0.2);
   box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0);
   backdrop-filter: blur( 0.0px );
   -webkit-backdrop-filter: blur( 0.0px );
   border: 1px solid rgba( 255, 255, 255, 0.18 );
}

nav li {
   border: 1px solid rgba(255, 255, 255, 0);
   padding: 0.7rem 0.9rem;
}

nav li:hover {
   background: rgba( 255, 255, 255, 0.3);
}

/* Backgrounds */
.bg-secondary {
   background: rgba(59, 59, 56, 0.664);
   border: 1px solid rgba(59, 59, 56, 0);
}

.bg-secondary:hover {
   background: rgba( 255, 255, 255, 0.2);
}

.office {
   background: #D83B01;
}

.onenote {
   background: #641790;
}


/* Slidehsow animation */
@keyframes bg-animation {
   0% {background: url(/images/wallpapers/bg-4.jpg) no-repeat center center/cover;}
   12.5% {background: url(/images/wallpapers/bg-2.jpg) no-repeat center center/cover;}
   23% {background: url(/images/wallpapers/bg-3.jpg) no-repeat center center/cover;}
   35.5% {background: url(/images/wallpapers/bg-4.jpg) no-repeat center center/cover;}
   48% {background: url(/images/wallpapers/bg-5.jpg) no-repeat center center/cover;}
   60.5% {background: url(/images/wallpapers/bg-6.jpg) no-repeat center center/cover;}
   73% {background: url(/images/wallpapers/bg-7.png) no-repeat center center/cover;}
   80% {background: url(/images/wallpapers/bg-8.jpg) no-repeat center center/cover;}
   100% {background: url(/images/wallpapers/bg-3.jpg) no-repeat center center/cover;}
}

.bg-animation {
   animation: bg-animation 100s infinite alternate-reverse ease-in-out;
}