// This section has the Whiteboard in it
#top {
  background-color: $off-white;
  height: 85vh;
  padding-top: 35px;
}

#middle {
  color: $off-white;
  line-height: 1.5;
  letter-spacing: 0.2px;
  margin: 0 auto;
  max-width: 750px;
  padding: 0 25px 25px 25px;

  h2 {
    color: $color-secondary;
    font-size: 2em;
    margin-top: 0;
  }

  a {
    color: $color-secondary;
  }
}

// Define how the Eraser looks
.eraser {
  background-color: $black;
  height: 10px;
  width: 40px;
}

// Define how a Marker looks
.marker {
  background-color: $white;
  height: 10px;
  position: relative;
  width: 50px;

  // The body of the Marker
  .body {
    border: 1px solid $black;
    border-top-left-radius: 5%;
    border-bottom-left-radius: 5%;
    height: 10px;
    position: absolute;
    width: 100%;
  }

  // The Shape of the Cap
  .cap {
    height: 10px;
    position: absolute;
    right: 0;
    width: 10px;

    // The Nub on the Cap
    &::after {
      content: '';
      border-top-right-radius: 25%;
      border-bottom-right-radius: 25%;
      display: block;
      height: 5px;
      position: absolute;
      right: -3px;
      top: 2.5px;
      width: 3px;
    }
  }

  // Makes the Cap color red
  .red {
    background-color: $marker-red;

    &::after {
      background-color: $marker-red;
    }
  }

  // Makes the Cap color black
  .black {
    background-color: $black;

    &::after {
      background-color: $black;
    }
  }
}

// Define how the Tree Problem looks
.tree {
  position: relative;

  .circle {
    border: 2px solid $black;
    border-radius: 50%;
    display: block;
    height: 20px;
    position: absolute;
    width: 20px;

    // Root Node
    &.c-1 {
      left: 0;
    }

    // Left Branch Node
    &.c-2 {
      left: -25px;
      top: 30px;
    }

    // Right Branch Node
    &.c-3 {
      left: 40px;
      top: 40px;
    }
  }

  .line {
    background-color: $black;
    display: block;
    height: 2px;
    position: absolute;

    // Left Line - connects the Root Node to the Left Branch Node
    &.l-1 {
      left: -12.5px;
      top: 25px;
      transform: rotate(130deg);
      width: 20px;
    }

    // Right Line - connects the Root Node to the Right Branch Node
    &.l-2 {
      left: 12.5px;
      top: 27.5px;
      transform: rotate(45deg);
      width: 37.5px;
    }
  }
}

// Define how the Whiteboard looks
.whiteboard {
  background-color: $white;
  border: 10px solid $whiteboard-gray;
  border-radius: 5px;
  box-shadow: inset -1px 2px 2px #404040, 6px 9px 1px rgba(0, 0, 0, 0.1);
  height: 75vh;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
  width: 95%;

  h1 {
    color: $color-primary;
    font-size: 3em;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    text-transform: uppercase;
  }

  // On larger screens, make better use of the white space
  @media(min-width: 600px) {
    h1 {
      font-size: 5em;
      text-align: center;
      margin-top: 150px;
    }
  }

  // Position the Eraser
  .eraser {
    bottom: 0;
    position: absolute;
    right: 50px;
  }

  // Position the Markers
  .markers {
    bottom: 0;
    left: 10%;
    position: absolute;
    width: 100%;

    .marker {
      display: inline-block;
      margin-left: 2%;
      vertical-align: bottom;
    }
  }

  // Position the Problems
  .problems {
    font-family: 'Permanent Marker', $sans-serif;

    .fizz-buzz {
      bottom: 50px;
      position: absolute;
      right: 50px;
      transform: rotate(350deg);
    }

    .complexity {
      bottom: 100px;
      position: absolute;
      right: 100px;
      transform: rotate(10deg);
    }

    .tree {
      bottom: 100px;
      position: absolute;
      right: 250px;
    }
  }
}
