*{
    box-sizing: border-box;
}
body{
    background-image:linear-gradient(to bottom right,rgb(206, 206, 255),rgb(74, 74, 253));
    height:100vh;
    font-family: cursive;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container{
    background-color: rgba(53, 85, 88, 0.7);
    width:50%;
    border-radius: 10px;
    box-shadow: 0 0 15px 0 ;
    
}
.input{
    width:70%;
    height:12%;
    background-color: rgba(30, 45, 46, 0.582);
    color:skyblue;
    border-radius: 5px;
    border:2px solid black;
    margin-right: 10px;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
}
.add{
    text-align: center;
    background-color: rgba(30, 45, 46, 0.582);
    color: skyblue;
    font-size: large;
    width:70px;
    height:30px;
    padding-top: 3px;
    margin-top: 10px;
    border-radius: 10px;
    box-shadow: 0 0 5px 0 #000;
    transition-duration: 0.4s;
}
.add:hover{
    background-color: rgb(0, 132, 255);
    color:rgb(255, 255, 255);
    box-shadow: 0 0 20px 0 rgb(28, 162, 252);
}
.add:active{
    transform: scale(0.9);
    box-shadow: 0 0 25px 0 rgb(75, 153, 255);
}
.del,.edit{
    text-align: center;
    background-color: rgba(30, 45, 46, 0.582);
    color: rgb(255, 104, 104);
    min-width:30px;
    height:30px;
    padding:5px;
    padding-left:4px;
    border-radius: 10px;
    box-shadow: 0 0 5px 0 #000;
    transition-duration: 0.3s;
}
.del:hover{
    background-color: rgb(247, 43, 43);
    color:white;
    box-shadow: 0 0 20px 0 rgb(255, 128, 128);
}
.del:active,.edit:active{
    transform: scale(0.9);
    box-shadow: 0 0 20px 0 rgb(253, 1, 1);
}
.edit{
    color:rgb(25, 213, 247);
    margin-left:2px;
}
.edit:hover{
    background-color: rgb(57, 221, 226);
    color:white;
    box-shadow: 0 0 20px 0 rgb(0, 255, 149);
}
.clear{
    font-size: larger;
    text-align: center;
    background-color: rgba(30, 45, 46, 0.582);
    color: rgb(255, 116, 116);
    min-width:70px;
    height:25px;
    border-radius: 10px;
    box-shadow: 0 0 5px 0 #000;
    transition-duration: 0.4s;
    margin: 10px 0;
}
.clear:hover{
    background-color: rgb(250, 49, 49);
    color:white;
    box-shadow: 0 0 20px 0 rgb(255, 128, 128);
}
.clear:active{
    transform: scale(0.9);
    box-shadow: 0 0 25px 0 rgb(255, 0, 0);
}
.container input:active{
    box-shadow: 0 0 5px 0 #000;
}
.container input:focus{
    outline:none;
    box-shadow: 0 0 5px #000;
}
.content{
    margin:auto;
    margin-right: 0;
    width:70%;
    text-align: center;
    border-radius: 20px;
    border:2px solid #000;
    background-color:rgb(144, 144, 241);
    font-size: large;
    overflow: hidden;
    cursor:default;
}
.box{
    margin-bottom: 10px;
    display: flex;
}
.actions{
    margin-right:auto;
    display: flex;
}

@media only screen and (max-width:580px){
    .container{
        width:90%;
    }
}
@media only screen and (min-width:426px){
    .container{
        transform: scale(1.1);
    }
}