body{
background: #3399ff;
width: 100%;
max-width: 1160px;
margin: auto;
animation-name: example; 
animation-duration: 20s;
animation-iteration-count:infinite;

}

main {
  width: 100%px;
  height: 600px;
  box-sizing: border-box;
}



.container .txtClr {
 
  position: relative;
  border-radius: 25%;
  background: white;
  animation: ripple 15s infinite;
  box-shadow: 0px 0px 1px 0px #508fb9;
  margin: 150px;
  width: 80%;
  height: 50%;
  padding: 10px;
  animation: mymove 5s;
  }

  @keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}

  .blue {
    background-color: #3399ff;
    width: 100px;
  height: 50px;
  border-radius: 50px;
 
  }
  .orange {
  background: orange;
  width: 100px;
  height: 50px;
  border-radius: 50px;
 
  }

  .green {
    background-color: green;
    width: 100px;
  height: 50px;
  border-radius: 50px;
 
  
  }

  .red {
  width: 100px;
  height: 50px;
  border-radius: 50px;
  background-color: red;
  animation-duration: 4s;
  }

  @keyframes example {
   0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

 
  #checkmark {
    width: 50px;
    justify-content: right;
    position: relative;
  }

  #wrong{
    width: 50px;
 
    justify-content: right;
     position: relative;
  }

  #txt {
    text-align: center;
  }

 .color_choice {
  display: grid;
  display: flex;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
  grid-gap: 20px;
  transition: all 1s;
  justify-content: center;
  
  
 }

 
 
 .btn_cont {
  background-color: #123456;
  color: #ffffff;
  margin: 2rem 0;
  width: 150px;
  padding: 1.4rem;
  border: none;
  border-radius: 25px;
  text-transform: uppercase;
  font-size: 1.2rem;
 }

 p {
  font-size: larger;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 }