*{
    margin: 0;
    padding :0;
    box-sizing: border-box;
}

/* body{
    min-height: 100vh;
  
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgb(3, 9, 49);
    max-width: 1500px;
    margin-inline:auto;
    color: white;
} */
body {
	height: 100vh;
	
	display: flex;
	justify-content: start;
	align-items: center;
	flex-direction: column;
	gap: 20px;
    background-color: rgb(1, 5, 37);
}



header {
	height: 100px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
    color: aliceblue;
}
.heading {
	color: rgb(4, 185, 4);
}
.title a{
    text-decoration: none;
    color: rgb(242, 230, 70);
}

.container-body {
	width:80vmin;
    min-height: 50vmin;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
    margin-top: 2rem;
}

.container{
    width: 30vmin;
    min-height: 50vmin;
    border-radius: 0 0 1rem 1rem;
    border:3px solid rgb(59, 81, 222) ;
    border-top: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 0.7rem ;
    gap: 0.7rem;
    background: linear-gradient(transparent,rgba(0,255,255,0.115));
}
.child {
    width: 80%;
    padding: 1rem;
    border-radius: 1rem;
    font-size: 1.2rem;
    text-align: center;
    background-color: rgb(15, 165, 215);
}

.func{
    width: 40vmin;
}
.form{
    display: flex;
    gap: 5%;
}
.form input{
    width: 37vmin;
    font-size: 1rem;
    padding: 1rem;
    height:2rem ;
    background-color: rgb(5, 38, 115);
    border-radius:0.6rem 0.6rem 0.6rem ;
    color: white;
    border: 1px solid rgb(42, 200, 249);
    /* box-shadow:2px 4px 0.8rem 0 rgb(0, 241, 225) ; */
    margin-inline: auto;
    text-align: center;
    position:relative ;

}
button{
    padding: 1rem;
    border: none;
    border-radius: 0.6rem 0.6rem 0.6rem 0;
    box-shadow: 2px 4px 0.8rem 0 rgba(0,0,0,0.2);
    font-size: 1rem;
    background-color: rgba(15, 34, 44, 0.811);
    color: white;
    display: flex;
    cursor: pointer;
   
    justify-content: center;
   
}

.oper{
    display: flex;
    justify-content: space-between;
    margin: 1.5rem 0;
   flex-wrap: wrap;
   row-gap: 1rem;
   
    
}
.oper button{
    width: 48%;
   
    
}

.massage-box{
    width: 39vmin;
    padding: 1rem;
    height: 9rem;
    background-color: rgb(66, 154, 255);
    border-radius: 1rem;
    margin-inline: auto;
    text-align: center;
    position: relative; 
    margin-top: 1rem;
}
.massage-box h2{
   text-align: center;
   font-weight: 600;
}
.massage{
 height: 8rem;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 25px;
 padding-bottom: 20px;

}

.info{
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: center;
}
.info .sec1{
    display: flex;
    align-items: center;
    justify-content: space-between;

}
.sec1 h3{
    color: white;
}
.info .sec3{
    align-items: center;
    display: flex;
    justify-content: space-between;

}
.sec3 h3{
    color:white;
}

.box {
        height: 35px;
        width: 60px;
        font-size: 25px;
        justify-content: center;
        align-items: center;
        background-color: rgb(73, 255, 249);
        color: rgb(0, 0, 0);
        border-radius: 10px;
        cursor: pointer;
        transition: 0.2s;
        border: none;
    }


.error-massage {
    animation: errorMassage 0.4s infinite linear;
    
}
@keyframes errorMassage {
	0% {
		background-color: bisque;
	}
	100% {
		background-color: rgb(255, 15, 59);
	}
}





.ele {
	height: 80px;
	width: 170px;
	background-color: green;
	color: white;
	border: 4px black solid;
	border-radius: 10px;
	font-size: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.ele-add {
	animation: pushAnimation 0.3s infinite linear;
}
.ele-remove {
	animation: popAnimation 0.3s infinite linear;
}


@keyframes pushAnimation {
	0% {
		background-color: green;
	}
	100% {
		background-color: rgb(17, 92, 255);
	}
}
@keyframes popAnimation {
	0% {
		background-color: green;
	}
	100% {
		background-color: rgb(255, 15, 59);
	}
}


@media screen and (max-width:960px) {
    body {
        flex-direction: column;
    }

    .container {
        width: 42vmin;
        height: 53vmin;
    }

    .func {
        /* max-width: 300px; */
        width: 80vmin;
    }
    .massage-box{
        width: 80vmin;
        height: 40vmin;
        
    }
    .form{
        margin-top: 2rem;
    }
    .form input{
        width: 45vmin;
    }
  .info{
       display: none;
    }
}

@media screen and (max-width:500px) {
    .container {
        width: 60vmin;
        height: 70vmin;
    }
   
   
}

#push {
    width: 40%;
}