* {
  box-sizing:border-box;
}

body {
  margin:0;
  min-height:100vh;
  font-family:Arial,Helvetica,sans-serif;
  color:#fff;

  background:
    radial-gradient(
      circle at top,
      #181818 0,
      #0d0d0d 55%,
      #080808 100%
    );
}

header {
  min-height:70px;
  padding:14px 28px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  background:rgba(26,26,26,.96);

  border-bottom:1px solid #292929;
}

.title {
  font-size:28px;
  font-weight:800;
}

.nav {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.nav a {
  color:#fff;
  text-decoration:none;

  padding:11px 18px;

  border-radius:9px;

  background:#303030;
}

.nav a:hover {
  background:#444;
}

main {
  max-width:850px;
  margin:auto;
  padding:28px;
}

.panel {
  padding:28px;

  border:1px solid #333;
  border-radius:15px;

  background:#1d1d1d;

  text-align:center;
}

.description {
  color:#bbb;
  line-height:1.6;
}

.status {
  min-height:32px;
  margin:16px 0;

  color:#ddd;
  font-size:18px;
}

.controls {
  margin:22px 0;

  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

input {
  min-width:180px;

  padding:12px;

  border:1px solid #555;
  border-radius:9px;

  background:#101010;
  color:#fff;

  font-size:17px;
}

button {
  padding:12px 18px;

  border:0;
  border-radius:9px;

  background:#3560e8;

  color:#fff;

  font-size:16px;
  font-weight:700;

  cursor:pointer;
}

button:hover {
  background:#4770f0;
}

button.secondary {
  background:#303030;
}

button.secondary:hover {
  background:#444;
}

.stats {
  color:#aaa;
  margin:12px 0;
}

@media(max-width:650px) {

  header {
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
  }

  main {
    padding:18px;
  }

}