* {
  padding: 0;
  border: 0;
  margin: 0;
  outline: 0;
}

:root {
  --light: #FEFADC;
  --dark: #504B43;
  --red: #EC1B24;
  --yellow: #E19200;
  --green: #4CB753;
  --blue: #2B9EB3;

  --timing: cubic-bezier(0.2, 1, 0, 1);
  --start-timing: cubic-bezier(0,.5,0,.9);

  --grad: linear-gradient(45deg, #F008, #00F8);
  --shadow: 0px 10px 50px 0 #0008;

  --width: 1024px;
}

.light { --color: var(--light) }
.dark { --color: var(--dark) }
.red { --color: var(--red) }
.yellow { --color: var(--yellow) }
.green { --color: var(--green) }
.blue { --color: var(--blue) }
.white { --color: white }
.malung { --color: #F76F8E }
.freshmanual { --color: #3b91db }
.pollbuddy { --color: #7f6491 }
.rpi-crisis { --color: #a06ce4 }

.flex-space, .flex, br { flex-grow: 1 }
.flex.dark { background-color: var(--dark) }
.space { flex: 1000 }
.npad { padding: 0 !important }

/*----------------------------------------------------------------------------*/

html {
  background-color: var(--dark);
}

/*----------------------------------------------------------------------------*/

.back {
  position: relative;
  padding: 10px 0;
  width: min(100vw, 1024px, 100%);
  box-sizing: border-box;
}

.back::before {
  background: var(--color);
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "";
  z-index: -1;
}

.dark-back::before {
  filter: brightness(0.8);
}