/* Tray for the Pythagoras animation */
#myTray {
  width: 250px;
  height: 250px;
  border: 8px solid #331511;
  border-radius: 10px;
  background-color: #f4f5ef;
  margin: 15px auto;
}

.button {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background: #B4A573;
  color: #181100;
  width: 90px;
  height: 20px;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
}

.button:hover {
  background-color: #331511;
  color: #F4F5EF;
}

.triangle {
  fill: rgba(9, 38, 17, 0.5);
  stroke: rgb(9, 38, 17);
  stroke-width: 4px;
  stroke-alignment: inner;
  transition: transform 1s;
}

#tri1 {
  transform-origin: 200px 0px;
}

#tri3 { 
  transform-origin: 150px 350px}

#tri1.rotate {
  animation: rotate_only 2s linear forwards;
}

#tri3.rotate {
  animation: slide_rotate 2s linear forwards;
}

#tri4.rotate {
  animation: slide_only 2s linear forwards;
}

#tri1.rotate_back {
    animation: rotate_bk_only 2s linear forwards;
}

#tri3.rotate_back {
  animation: slide_rotate_bk 2s linear forwards;
}

#tri4.rotate_back {
  animation: slide_bk_only 2s linear forwards;
}


@keyframes rotate_only {
  100% {transform: rotate(-90deg)}
}

@keyframes slide_rotate {
  50% {transform: rotate(90deg)}
  100% {transform: translate(-150px,0) rotate(90deg)}
}

@keyframes slide_only {
  50% {transform: translate(0,0)}
  100% {transform: translate(-150px,0)}
}

@keyframes rotate_bk_only {
  0% {transform: rotate(-90deg)}
  100% {transform: rotate(0deg)}
}

@keyframes slide_bk_only {
  0% {transform: translate(-150px,0)}
  50% {transform: translate(0,0)}
  100% {transform: translate(0,0)}
}

@keyframes slide_rotate_bk {
  0% {transform: translate(-150px, 0) rotate(90deg)}
  50% {transform: translate(0,0) rotate(90deg)}
  100% {transform: translate(0,0)}
}
  
.element {
  width: 50px;
  height: 50px;
  background-color: #001F3F;
}