html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
    margin-bottom: 0px;
    background-color: #212121; /* Light grey */
    background: repeating-linear-gradient( 45deg, #FFC0CB, #FFC0CB 5%, #84EB88 5%, #84EB88 10%, #F7C592 10%, #F7C592 15%, #CFA8FF 15%, #CFA8FF 20%, #62B9F4 20%, #62B9F4 25%, #FF7E6E 25%, #FF7E6E 30%, #FFF87B 30%, #FFF87B 35%);
    background-size: 100% 100%;
}

@media (min-width: 768px) {

    body {
        margin-bottom: 0px;
        background-color: #212121; /* Light grey */
        background: repeating-linear-gradient( 45deg, #FFF87B, #FFF87B 5%, #62B9F4 5%, #62B9F4 10%, #F7C592 10%, #F7C592 15%, #FF7E6E 15%, #FF7E6E 20%, #FFC0CB 20%, #FFC0CB 25%, #CFA8FF 25%, #CFA8FF 30%, #84EB88 30%, #84EB88 35%);
        background-size: 100% 100%;
    }
}


.flying-image {
    position: fixed;
    width: 100px; /* or whatever size you want for the images */
    height: 128.477px;
    background-size: cover;
    pointer-events: none; /* ensures the images don't interfere with any other interactions */
    opacity: 1;
    transition: opacity 0.5s;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.logo {
    display: flex; /* establishes a flex container */
    align-items: center; /* centers children vertically */
    justify-content: center; /* centers children horizontally */
    height: 100%; /* Sets the height of the logo container */
}

.logo img {
    max-width: 100%; /* limits image width to be a maximum of 75% of the container's width */
    height: 160px; /* specifies a fixed height */
    display: block; /* block level image, required for centering in some cases */
    padding: 36px; /* adds some space around the image */
}



.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-list {
    height: 204px; /* Adjust as needed */
    overflow-y: scroll;
    border-style: solid;
    border-width: thick;
}

.video-item {
    cursor: pointer;
    padding: 5px; /* Or appropriate spacing */
    text-transform: lowercase;
    font-family: var(--font-ui);
    color: #212121;
}

.color-1 {
    background-color: #84EB88; /* pastel green */
}

.color-2 {
    background-color: #62B9F4; /* pastel blue */
}

.color-3 {
    background-color: #F7C592; /* pastel orange */
}

.color-4 {
    background-color: #FF7E6E; /* pastel red */
}

.color-5 {
    background-color: #FFF87B; /* pastel yellow */
}

.color-6 {
    background-color: #CFA8FF; /* pastel purple */
}

.color-7 {
    background-color: #FFC0CB; /* pastel pink */
}



/* ... add as many colors as you need */

.video-item.current { /* Current playing video styling */
    border-style: solid;
    border-width: thick;
}

.video-controls {
    display: flex; /* Establishes a flex container */
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    padding: 16px 4px; /* Your existing padding */
    width: 100%; /* Full width to center within the whole page */
}

#previousButton {
    background: url('content/left_carrot.png') no-repeat center;
    background-size: contain; /* Make sure the image covers the button */
    width: 50px; /* You must set a width */
    height: 50px; /* You must set a height */
    outline: none;
}

#shuffleButton {
    background: url('content/shuffleNov.png') no-repeat center;
    background-size: contain;
    width: 160px;
    height: 50px;
    outline: none;
}

#shuffleButton.disabled {
    background: url('content/shufflnNov.png') no-repeat center;
    background-size: contain;
    width: 160px;
    height: 50px;
    outline: none;
}

#nextButton {
    background: url('content/right_carrot.png') no-repeat center;
    background-size: contain;
    width: 50px; /* You must set a width */
    height: 50px; /* You must set a height */
    outline: none;
}

.video-controls button {
    padding: 4px 4px; /* Adjust as necessary to accommodate your images */
    margin: 0 5px;
    border-radius: 4px;
    border: none; /* Consider removing the border for a cleaner look with the images */
    cursor: pointer; /* To make it clear the element is clickable */
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: #FAF9F6;
    border-radius: 10px;
    border: 3px solid #FAF9F6;
    transition: width 0.3s ease; /* Smooth transition for the width */
}

::-webkit-scrollbar-track {
    background: #CDCDCD;
}