li{
    list-style: none;
} 
 .main-para{
   background-color: rgb(241, 238, 243);
    font-size: larger;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 500;
    color: black;
 }
 *{
    font-family: 'Courier New', Courier, monospace;
 }
 body{
    border: 1px solid mediumpurple;
 }
 .list{
    display: flex;
    gap: 130px;
 }
.ate-section{
    border: 1px solid;
    width: 61%;
    padding: 10px;
}
.field{
   width: 500px;
   height: 200px;
   border: 1px solid brown;
   margin: 50px;
   padding: 10px;
   display: flex;
   flex-direction: column;
   gap: 30px;
}
.ball{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: brown;
   animation: ball-move  6s ease-in-out  infinite alternate;
}
@keyframes rotate {
   from{
      transform: scale(0.5) rotate(0deg);
   }
   to{
      transform: rotate(360deg);
      background-color: violet;
   }
}
.ball-style{
   height: 30px;
   width: 30px;
   border-radius: 50%;
   background-color: greenyellow;
   border: 3px solid greenyellow;;
   animation: rotate 6s ease-in-out infinite;
}
@keyframes ball-move {
   from{
      transform: translateX(450px);
      transition: 6s transform ease-in alternate;
   }
   to{
      right: auto;
   }
}
.new-html-file{
   padding: 20px 50px;
   font-size: 2rem;
   font-weight: 700;
   position: absolute;
   top: 60%;
   right: 10%;
}

.new-html-file a{
   color: black;
   cursor: pointer;
}
.new-html-file:hover{
   
   background-color: rgba(127, 9, 9, 0.865);
   color: white;
}