* {
  box-sizing:border-box;
}
/* REMOVING background:#177383; */
body {
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:sans-serif;
  
}
/* REMOVING  background-color:rgb(19, 103, 124); */
#grid {
  background-size:50px;
  box-shadow:inset 0 0 0 1px #D6DBE0;
  border:1px solid #D6DBE0;
  position:relative;
}

/* Labels */

#labels {
  height:100%;
  width:100%;
  position:relative;
}

.labels-x {
  display:flex;
  position:absolute;
  top:100%;
  width:100%;
  padding:1rem 0 0;
}

.labels-x .label {
  width:50px;
}

.labels-y {
  position:absolute;
  right:100%;
  height:100%;
  padding:0 1rem 0 0;
}

.labels-y .label {
  height:50px;
}

.label {
  color:#adb5bd;
  display:flex;
  align-items:center;
  justify-content:center;
}

.label.highlight {
	color:#343a40;
}

/* Overlay */

#overlay {
  position:absolute;
  top:0;
  left:0;
  display:flex;
  overflow:hidden;
  /* z-index:2; */
}

.overlay-col {
  width:50px;
  height:100%;
}

.overlay-row {
  width:100%;
  height:50px;
  opacity:0;
  position:relative;
}

.overlay-row:hover {
  cursor:pointer;
  opacity:0.5;
}

.overlay-square {
  width:100%;
  height:100%;
  background:#a5d8ff;
  box-shadow:0 0 0 1px #74c0fc;
  border:1px solid #74c0fc;
  position:absolute;
  right:0;
  top:0;
  /* z-index:1; */
}

.overlay-horizontal,
.overlay-vertical {
  content:"";
  display:block;
  position:absolute;
  top:0;
  right:0;
  will-change:transform;
}

.overlay-horizontal {
  width:200vw;
  height:100%;
  right:-100vw;
  background:#d0ebff;
  transform:scaleX(0);
}

.overlay-vertical {
  height:200vh;
  width:100%;
  top:-100vh;
  background:#d0ebff;
  transform:scaleY(0);
}

.overlay-square:hover ~ .overlay-horizontal {
  transform:scaleX(1);
}

.overlay-square:hover ~ .overlay-vertical {
  transform:scaleY(1);
}

/* Lines */

#lines {
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  /* z-index:2; */
}

.line {
  stroke-width:2;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 700ms ease forwards;
  
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

/* Walls */

#walls {
	height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  /* z-index:1; */
}

.wall {
	/* stroke:#dac29f; grey of walls: D6DBE0 */
	stroke-width:2;
  /* z-index:1; */
}


/* .shape path {
	stroke-width:2px;
} */

/* Bots */

#bots {
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;

  /* z-index:1; */
}


.bot {
  position:absolute;
  transition:all 700ms ease;
  /* animation-duration: 3s; */
  
}

.bot img, 
.bot svg {

  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.1));
}

/* .bot.N { transform:rotate(0deg); }
.bot.NE { transform:rotate(45deg); }
.bot.E { transform:rotate(90deg); }
.bot.SE { transform:rotate(135deg); }
.bot.S { transform:rotate(180deg); }
.bot.SW { transform:rotate(225deg); }
.bot.W { transform:rotate(270deg); }
.bot.NW { transform:rotate(315deg); } */

#bigbots {
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  /* z-index: 1; */
}

.bigbot {
  position:absolute;
  /* z-index:1; */
  transition:all 200ms ease;
}

.bigbot img, 

.bigbot svg {

  height:100px; /*Big Kipp*/
  width:100px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.1));
  /* z-index:1; */
}

.bigbot.N { transform:rotate(0deg); }
.bigbot.NE { transform:rotate(45deg); }
.bigbot.E { transform:rotate(90deg); }
.bigbot.SE { transform:rotate(135deg); }
.bigbot.S { transform:rotate(180deg); }
.bigbot.SW { transform:rotate(225deg); }
.bigbot.W { transform:rotate(270deg); }
.bigbot.NW { transform:rotate(315deg); }


/* Shapes */

#shapes {
	height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  /* z-index: 5; */
}

.shape {
	position:absolute;
	height:50px;
	width:50px;
  /* z-index: 5; */
}

.shape svg {
  /* position:absolute; */
	transform-origin:center;
  /* z-index: 5; */
}

.shape circle,
.shape ellipse,
.shape rect,
.shape polygon {
	stroke-width:2px;
}


/* UI */

#buttons {
	display:flex;
	justify-content:space-between;
}

button {
  padding:10px 20px;
  font-weight:bold;
  font-size:15px;
  border:none;
  margin:0 0 10px;
  width:49%;
}

.btn-primary {
  background:#0F84F6;
  color:white;
}


.btn-secondary {
  border:1px solid #9EA6AF;
  color:#343a40;
}

button[disabled] {
  background:#eee;   
}

.bg {
  position:fixed;
  /* z-index:-1; */
  width:100vw;
  height:100vh;
}

.blob-1 {
  position:fixed;
  top:0;
  left:0;
  transform-origin:top left;
  transform:scale(2.5);
}

.blob-2 {
  position:fixed;
  bottom:0;
  right:0;
  transform-origin:bottom right;
  transform:scale(2.5);
}