body {
    background-color:black;
    overflow:hidden;
    overflow-y:auto;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.h1 {
    color:rgb(117, 200, 252);
    text-align:center;
}

.p {
    color:rgb(117, 200, 252);
    text-align:center;
}

.h2 {
    background:linear-gradient(rgb(117, 200, 252), rgb(117, 200, 252));
    background-clip:text;
    color:transparent;
}

.b1 {
    position:absolute;
    top:25px;
    left:8px;
    background-color:rgba(255, 255, 255, 0.03);
    color:rgb(117, 200, 252);
    border:1px solid rgb(117, 200, 252);
    border-radius:5px;
    width:80px;
    height:30px;
    cursor:pointer;
    transition-duration:500ms;
}

.b1:hover{
    width:85px;
    height:35px;
    -webkit-box-reflect: below 0 linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}

.b2 {
    position:absolute;
    top:25px;
    left:100px;
    background-color:rgba(255, 255, 255, 0.03);
    color:rgb(117, 200, 252);
    border:1px solid rgb(117, 200, 252);
    border-radius:5px;
    width:80px;
    height:30px;
    cursor:pointer;
    transition-duration:500ms;
}

.b2:hover{
    width:85px;
    height:35px;
    -webkit-box-reflect: below 0 linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}

.b3 {
    position:absolute;
    top:25px;
    left:195px;
    background-color:rgba(255, 255, 255, 0.03);
    color:rgb(117, 200, 252);
    border:1px solid rgb(117, 200, 252);
    border-radius:5px;
    width:80px;
    height:30px;
    cursor:pointer;
    transition-duration:500ms;
}

.b3:hover{
    width:85px;
    height:35px;
    -webkit-box-reflect: below 0 linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}

.clock-date-position {
    display:flex;
    justify-content:center;
    align-items:center;
    justify-self:center;
    color:white;
    font-size:30px;
    transition-duration:500ms;
    width:300px;
    height:40px;
    background:linear-gradient(rgb(117, 200, 252), rgb(117, 200, 252));
    background-clip:text;
    color:transparent;
    flex-direction:column;
}

.box1 {
    position:absolute;
    top:16px;
    left:14px;
    border-image-slice:1;
    width:300px;
    height:80px;
}

.h3 {
    position:relative;
    text-align:center;
    top:-18px;
    color:rgb(117, 200, 252);
}

/* SVG Container */
.border-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}

/* SVG Animation */
.border-line {
    fill: none;
    stroke: rgb(117, 200, 252);
    stroke-width: 5;
    stroke-linejoin: round;
    stroke-dasharray: 1600; /* Controls the visible length */
    stroke-dashoffset: 1600; /* Starts fully offset */
    animation: borderAnimation 30s linear infinite;
}

/* Keyframes for smooth border animation */
@keyframes borderAnimation {
    0% {
        stroke-dashoffset: 0;
    }

    10% {
        stroke-dashoffset: 1000;
    }

    20% {
        stroke-dashoffset: 2000;
    }
    
    30% {
        stroke-dashoffset: 3000;
    }

    40% {
        stroke-dashoffset: 4000;
    }

    50% {
        stroke-dashoffset: 5000;
    }

    60% {
        stroke-dashoffset: 6000;
    }

    70% {
        stroke-dashoffset: 7000;
    }

    80% {
        stroke-dashoffset: 8000;
    }

    90% {
        stroke-dashoffset: 9000;
    }

    100% {
        stroke-dashoffset: 10000;
    }
}

/* Theme Buttons */

.theme-buttons {
    position:absolute;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
}

.theme-btn {
    background-color:transparent;
    color:rgb(117, 200, 252);
    border:1px solid rgb(117, 200, 252);
    border-radius:5px;
    width:90px;
    height:30px;
    font-size:15px;
    cursor:pointer;
    transition:background-color 0.3s ease, color 0.3s ease;
}

.default {
    background-color:black;
}

.video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity:0;
}