/* Application styles */

:root {
  --blue-highlight: hsl(210, 50%, 50%);
  --dumpling-container-width: 1344px !important;
  --link-color: var(--blue-highlight);
  --side-navigation-width: 75px;
  --video-player-height: calc((100vw - var(--side-navigation-width)) / 1.78);
}

html {
  height: 100dvh;
  overflow: hidden !important;
}

body {
  background: linear-gradient(to bottom right, hsl(210, 10%, 25%), hsl(210, 10%, 15%));
  color: white !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  a {
    color: rgb(128, 191, 255);

    &:hover {
      color: #485fc7;
    }
  }

  :is(h1, h2, h3, h4, h5, h6) {
    color: white !important;
  }

  main {
    display: flex;
    flex-grow: 1;
    overflow: auto;

    #outerContentWrapper {
      flex-grow: 1;

      #mainContent {
        overflow: auto;
        padding: var(--spacing-normal);
      }
    }
  }

  strong {
    color: white;
  }

  .row {
    align-items: center;
    display: flex;
    gap: 0.5rem;
  }

  .turbo-progress-bar {
    background: var(--blue-highlight);
  }
}

:not(:defined) {
  display: none;
}