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

body {

    font-family: Arial, Helvetica, sans-serif;

    background: #10151d;

    color: white;

}

header {

    background: #182230;

    padding: 20px 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 3px solid #00b140;

}

header h1{

    font-size:32px;

}

header small{

    color:#9ca8b6;

}

#serverStatus{

    font-size:18px;

    font-weight:bold;

}

main{

    padding:30px;

}

#dashboard{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(500px,1fr));

    gap:25px;

}

.camera{

    background:#182230;

    border-radius:12px;

    overflow:hidden;

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

}

.cameraHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 20px;

    background:#243243;

}

.cameraTitle{

    font-size:22px;

    font-weight:bold;

}

.status{

    color:#ffb100;

    font-weight:bold;

    transition:0.3s;

}

.status.live{

    color:#00ff6a;

}

.player{

    width:100%;

    aspect-ratio:16/9;

    background:#000;

}

.player video{

    width:100%;

    height:100%;

    object-fit:cover;

}

.cameraFooter{

    display:flex;

    justify-content:space-between;

    padding:15px 20px;

    color:#a5b2bf;

    font-size:14px;

}

footer{

    margin-top:40px;

    background:#182230;

    padding:20px 40px;

    display:flex;

    justify-content:space-around;

    border-top:3px solid #00b140;

}