*{

    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:url('/images/Garden_Grass_Texture-679.jpg');

    background-repeat:no-repeat;

    background-position:center;
    
    background-size:cover;

    background-attachment:fixed;

    font-family:Arial,sans-serif;

    color:white;

    text-align:center;

    overflow-x:hidden;
}

h1{

    background:rgba(0,0,0,.6);

    padding:20px;

    margin:0;

    color:white;

    text-shadow:2px 2px 4px #000;

    border-bottom:3px solid #ffcc00;
}

h4{

    background:rgba(0,0,0,.4);

    margin:0;

    padding:12px;

    color:white;
}

.top-nav{

    background:rgba(0,0,0,.7);

    padding:10px;

    border-bottom:2px solid #ffcc00;
}

.top-nav a{

    color:#ffcc00;

    text-decoration:none;

    margin:0 15px;

    font-weight:bold;
}

.top-nav a:hover{

    color:white;
}

/* SIDEBAR */

.sidebar{

    width:420px;

    margin:20px auto;

    background:rgba(0,0,0,.45);

    padding:18px;

    border-radius:20px;

    border:2px solid #ffcc00;

    backdrop-filter:blur(4px);
}

.sidebar h3{

    margin-bottom:12px;

    color:#ffd400;
}

.sidebar ul{

    list-style:none;

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;
}

/* CAMERA AREA */

.container{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:32px;

    flex-wrap:wrap;

    padding:30px;
}

/* CAMERA BOX */

.camera-box{

    width:700px;

    background:rgba(0,0,0,.45);

    border-radius:24px;

    border:5px solid white;

    padding:16px;

    backdrop-filter:blur(4px);

    box-shadow:0 0 20px rgba(0,0,0,.4);
}

.camera-box h2{

    color:#ffd400;

    font-size:3rem;

    margin-bottom:20px;
}

/* CAMERA FEEDS */

.camera-feed{

    width:100%;

    height:420px;

    object-fit:cover;

    border-radius:18px;

    border:3px solid rgba(255,255,255,.25);

    display:block;

    cursor:pointer;
}

/* MODAL */

#cameraModal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.94);

    z-index:999999;
}

#modalFrame{

    display:block;

    width:min(95vw,177.7vh);

    height:min(95vh,56.25vw);

    aspect-ratio:16 / 9; 

    border:none;

    border-radius:20px;

    background:black;

    box-shadow:0 0 30px rgba(0,0,0,.8);

}

#closeModal{

    position:absolute;

    top:20px;

    right:40px;

    font-size:4rem;

    color:white;

    cursor:pointer;

    z-index:1000000;
}

/* MOBILE */

/* TABLETS */

@media (max-width:1500px){

    .container{

        display:grid;

        grid-template-columns:repeat(2,minmax(320px,1fr));

        gap:24px;

        justify-content:center;

    }

    .camera-box{

        width:100%;

    }

}

/* PHONES */

@media (max-width:900px){

    .container{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:24px;

    }

    .camera-box{

        width:95%;

    }

    .camera-feed{

        height:280px;

    }

    .sidebar{

        width:95%;

    }

}