body {
  background: linear-gradient(to right, #ffefba, #ffffff);
  margin: 0;
}

div {
  display: flex;
}

::selection {
  background: #d3d3d3;
}

.con {
  width: 100vw;
  height: 60vh;
}

.list {
  width: 50vw;
  justify-content: center;
  align-items: center;
}

.control {
  height: 30vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ti {
  width: 60vw;
  height: 5vh;
  border-radius: 1em;
  font-size: large;
  text-align: center;
}

.but {
  margin: 0 125px;
  width: 200px;
  height: 40px;
  border-radius: 0.5em;
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  color: white;
  font-size: medium;
  border-width: 0px;
}

.but:hover {
  animation: but_color 8s;
}

@keyframes but_color {
  100% {
    background-position: -400% 0;
  }
}

.buts {
  margin-top: 15px;
}

.container {
  flex-direction: column;
}

.ll {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40vw;
  height: 50vh;
  list-style: none;
  border-width: 10px;
}

.card {
  width: 18vw;
  height: 5vh;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.5em;
  margin: 5px;
  justify-content: center;
  align-items: center;
}

#leftlist {
  align-items: flex-end;
}

#rightlist {
  align-items: flex-start;
}