@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600&display=swap");
@import url("https://fonts.googleapis.com/css?family=Work+Sans:700&display=swap");
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

body {
  color: white;
  background: black;
  font-family: "Source Code Pro", monospace;
  width: 100vw;
  height: 100vh;
}

.icon {
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  text-decoration: underline;
  width: 75px;
  height: 75px;
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.icon svg {
  width: 60px;
  height: 45px;
  margin-bottom: -2px;
}
.icon svg path {
  fill: white;
}

.draggable {
  cursor: grab !important;
}

.window {
  opacity: 0;
  visibility: hidden;
  background: black;
  border: 1px solid white;
  box-shadow: 0px 15px 12px -10px rgba(0, 0, 0, 0.3);
  position: absolute;
}
.window--opened {
  opacity: 1;
  visibility: visible;
}
.window--normal {
  width: 565px;
  top: 55%;
  left: 45%;
}
.window--warning {
  width: 205px;
  top: 45%;
  left: 15%;
}
.window--gif {
  width: 650px;
  top: 20%;
  left: 20%;
}
.window--img {
  width: 465px;
}
.window--gif img, .window--img img {
  width: 100%;
  display: block;
}
.window--color {
  background: #ff00f4;
  width: 285px;
  border-color: #ff00f4;
  box-shadow: none;
  bottom: 10%;
  left: 30%;
}
.window__caption {
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  letter-spacing: 0.65px;
  width: 100%;
  height: 40px;
  padding-left: 1rem;
  border-bottom: 1px solid white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.window--warning .window__caption {
  text-decoration: underline;
}
.window--warning .window__caption p  {
  cursor: pointer;
}
.window__caption--button {
  width: 40px;
  height: 40px;
  position: relative;
  cursor: pointer;
}
.window__caption--button::after {
  content: "×";
  font-size: 1.5rem;
  padding-bottom: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.window__caption--button:hover {
  color: black;
  background: white;
}
.window__content {
  font-size: 16px;
  line-height: 1.5;
  padding: 1.5rem 2.5rem;
  cursor: default;
}
.window--color .window__content {
  color: white;
  font-family: "Work Sans", sans-serif;
  font-size: 40px;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 1px;
  padding: 1.5rem;
  cursor: grab;
}

.overlay {
  background: white;
  position: absolute;
  z-index: 1000000;
}
.overlay--top, .overlay--bottom {
  width: 100%;
  height: calc(50vh - 1px);
  left: 0;
  transform: scaleY(0);
}
.overlay--top {
  top: 0;
  transform-origin: top center;
}
.overlay--bottom {
  bottom: 0;
  transform-origin: bottom center;
}
.overlay--left, .overlay--right {
  width: 50%;
  height: 2px;
  top: 50%;
}
.overlay--left {
  left: 0;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
}
.overlay--right {
  right: 0;
  transform: translateY(-50%) scaleX(0);
  transform-origin: right center;
}
.grid {
  height: 100vh;
  display: grid;
  grid: 1fr 2fr 3fr 4fr 5fr 6fr 7fr 8fr 9fr 10fr 11fr 12fr 13fr 14fr 15fr 16fr 15fr 14fr 13fr 12fr 11fr 10fr 9fr 8fr 7fr 6fr 5fr 4fr 3fr 2fr 1fr/1fr 2fr 3fr 4fr 5fr 6fr 7fr 8fr 9fr 10fr 11fr 12fr 13fr 14fr 15fr 16fr 15fr 14fr 13fr 12fr 11fr 10fr 9fr 8fr 7fr 6fr 5fr 4fr 3fr 2fr 1fr;
  grid-auto-flow: dense;
}
.grid div {
  background-color: #eee;
}
.grid div:nth-child(2n) {
  background-color: #111;
}