/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */

    /* section .window1{
        position: fixed;
        top: 450px;
        left: 100px;
    } */



    #myVideo {
        position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100%;
        object-fit: cover;
        height: 90%;
        z-index: 1;
    }

    .overlay-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures the image covers the entire container */
        z-index: 2; /* Ensures it is above the video */
    }
/* 
    .mid-window{
        position: absolute;
        top: 34%;           
        left: 50%;          
        transform: translate(-50%, -50%);
        width: 800px;
       height: 435px;
        background: white;
        cursor: pointer;
        opacity: .3;
        border-radius: 5%; 
        z-index: 3;
    }

    .mid-window:hover {
        background: pink;
    } */

    .nav {
        position: absolute;  /* Position it relative to the viewport */
        top: 10px;           /* Adjust top position */
        left: 10px;          /* Adjust left position */
        z-index: 4;          /* Ensure it's above other elements */ 
        padding: 10px 20px;  /* Add padding */
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
    }

    .nav a{
        color: #41009d;
        font-size: 30px;
        text-decoration: none;
    }
    
    /* Change the color of links on hover */
    .nav a:hover {
        background-color: purple;
        color: black;
    }

    .playVids {
        display: block;
        position: absolute;
        width: 90%; 
        top: 370px;          
        left: 50%;          
        transform: translate(-50%, -50%);
        width: 800px;
       height: 435px; 
        z-index: 4; 
        opacity: 0;
        transition: opacity .5s;
    }
    
    .buttons{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;  
        gap: 40px; 
        margin-top: 600px;
    }
    .videoBtn {
        width: 10%;
        z-index: 4; 
    }
    
    .videoBtn:hover {
        width: 10%;
        color:white;
        background-color: #41009d;
        z-index: 4; 
    }

      
    
  

/* @keyframes testAni {
    0%{
        background: blue;
    }

    25%{
        background: lightblue;
    }

    50%{
        background: lavender;
    }

    100%{
        background: blue;
    }
} */