main.css

* {
  font-family: monospace;
}

input {
  font-size: 2em;
  padding: 10px 0;
  text-align: center;
  width: 100%;
}

header {
  overflow: auto;
}

.container {
  display: flex;
  align-items: center;;
}

.text-center {
  text-align: center;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.binary {
  font-family: monospace;
  font-size: 1.5rem;
  white-space: nowrap;
  margin-bottom: 20px;
}

#subnet-calculator {
  display: inline-block;
  margin: 0 auto;
}

.ip-card:first-child {
  border-top: none;
}

.ip-card {
  border-top: 1px solid #dedede;
}

.ip-card h1 {
  margin: 10px 0;
}

.container {
  margin: 0 auto;
}

h1 {
  font-family: monospace;
  text-align: left;
}

.binary span {
  padding: 5px;
  display: inline-block;
}

.n {
  background: lightblue;
}

.h {
  background: lightgreen;
}

.s {
  background: lightgrey;
}

.on {
  filter: brightness(112%)
}

.input {
  position: relative;
}
.input .address-type {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #fff;
  font-size: 1.2rem;
  border: 1px solid #f70;
  background: darkorange;
  padding: .2rem .3rem;
}

/* .off {
  filter: brightness(95%)
} */

@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #121212;
    color: #fff;
  }

  input {
    background: rgb(116, 0, 184, .09);
    border: 1px solid #7400b8;
    color: rgb(255, 255, 255, .9);
  }

  .n {
    background:#1f4287;
  }

  .h {
    background: #1f8b78;
  }

  .on {
    filter: brightness(140%)
  }
}