#drag-1, #drag-2 {
     border: solid 1px black;
  width: 25%;
  min-height: 6.5em;
  margin: 1rem 0 0 1rem;
  background-color: #29e;
  color: white;
  border-radius: 0.75em;
  padding: 4%;
  touch-action: none;
  user-select: none;
  transform: translate(0px, 0px);
}


.container-1 {
    
    width:100%;
    height: 650px;
    border: solid 1px black;
    background-color: orange;
    border-radius:20px;
}


#outer-dropzone {
  height: 140px;
}

#inner-dropzone {
  height: 80px;
}

.dropzone {
  background-color: #bfe4ff;
  border: dashed 4px transparent;
  border-radius: 4px;
  margin: 10px auto 30px;
  padding: 10px;
  width: 80%;
  transition: background-color 0.3s;
}

.drop-active {
  border-color: #aaa;
}

.drop-target {
  background-color: #29e;
  border-color: #fff;
  border-style: solid;
}

.drag-drop {
  display: inline-block;
  min-width: 40px;
  padding: 2em 0.5em;
  margin: 1rem 0 0 1rem;

border: solid 1px black;
  color: #fff;
  background-color: #29e;
  border: solid 2px #fff;

  touch-action: none;
  transform: translate(0px, 0px);

  transition: background-color 0.3s;
}

.drag-drop.can-drop {
  color: #000;
  background-color: #4e4;
}
.container-2 {
    
    width:100%;
    height: 350px;
    border: solid 1px black;
    background-color: yellow;
    border-radius:20px;
}


#grid-snap-1 {
    border: solid 1px black;
  width: 25%;
  border-radius: 4px;
  padding: 2%;
  margin: 1rem 0 0 1rem;
  background-color: green;
  color: #fff;
  font-size: 1.2em;
  touch-action: none;
}

#grid-snap-2 {
    border: solid 1px black;
  width: 15%;
  border-radius: 4px;
  padding: 2%;
  margin: 1rem 0 0 1rem;
  background-color: yellow;
  color: grey;
  font-size: 1.2em;
  touch-action: none;
}

.container-3 {
    
    width:100%;
    height: 350px;
    border: solid 1px black;
    background-color: tomato;
    border-radius:20px;
}

.resize-drag {
  border: solid 1px black;
  width: 220px;
  height:100px;
  border-radius: 8px;
  padding: 20px;
  margin: 1rem;
  background-color: #29e;
  color: white;
  font-size: 20px;
  font-family: sans-serif;

  touch-action: none;

  /* This makes things *much* easier */
  box-sizing: border-box;
}

.container-4 {
    
    width:100%;
    height: 350px;
    border: solid 1px black;
    background-color: green;
    border-radius:20px;
}

#rotate-area {
  height: 100%;
  padding: 1rem;
  overflow: hidden;
  touch-action: none;
}

#arrow {
  
  display: block;
  margin: auto;
  width: 100%;
  height: 100%;
}

#angle-info {
  color: #666;
  font-size: 2em;
  position: absolute;
  left: 1rem;
  top: 1rem;
}

.container-5 {
    
    width:100%;
    height: 350px;
    border: solid 1px black;
    background-color: pink;
    border-radius:20px;
}


#scale-element {
  display: block;
  max-width: 100%;
  margin: 1rem auto;
  touch-action: none;
}

#scale-element.reset {
  transition: transform 0.3s ease-in-out;
}

.container-6 {
    
    width:100%;
    height: 350px;
    border: solid 1px black;
    background-color: ivory;
    border-radius:20px;
}

.star-wrapper {
  display: flex;
  flex-direction: column;
  align-content: center;
  text-align: center;
  height: 100%;
}
#star-demo {
  display: block;
  flex-grow: 1;
  touch-action: none;
  max-height: 100vw;
  max-width: 100vw;
}

.container-7 {
    
    width:100%;
    height: 1100px;
    border: solid 1px black;
    background-color: ivory;
    border-radius:20px;
}

.tap-target {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 16em;
  height: 16em;
  padding: 1em;
  margin: 1rem auto;
  box-sizing: border-box;

border-radius:20px;  

  font-size: 1.125em;
  text-align: center;
  color: grey;
  background-color: yellow;

  cursor: pointer;
  touch-action: none;
  user-select: none;

  transition: all 0.3s;
}

.tap-target.switch-bg {
  background-color: #f40;
}

.tap-target.large {
  transform: scale(1.25);
}

.rotate {
  transform: rotate(180deg);
}

.container-8 {
    
    width:100%;
    height: 400px;
    border: solid 1px black;
    background-color: skyblue;
    border-radius:20px;
}