/*#canvas-el {
  border: 1px #000 solid;
}*/

body {
  display: flex;
  flex-flow: column;
}

h1, h2 {
  text-align: center;
  margin: 0px;
  font-family: 'Lalezar', cursive;
}

h3 {
  text-align: center;
  margin: 0px;
  margin-bottom: 16px;
  font-family: 'Rubik', sans-serif;
}
ul {
  display: flex;
  list-style-type: none;
  justify-content: center;
}

.button-list {
  flex-flow: row;
  justify-content: center;
}

.shape-list {
  flex-flow: column;
  align-items: center;
}
button {
  color: white;
  width: 160px;
  height: 50px;
  font-size: 16px;
  margin: 10px;
  transition-timing-function: ease-in-out;
  transition-duration: 300ms;
}

#stop-button {
  background-color: red;
  border: red 2px solid;
}

#start-button {
  background-color: #23ad34;
  border: #23ad34 2px solid;
}

#reset-button {
  background-color: #1a98fc;
  border: #1a98fc 2px solid;
}

#step-button {
  background-color: #9343fb;
  border: #9343fb 2px solid;
}

#about-button {
  background-color: #fc3589;
  border: #fc3589 2px solid;
}

#step-button:hover, #stop-button:hover, #reset-button:hover, #start-button:hover, #about-button:hover {
  background-color: white;
  cursor: pointer;
}

#step-button:hover {
  color: #9343fb;
}

#stop-button:hover {
  color: red;
}

#start-button:hover {
  color: #23ad34;
}

#reset-button:hover {
  color: #1a98fc;
}

#about-button:hover {
  color: #fc3589;
}

modal {
  position: fixed;
  height: 100%;
  width: 100%;
  margin: 0px;
  left: 0px;
  top: 0px;

}

.modal-wrapper {
  opacity: 0.5;
  background-color: #333;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.modal-content {
  opacity: 1;
  position: fixed;
  top: 10%;
  left: 10%;
  background-color: white;
  height: 80%;
  width: 80%;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-flow: column;
  overflow: scroll;
  border-radius: 12px;
}

.modal-paragraph {
  text-align: justify;
  font-family: 'Rubik', sans-serif;
  margin-left: 10%;
  margin-right: 10%;
}
.modal-paragraph ul  {
  display: flex;
  flex-flow: column;
  text-align: justify;
}

.modal-paragraph ul li {
  margin-bottom: 10px;
  margin-top: 10px;
}
.invisible {
  opacity: 0;
  z-index: -1;
  width: 0px;
  height: 0px;
}

.canvas-container {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-content: space-between;
}

.shape-button {
  height: 100px;
  margin: 20px;
  opacity: .4;
}


.shape-button:hover {
  opacity: 1;
  transition-duration: 300ms;
  transition-timing-function: ease-in;
  /*height: 110px;
  margin: 10px;*/
  cursor: pointer;
}

.color-choice-list {
  display: flex;
  flex-flow: column;
}
.color-choice {
  width: 90px;
  height: 90px;
  margin: 20px;
  margin-left: 0px;
  opacity: 0.4;
  transition-timing-function: ease-in-out;
  transition-duration: 300ms;
}

.color-choice:hover {
  opacity: 1;
  cursor: pointer;
}

.active-shape-button, .active-color-button {
  opacity: 1;
}

.fill-option-one {
  background: #1a98fc; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #1a98fc, #9343fb); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #1a98fc, #9343fb); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #1a98fc, #9343fb); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #1a98fc, #9343fb); /* Standard syntax */
}

.fill-option-two {
  background: #23ad34; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #23ad34, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #23ad34, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #23ad34, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #23ad34, yellow); /* Standard syntax */
}

.fill-option-three {
  background: grey; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, white, black); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, white, black); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, white, black); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, white, black); /* Standard syntax */
}

input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 300px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: #1a98fc;

}
input[type=range]::-webkit-slider-thumb {
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  border: 1px solid #000000;
  height: 30px;
  width: 14px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #1a98fc;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: #1a98fc;
}
input[type=range]::-moz-range-thumb {
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
/*input[type=range]::-ms-fill-lower {
  background: #1a98fc;
}
input[type=range]::-ms-fill-upper {
  background: #1a98fc;
}*/
/*input[type=range]::-ms-thumb {
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  /*height: 24px;
  width: 13px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #1a98fc;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}*/

select {
   background: transparent;
   border: none;
   font-size: 14px;
   height: 29px;
   border: 1px #555 solid;
   margin: 10px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 268px;
}

button:focus {
  outline: none;
}