:root {
  --padding: 0.5rem;
}

* {
  padding: 0px;
  margin: 0px;
  box-sizing: content-box;
}

html {
  background-color: #000;
  width: 100%;
  min-height: 100%;
  display: flex;
}

body {
  background-color: dimgray;
  background-image: url("/media/images/background.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0.8rem;
  font-family: "Noto Sans", sans-serif;
  text-rendering: optimizeLegibility;
  text-shadow: 0px 1.5pt 2pt #0008;
  color: white;
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  height: 100vh;
  width: 100%;
}

header {
  background-color: #77767b55;
  box-shadow: 0px 0px 3pt #9a9996ff;
  padding: var(--padding);
}

main {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  overflow-y: hidden;
}

footer {
  background-color: #77767b55;
  box-shadow: 0px 0px 3pt #9a9996ff;
  padding: var(--padding);
}

ul {
  list-style: none;
}

.container {
  padding: 0px var(--padding);
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  overflow: hidden;
}

.card {
  border-radius: 5pt;
  background: #77767b55;
  box-shadow: 0px 0px 3pt #9a9996ff;
  margin: var(--padding) 0px;
  padding: var(--padding);
}

.row {
  display: flex;
  flex-flow: row;
}

.server-row >:not(:first-child) {
  margin-left: var(--padding);
}
.server-row img {
  margin-top: auto;
  margin-bottom: auto;
}

.host {
  flex-grow: 1;
  overflow-x: visible;
  overflow-y: auto;
  /* Fix drop shadows getting clipped */
  padding: var(--padding);
  margin: calc(-1 * var(--padding));
}

.column {
  display: flex;
  flex-flow: column;
}

.space-between {
  justify-content: space-between;
}

.grow {
  flex-grow: 1;
}

.clip-text {
  overflow: hidden;
  text-overflow: clip;
  text-wrap: nowrap;
}

.icon {
  max-height: 24pt;
  height: 100%;
  width: auto;
}