html, body{
  padding: 0;
  margin: 0;
  font-family: Arial;
}

a{
  color: #92a1a1;
}

em{
  font-weight: bold;
  font-style: normal;
}

#holder{
  display: grid;
  grid-template-columns: 300px auto;
  border-bottom: 1px solid #000;
  border-top: 1px solid #000;
}

header{
  background: #242b31;
  vertical-align: middle;
  position: relative;
  display: flex;
  align-items: center;
}

header > *{
  flex-shrink: 0;
}

header img{
  filter: invert();
  height: 30px;
  width: 30px;
  margin-right: 0.5em;
  margin-left: 10px;
}

h1{
  margin: 0;
  color: #fff;
  display: inline-block;
  flex-grow: 1;
  flex-shrink: 1;
}

#intro{
  padding: 5px;
}

#editor{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: scroll;
}

#box{
  width: 500px;
  height: 500px;
  outline: 1px solid black;
  position: relative;
  display: inline-block;
  background-repeat: no-repeat;
  margin-left: 20px;
  margin-top: 20px;
}

#box .coords{
  position: absolute;
  transform: translateY(-50%);
  min-width: 100px;
}

#box.hideCoords .coords{
  display: none;
}

#box input{
  width: 30px;
  font-size: 16px;
  border: 1px solid black;
}

#removeBackground{
  display: none;
  font-size: 20px;
  border: none;
  border-radius: 0.5em;
  color: #fff;
  background: #92a1a1;
  margin-left: 20px;
}

textarea{
  resize: none;
}

h3{
  margin: 0;
}

#sidebar h3{
  color: #fff;
  background: #92a1a1;
}

#sidebar{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f7f8f9;
  border-right: 1px solid #000;
  text-align: center;
  gap: 10px;
  padding-top: 10px;
}

#sidebar pre{
  border: 1px solid #000;
  min-height: 1em;
  width: 100%;
  white-space: pre-wrap;
  height: 6em;
}

.corner{
  background: black;
  width: 12px;
  height: 12px;
  position: absolute;
  display: block;
  cursor: pointer;
  border-radius: 50%;
  user-select: none;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.splitPoint{
  height: 15px;
  width: 15px;
  background: transparent;
  transform: translate(-50%, -50%);
  position: absolute;
  transform-origin: center;
  cursor: pointer;
}

.splitPoint::before{
  content: '';
  height: 100%;
  width: 100%;
  background: black;
  display: block;
  clip-path: polygon(65% 0, 90% 25%, 20% 75%, 65% 100%, 35% 100%, 10% 75%, 80% 25%, 35% 0);
  /*polygon(65% 0, 90% 25%, 20% 75%, 65% 100%, 35% 100%, 10% 75%, 80% 25%, 35% 0);*/
}

.splitPoint:hover::before{
  /*background: red;*/
  transform: scale(1.2);
}

.midpoint{
  background: blue;
  width: 8px;
  height: 8px;
  position: absolute;
  display: block;
  cursor: pointer;
  border-radius: 50%;
  user-select: none;
  transform: translate(-50%, -50%);
}

.line{
  height: 2px;
  background: #92a1a1;
  position: absolute;
  display: block;
  transform-origin: top left;
  user-select: none;
  cursor: pointer;
}

.line:hover{
  background: #242b31;
}

input[type="text"]{
  width: 8ch;
  border: 1px solid #92a1a1;
  padding: 0.2em;
}

#lineType{
  padding: 0;
  position: absolute;
}

#lineType li{
  display: inline-block;
}

#preview{
  position: absolute;
  background: rgb(184, 211, 249);/*rgba(228, 192, 20, 0.5);*/
  width: 100%;
  height: 100%;
  display: block;
}

#defaults{
  list-style-type: none;
  padding: 0;
  flex-shrink: 1;
  overflow: scroll;

  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  margin: 0;
}

#defaults li{
  cursor: pointer;
  text-align: center;
}

#output > div{
  margin-bottom: 10px;
}

.default{
  width: 60px;
  height: 60px;
  background: #e4c014;
  margin-left: auto;
  margin-right: auto;
}

#defaults .default:hover{
  filter: brightness(1.2);
}

#unit{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#unit li{
  display: inline-block;
}

.undo{
  position: relative;
  padding-left: 24px;
  font-size: 20px;
  border: 1px solid transparent;
  background-color: #e4c014;
  color: #fff;
}

button{
  border-radius: 0.5em;
}

button:enabled{
  cursor: pointer;
}

button:disabled{
  filter: grayscale(1);
}

input + label{
  filter: grayscale();
}

input + label:first-of-type{
  border-top-left-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
}

input + label:last-of-type{
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}

input:checked + label{
  font-weight: bold;
  filter: none;
}

.undo::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url('../icons/undo.svg');
  background-repeat: no-repeat;
}

.undo:enabled:hover, .redo:enabled:hover, .copy:hover{
  background: #f0d451;
}

.redo{
  position: relative;
  padding-left: 24px;
  font-size: 20px;
  border: none;
  background-color: #e4c014;
  color: #fff;
}

.redo::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url('../icons/redo.svg');
  background-repeat: no-repeat;
}

.copy{
  background: #e4c014;
  border: none;
  border-radius: 0.5em;
  color: #fff;
  font-size: 20px;
}

.delete{
  position: absolute;
  transform: translateY(-50%);
  border: none;
  border-radius: 4px;
  color: #fff;
  background: #e62626;
  font-size: 15px;
}

.ellipse{
  border-radius: 50%;
  background: transparent;
  border: 1px solid #92a1a1;
}

.output{
  display: flex;
}

textarea{
  flex-grow: 1;
  height: 4em;
}

input[type="radio"]{
	display: none;
}

input[type="radio"] + label{
	background: #e4c014;
	color: #fff;
	padding: 0.5em;
	cursor: pointer;
	display: inline-block;
}

input[type="radio"] + label:hover{
	background: #f1d75d;
}

figure{
  margin: 0;
}

#help ul{
  padding-left: 20px;
}

#help li{
  margin-bottom: 0.5em;
}

#help button{
  position: relative;
  left: 50%;
  margin-bottom: 1em;
  border: none;
  background: #e4c014;
  color: #fff;
  font-size: 20px;
}

dt{
  font-weight: bold;
}

dd{
  margin-bottom: 1em;
  margin-left: 0;
}

.helpButton{
  color: #fff;
  position: relative;
  /*top: 50%;*/
/*  transform: translateY(-50%);*/
 /* float: right;*/
  /*margin-right: 20px;*/
  cursor: pointer;
}

label{
  position: relative;
  padding-left: 1em !important;
}

label[for]::before{
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  left: 0;
  top: 0.5em;
  background-repeat: no-repeat;
}

label[for="drag"]::before{
  background-image: url('../icons/drag.svg') !important;
}

label[for="scale"]::before{
  background-image: url('../icons/scale.svg') !important;
}

label[for="rotate"]::before{
  background-image: url('../icons/rotate.svg') !important;
}

label[for="pixels"]:before{
  content: 'px';
  font-size: 10px;
  top: 50%;
  transform: translateY(-50%);
  left: 2px;
}

label[for="percentage"]:before{
  content: '%';
  font-size: 10px;
  top: 50%;
  transform: translateY(-50%);
  left: 2px;
}

#intro, #help, article{
  width: 90%;
  margin-left: 5%;
  margin-top: 1em;
  margin-bottom: 1em;
}

#help .splitPoint{
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  transform: none;
}

.menu{
  display: inline-block;
/*  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);*/
z-index: 5;
}

.menu > a{
  color: white !important;
  text-decoration: none;
  background: #e4c014;
  padding: 0.5em;
  border-radius: 0.5em;
}

.menu > a:hover{
  background: #f1d75d;
}

.menu ul{
  display: none;
  background: #ffffff;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menu:hover ul{
  display: block;
  position: absolute;
}

.menu li{
  padding: 5px;
}

.menu li:hover{
  background: #dcdcdc;
}

.menu li a{
  display: block;
  width: 100%;
  text-decoration: none;
  color: #242b31;
}

@media screen and (max-width: 640px){
  #holder{
    grid-template-columns: auto;
    grid-template-rows: auto auto;

  }

  #sidebar{
    display: block;
  }

  #sidebar > div{
    flex-direction: row;
    vertical-align: middle;
    padding: 0;
    align-items: center;
    justify-content: center;
  }

  #sidebar > div > div{
    vertical-align: middle;
  }

  #output{
    display: none;
  }

  #inputs h3{
    display: none;
  }

  #unit li{
    display: block;
    text-align: left;
  }

  .copy{
    height: 100%;
  }

  header{
    display: flex;
    flex-direction: row;
  }

  h1{
    overflow: hidden;
  }

  #defaults{
    display: inline-block;
    white-space: nowrap;
    overflow-x: scroll;
  }

  #defaults li{
    display: inline-block;
    overflow-x: scroll;
  }

  .copy{
    height: 100%;
  }

  #intro{
    max-height: 4em;
    overflow-y: scroll;
  }
}

#text{
  width: 40ch;
  height: 100px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#text::before{
  content: '';
  width: 100%;
  height: 100%;
  background: red;
}

#left{
  float: left;
  color: white;
  height: 100%;
  width: 50%;
  shape-outside: polygon(0 0, 100% 0, 0 100%);
  line-height: 100px;
}

#left::before{
  content: '\00a0#left';
  display: block;
  width: 100%;
  height: 100%;
  background: blue;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

#right{
  float: right;
  height: 100%;
  width: 50%;
  color: white;
  line-height: 100px;
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}

#right::before{
  content: '#right\00a0';
  text-align: right;
  display: block;
  width: 100%;
  height: 100%;
  background: blue;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

code{
  white-space: pre-wrap;
}

.htmlCSS{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px dashed grey;
  margin-bottom: 1em;
}

.bordered{
  border: 1px dashed grey;
}

h4{
  margin-top: 0;
}