@import './mixins';

$bg: linear-gradient(45deg, #103783, #9bafd9);
$breakpoint: 800px;

* {
  margin: 0;
  box-sizing: border-box;
  font-family: Helvetica, Tahoma, sans-serif;
  color: white;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

html {
  background: $bg;

  @media (max-width: $breakpoint) {
    font-size: 0.7rem;
  }
}

body {
  #info,
  #overlay,
  #toggle-text {
    margin: 1.25rem;
    position: absolute;
  }

  #info,
  h1 {
    font-size: 2.25rem;
  }

  #info {
    @include card();
    @include center-children();

    padding: 0.25rem 0.5rem;
    text-decoration: none;

    p {
      padding-top: 2px;
    }

    .logo {
      @include square(64px);
      padding-left: 8px;
    }

    @media (max-width: $breakpoint) {
      font-size: 2rem;

      .logo {
        @include square(40px);
      }
    }
  }

  #canvas-container {
    &,
    canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .full-screen-control {
      position: absolute;
      right: 0;
      bottom: 0;
      box-sizing: content-box;
      @include square(40px);
      padding: 16px;
      cursor: pointer;
    }
  }

  #overlay {
    right: 0;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-family: 'Lucida Console', Monaco, monospace;

    font-size: 0.75rem;
    max-width: 400px;
    @media (max-width: $breakpoint) {
      font-size: 0.6rem;
      max-width: 200px;
    }
  }

  #toggle-text {
    bottom: 0;
    @include card();

    font-size: 1.25rem;
    width: 150px;
    cursor: pointer;
    padding: 0.2em 0.5rem;
    background: none;
    user-select: none;

    &.off:not(:hover) {
      opacity: 0.5;
    }
    transition: opacity 200ms;

    @media (max-width: $breakpoint) {
      width: 110px;
    }
  }

  #errors-container {
    visibility: hidden;

    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    pointer-events: none;
    @include center-children();

    #errors {
      @include card();

      width: min(500px, 80vw);
      height: min(500px, 80vw);
      padding: 1rem;

      h1 {
        padding: 1rem;
        text-align: center;
      }

      p {
        text-align: left;
        font-size: 1.25rem;
      }
    }
  }
}