body {
  font-family: Arial;
  background: #0b3c5d;
  color: white;
  padding: 20px;
}

.login input, button {
  display:block;
  margin:10px 0;
  padding:10px;
}

.grid {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:10px;
}

video {
  width:100%;
  background:black;
}

.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#06283d;
  padding:10px 20px;
}

.topbar nav a {
  color:white;
  margin-left:15px;
  text-decoration:none;
}

.sidebar {
  width:220px;
  position:fixed;
  top:0; bottom:0;
  background:#06263f;
  padding:20px;
}

.sidebar a {
  display:block;
  color:white;
  margin:10px 0;
  text-decoration:none;
}

.content {
  margin-left:240px;
}

.grid {
  display:grid;
  grid-template-columns: repeat(5,1fr);
  gap:10px;
}

@media(max-width:768px){
  .sidebar { position:relative; width:100%; }
  .content { margin:0; }
  .grid { grid-template-columns: repeat(2,1fr); }
}

iframe {
  width: 100%;
  height: 200px;
  background: black;
}