.tangle-container {
  width:min(800px, 100%);
  margin: auto;
  background-color:  #967bb6;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.red {
  background-color: #ff9c9c;
  border-radius: 100%;;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}
.yellow {
  background-color: #fff89c;
  border-radius: 100%;;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}
.green {
  background-color: #a3ff9c;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}

.blue {
  background-color: #9c9cff;
  border-radius: 100%;;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}

.green:hover, .blue:hover, .yellow:hover, .red:hover {
  cursor: pointer;
  transform: rotate(360deg) scale(1.5);
  transition: transform 1s;
  -webkit-transform: rotate(360deg) scale(1.2);
  -moz-transform: rotate(360deg) scale(1.5);
  -ms-transform: rotate(360deg) scale(1.5);
  -o-transform: rotate(360deg) scale(1.5);
  -webkit-transition: transform 1s;
  -moz-transition: transform 1s;
  -ms-transition: transform 1s;
  -o-transition: transform 1s;
}

body {
  font-family: Comic Sans MS;
  background-color: #c3d6c6;
  text-align: center;
}

.menu {
  margin:auto;
  width:fit-content;
  margin-bottom:10px;

}
a.btn {
  appearance: button;
  -moz-appearance: button;
  -webkit-appearance: button;
  text-decoration: none;
  color: initial;
  font-family: Comic Sans MS;
  font-size: 20px;
  background-color: #f7c0c0;
  border-radius: 10px;
  padding: 5px;
  border: 1px solid #000000;
}