@charset "UTF-8";
:root {
  --brand: #bfb8ff;
  --brand-alt: #9d95e2;
  --dark-not-black: #2c2f33;
  --off-white: #f6f6f6;
  --white: #fff;
  --not-quite-black: #23272a;
  --black: #000;
  --active: #a3ffa3;
  --inactive: #ffa3a3;
}

/* ————————————————————————————————— */
nav {
  width: 100vw;
  height: 3.3vh;
  padding: 1rem 0 0;
  display: flex;
  align-items: center;
}
nav a {
  margin: 0 1rem;
  background: var(--off-white);
  color: var(--black);
  text-decoration: none;
  font-size: 1.75vmin;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  transition: color 0.15s ease-in-out;
}
nav a:hover {
  color: var(--brand-alt);
}

/* ————————————————————————————————— */
section {
  background: none;
}

/* ————————————————————————————————— */
.modal {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #00000055;
  display: none;
  place-items: center;
}
.modal.open {
  display: grid;
}
.modal .inner {
  width: 33.3%;
  min-height: 25%;
  padding: 1rem 2rem;
  border-radius: 20px;
  background: var(--off-white);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
.modal .inner h1 {
  font-size: 25px;
  margin: 0;
}
.modal .inner sub {
  font-size: 10px;
}
.modal .inner .buttons {
  margin: 2rem 0 0;
}

/* ————————————————————————————————— */
section.loading {
  position: absolute;
  width: 100vw;
  height: 80vh;
  display: grid;
  place-items: center;
}
section.loading h1 {
  margin: 0;
  color: white;
  font-weight: lighter;
}

section.channels > .inner > .container > .channel {
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.39);
  transition: transform 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
section.channels > .inner > .container > .channel h2 {
  margin: 0;
  font-size: 3vmin;
  font-weight: lighter;
}
section.channels > .inner > .container > .channel:hover {
  transform: translateY(-5px);
  color: var(--brand-alt);
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.39);
}

section.channel .inner > .container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
section.channel .save {
  margin: 5rem 0 0;
}
section.channel .setting {
  width: 50%;
  margin: 1rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
section.channel .setting .text {
  width: 70%;
  margin-right: 3rem;
}
section.channel .setting .text h2 {
  font-size: 3vmin;
  font-weight: lighter;
  margin: 0;
}
section.channel .setting .text sub {
  font-size: 2vmin;
}

section.group {
  display: flex;
  flex-direction: column;
  height: 82.195vh;
  width: calc(100vw - 4rem);
  margin: 2rem 0 0 1rem;
}
section.group .inner {
  width: 100%;
  height: 100%;
  padding: 0.5rem 1rem;
  background: var(--off-white);
  border-radius: 20px;
}
section.group .inner h1 {
  user-select: none;
  color: var(--not-quite-black);
  font-size: 5vmin;
}
section.group .inner .container {
  width: 100%;
  height: 80%;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* ————————————————————————————————— */
[setting-type][setting-type=toggle] {
  width: 10vw;
  font-size: 2vmin;
  padding: 0.2rem 2rem;
  border: 2px solid black;
  background: var(--inactive);
  color: var(--black);
}
[setting-type][setting-type=toggle].enabled {
  background: var(--active);
}
[setting-type][setting-type=toggle]:hover {
  transform: none;
}
[setting-type][setting-type=text], [setting-type][setting-type=select] {
  width: 10vw;
  border: 2px solid var(--inactive);
  background: var(--off-white);
  border-radius: 20px;
  color: var(--black);
  outline: none;
  font-size: 2vmin;
  text-align: center;
}
[setting-type][setting-type=text].valid, [setting-type][setting-type=select].valid {
  border-color: var(--active);
}
[setting-type][setting-type=select] {
  border-color: var(--black);
}

/*# sourceMappingURL=dash.css.map */