* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}



body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #4f63a9, #252727,#3f0fcd);
}

.caintainer {
    width: 300px;
     animation: myanimation 2s infinite;
    padding: 50px 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 2px 2px 2px 2px #a6ee0a;
    border: 2px solid ;
    border-color: yellow;
}


.display {
    width: 100px;
    height: 60px;
    background: linear-gradient(135deg,#90c515,#bee70a,#f3ef09) ;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 25px;
    margin-left: 60px;
    border-radius: 12px;

}

.btns {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.btns button {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 2px 2px 2px 2px #0b3b66;
 
}

.plus {
   
    background-color: rgb(22, 160, 22);
    color: white;
}

.plus:hover {
    background: #12be1a;
}


.minus {
    background: #eb1809;
    color: white;
}

.minus:hover {
    background: #ef5754;
}

.reset {
    background: #5ca6e3;
    color: white;
}

.reset:hover {
    background: #0a83ee;
}

@keyframes myanimation{
    0%{
        background:linear-gradient(135deg,#0febef,#12f2f5,#2eb1ba);
    }
    30%{
        background:linear-gradient(135deg,#139ec5,#09c2d3,#11e5b4);
    }
    50%{
        background:linear-gradient(135deg,#1ce2e6,#16ebfa,#14dbdf);
    }80%{
        background:linear-gradient(135deg,#12cd31,#0cf637,#40dc5a);
    }
    100%{
        background:linear-gradient(135deg,#0c56b2,#1370e2,#3683e3);
    }
}



/* Mobile screens (max-width: 480px) */
@media (max-width: 480px) {
  .caintainer {
    width: 90%;
    padding: 30px 20px;
    border-radius: 14px;
  }

  .display {
    width: 100%;
    height: 55px;
    font-size: 36px;
    margin-left: 0;
  }

  .btns {
    flex-direction: column;
    gap: 12px;
  }

  .btns button {
    font-size: 18px;
    padding: 10px 0;
  }
}

/* Tablet screens (max-width: 768px) */
@media (max-width: 768px) {
  .caintainer {
    width: 70%;
    padding: 40px 30px;
  }

  .display {
    width: 120px;
    height: 60px;
    font-size: 40px;
    margin-left: auto;
    margin-right: auto;
  }

  .btns button {
    font-size: 18px;
    padding: 12px 0;
  }
}