:root {
  --root-bg: hsla(147, 33%, 12%, 1);
  --root-bg-faded: hsla(78, 33%, 27%, 1);
  --root-hl: hsla(217, 60%, 55%, 1);
  --root-fg-faded: hsla(224, 39%, 86%, 1);
  --root-fg: hsla(240, 100%, 99%, 1);

  --bg: var(--root-bg);
  --bg-faded: var(--root-bg-faded);
  --hl: var(--root-hl);
  --fg-faded: var(--root-bg-faded);
  --fg: var(--root-fg);

  --border-radius: .2em;
}

form {
  --bg: var(--root-fg);
  --bg-faded: var(--root-fg-faded);
  --fg-faded: var(--root-bg-faded);
  --fg: var(--root-bg);

  background-color: var(--bg);
  color: var(--fg);
  margin-bottom: .5em;
  border-radius: var(--border-radius);
  padding:.5em;
}

* {
  border: none;
  margin: 0;
  padding: 0;
  line-height: 1.2em;
}

html {
  background-color: var(--bg);
  color: var(--fg);
  font-family: sans-serif;
  font-size: 1.1rem;
}

h1, h2, h3, h4, h5 {
  font-size: 1.2em;
}

input {
  -webkit-appearance: none;
  font-size: 1.1rem;
}

body {
  margin: 0 auto;
  padding: 1em;
  max-width: 40em;
}

p, h1, h2, h3, h4, h5 {
  margin: .4em 0;
}

ul {
  margin-left: 1em;
}

input[type="text"], input[type="submit"], a[href].button {
  padding: .2em .5em;
  border-radius: var(--border-radius);
}

input[type="text"] {
  background-color: var(--bg-faded);
  color: var(--fg);
}

input[type="text"]::placeholder {
  color: var(--fg-faded);
}

input[type="submit"], a[href].button {
  background-color: var(--fg-faded);
  color: var(--bg);
}

a[href] {
  text-decoration: none;
  color: var(--hl);
}

.inputp {
  display: flex;
}

.inputp input {
  flex-grow: 100;
}

html.host {
  background-image: url('img/repeating_desktop_tile.png');
}

html.host::before {
  position: absolute;
  z-index: -5;
  content: ' ';
  display: block;
  background-image: url('img/desktop_icons.png');
  width: 200px;
  height: 500px;
  background-repeat: no-repeat;
}

html.host section {
  font-size: 1.2em;
  position: relative;
  display: inline-block;
  margin-top: 10vh;
  padding: 1em;
  background-color: #ccf;
  color: black !important;
  background-clip: padding-box;
  color: var(--fg);
  border-width: 14px 5px 5px 5px;
  border-style: solid;
  border-image: url('img/border_for_slicing.png') 15 36 6 6 / 15px 36px 6px 6px / 0 0 0 0 repeat;
}

html.host section#lobby {
  position: absolute;
  bottom: 20vh;
  right: 5vw;
}

html.host section .button {
  background-color: #aad;
  border-radius: 0;
  border: 1px solid #226;
  color: #226;
}

html.host #boss {
  z-index: -1;
  position: absolute;
  bottom: 10vh;
  left: 7vw;
  height: 400px;
  width: 256px;
}

#boss[data-mood="neutral"] { background-image: url("img/man_neutral.png"); }
#boss[data-mood="frown"] { background-image: url("img/man_frown.png"); }
#boss[data-mood="crossed"] { background-image: url("img/man_crossed.png"); }
#boss[data-mood="point"] { background-image: url("img/man_point.png"); }

html.host #subtitle {
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  bottom: 1em;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: .5em 2em;
  text-shadow: .1em .1em .05em black;
}