/** VIEWPORT, VARIABLES, RESET & HTML/BODY
--------------------------------------------------------- */

/*
@viewport {
width: device-width;
zoom: 1;
user-zoom: fixed;
}
*/

:root {
  --bg-color: var(--color-background);
  --accent-color: var(--color-accent); /* #e08419 is awesome as well */
  --box-shadow: 0 0 16px rgba(0, 0, 0, .4);

  --color-background: #1c1f22;
  --color-el-background: rgba(255, 255, 255, .05);
  --color-text: rgba(255, 255, 255, .8) /* #ffffffcc */;
  --color-accent: #e53232;

  --space-huge: 2rem;
  --space-block: 1rem;
  --space-inline: .5em;

  --line-thin: 1px;
  --line-thick: 2px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  -webkit-tap-highlight-color: transparent;
  background: #111;
  background: var(--color-background);
  font: 1em/1 'Lato', sans-serif;
  color: rgba(255, 255, 255, .8);
  color: var(--color-text);
}

body {
  display: flex;
  overflow: hidden;
}

.scroll-container {
  overflow-x: hidden;
  overflow-y: scroll;
}

@media (min-width: 840px) {
  .scroll-container::-webkit-scrollbar {
    height: .5rem;
    width: .5rem;
    background: rgba(255, 255, 255, .025);
    border-radius: .25rem;
  }

  .scroll-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .05);
    border-radius: .25rem;
  }

  .scroll-container::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, .1);
  }
}

div#notification-msg {
  margin-bottom: 15px;
}

/** MAIN
--------------------------------------------------------- */
.main-column {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 1rem);
  padding: .5rem;
}

.main-column > header,
.main-column > footer,
.main-column main > * {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  flex: none;
}

.main-column main {
  flex: none;
  display: flex;
  flex-direction: column;
}

.main-column main > :nth-child(n+2) {
  margin-top: .5rem;
}

@media (min-width: 840px) {
  .main-column {
    padding: 2rem .5rem;
    margin: .5rem .5rem .5rem 0;
  }

  .main-column main {
    margin: 2rem 0;
  }

  .main-column main > :nth-child(n+2) {
    margin-top: 2rem;
  }
}

@media (max-width: 839px) {
  .main-column {
    padding-bottom: 3.5rem;
  }

  .main-column > * {
    max-width: none;
  }
}



/** HEADER
--------------------------------------------------------- */
.main-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-header .logo svg {
  display: block;
  height: 32px;
  fill: rgba(255, 255, 255, .8);
}

@media (max-width: 839px) {
  .main-header .logo {
    padding: .5em 1em;
  }

  .main-header .logo svg {
    display: block;
    height: 1em;
  }

  .main-header {
    position: fixed;
    left: .5rem;
    right: .5rem;
    bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, .05);
    background: #111;
    background: var(--color-background);
    justify-content: space-between;
    padding: .5rem 0;
    box-shadow: 0 0 3rem 1em #111;
    box-shadow: 0 0 3rem 1em var(--color-background);
    z-index: 3;
    width: auto !important;
    margin: 0;
  }

  .main-header .toggles button {
    --color-el-background: transparent;
  }
}

@media (min-width: 840px) {
  .main-header a {
    margin: auto;
  }

  .main-header .toggles {
    display: none;
  }

  .main-header .logo svg :last-child {
    fill: #e53232;
    fill: var(--color-accent);
  }
}



/** SIDEBAR RIGHT
--------------------------------------------------------- */

aside {
  position: relative;
  box-shadow: 0 0 16px rgba(0, 0, 0, .8);
  box-shadow: var(--box-shadow);
  height: 100vh;
  width: 360px;
  background: #111;
  background: var(--bg-color);
  transition: transform .6s, margin-right .6s, margin-left .6s;
  display: flex;
  flex-direction: column;
  z-index: 20;
}

aside.left {
  order: -1;
}

aside > section {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  flex: none;
}

aside .scroll-container {
  padding-right: 1rem;
}

aside > section.flex {
  flex: auto;
  overflow-x: hidden;
  overflow-y: scroll;
  margin-right: 1rem;
}

.chat > .alert-notifier {
  padding: 5px;
  text-align: center;
  display: none;
  background: #e53232;
}

.chat > .alert-notifier.new {
  display: block;
}

section.chat > form.logged-in {
  display: none;
}

aside .button-group {
  display: flex;
}

aside nav.button-group {
}

aside .button-group button {
  flex: auto;
  justify-content: center;
}

aside nav.button-group button {
  white-space: nowrap;
  flex: 1;
  padding: 0;
  border-radius: 0;
  margin: 0 !important;
}

aside nav.button-group button.is-active {
  color: rgba(255, 255, 255, .5);
}

aside nav.button-group button:first-child {
  border-radius: 4px 0 0 4px;
  padding-left: 1em;
}

aside nav.button-group button:last-child {
  border-radius: 0 4px 4px 0;
  padding-right: 1em;
}

aside .button-group button:nth-child(n+2) {
  margin-left: 0.5rem;
}

/** User section: toggles the other sections */
aside > section.user {
  flex: none;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

aside > section.user:hover,
aside > section.user:hover + section {
  background-color: rgba(255, 255, 255, .05);
}

section.user .toggle-icon {
  height: 1rem;
  width: .5rem;
  background: rgba(255, 255, 255, .2);
  position: relative;
  border-radius: .25rem;
  transition: background-color .2s;
}

section.user .toggle-icon svg {
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: top .2s, transform .2s;
}

section.user .toggle-icon.is-open {
  background: #e53232;
  background: var(--accent-color);
}

section.user .toggle-icon.is-open svg {
  top: 100%;
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}

/** Menus section: hides and shows completely */
aside > section.menus {
  overflow: hidden;
  flex: none;
  transition: height .2s, padding .2s;
  background-clip: padding-box;
}

aside > section.menus .settings.no-support {
  display: none;
}

aside > section.menus > * {
  flex: none;
}

aside > section.menus .settings {
  flex: auto;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-top: 1rem;
}

aside > section.menus:not(.is-open) {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

aside .settings h3::first-letter {
  text-transform: uppercase;
}

/** Chat section: shrinks, but never disappears completely */
aside > section.chat {
  flex: 1 1 auto;
}

aside > section.login {
  flex: none;
}

@media (max-width: 800px) {
  aside {
    position: fixed;
    left: 105%;
  }

  aside [data-toggletarget] {
    position: fixed;
    margin: 0 !important;
    top: .5rem;
    left: .5rem;
    right: .5rem;
    bottom: 3rem;
    background: #111;
    background: var(--color-background);
    border-radius: 2px;
    box-shadow: 0 0 3rem rgba(0, 0, 0, .8);
    transition:
      visibility 0s .1s,
      opacity .1s,
      transform .1s;
  }

  aside [data-toggletarget]:not(.is-open) {
    visibility: hidden;
    opacity: 0;
    transform: translateY(1rem);
  }

  aside [data-toggletarget].is-open {
    transition:
      visibility 0s,
      opacity .1s,
      transform .1s;
  }
}

@media (min-width: 840px) {
  aside > .menus {
    padding-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
  }

  aside > .menus.is-open {
    height: 50vh;
  }
}


/** DONATIONS
--------------------------------------------------------- */

.donations p {
  color: rgba(255, 255, 255, .8);
}

.donations p span {
  color: #e53232;
  color: var(--accent-color);
}

.donations .slider {
  margin: 16px 0;
}

.floating-heart {
  position: fixed;
  z-index: 4;
  motion-path: path('M0,0 Q32,-32 0,-64 Q-32,-96 0,-128');
  motion-rotation: 0deg;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  fill: white;
}

.floating-heart.contributor {
  z-index: 5;
  width: 1.5rem;
  height: 1.5rem;
}


/** FOOTER
--------------------------------------------------------- */

footer {
  margin-top: auto !important;
}

footer .bolt {
  fill: #e53232;
  fill: var(--accent-color);
}

@media all and (min-width: 440px) {
  footer ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border: none !important;
  }

  footer li {
    border: none !important;
    flex-shrink: 1;
    background: transparent !important;
    align-items: center !important;
  }

  footer svg {
    box-sizing: content-box;
  }

  footer li > * {
    padding: 0 16px;
  }

  footer li:nth-child(n+2)::before {
    content: '\b7';
    color: rgba(255, 255, 255, .5);
  }
}

.template {
  display: none;
}