*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  box-sizing: border-box;
  font-size: 62.5%;
  font-family: "Gloria Hallelujah", cursive; }

:root {
  --color-main: #ffdc16;
  --color-selected: green;
  --width-selected: 9px; }

body {
  max-height: 100vh;
  overflow: hidden;
  background-color: var(--color-main);
  text-align: center; }

header {
  font-size: 3rem; }

.picker {
  height: 6rem;
  width: 100%;
  padding: 1rem 5rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; }
  @media only screen and (max-width: 43.75em) {
    .picker {
      height: 10rem; } }
  .picker_colors {
    display: inline-block; }
  .picker-color {
    display: none; }
    .picker-color-selected {
      fill: green; }
  .picker_size {
    flex: 0 0 28rem;
    margin-right: 5rem; }
    @media only screen and (max-width: 43.75em) {
      .picker_size {
        flex: 0 0 100%; } }

#draw {
  background-color: white;
  width: 98%;
  height: calc(100vh - 16rem);
  border-radius: 1rem;
  border: 2px solid #ddd; }

.color_label {
  height: 3rem;
  width: 3rem;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.3s;
  box-shadow: 0 3px 0.5rem rgba(0, 0, 0, 0.4); }

.label_green {
  background-color: green; }

.label_red {
  background-color: red; }

.label_black {
  background-color: black; }

.label_blue {
  background-color: blue; }

.label_white {
  background-color: white; }

.picker-color:checked + .color_label {
  border: 2px solid #222;
  box-shadow: 0 1px 0.5rem rgba(0, 0, 0, 0.4); }

.icon {
  height: 2rem;
  width: 2rem;
  fill: #222;
  transition: all 0.3s ease-in; }

button, button:focus, button:active {
  outline: none;
  background-color: transparent;
  border: none;
  padding: 1rem;
  flex-basis: 5rem; }

button:hover .icon {
  height: 2.5rem;
  width: 2.5rem; }

#download {
  flex-basis: 5rem; }

/* unholy css to style input type="range" */
input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
  width: 70%;
  margin: 0 5px; }

input[type="range"]:focus {
  outline: none; }

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
  background: rgba(255, 255, 255, 0.8);
  border-radius: 1px;
  border: 0.2px solid rgba(1, 1, 1, 0); }

input[type="range"]::-webkit-slider-thumb {
  height: var(--width-selected);
  width: var(--width-selected);
  border-radius: 50%;
  background: var(--color-selected);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -1px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
  background: #ffffff;
  border-radius: 1.3px;
  border: 0.2px solid rgba(1, 1, 1, 0); }

input[type="range"]::-moz-range-thumb {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
  height: var(--width-selected);
  width: var(--width-selected);
  border-radius: 50px;
  background: var(--color-selected);
  cursor: pointer; }