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

html,body{
    height: 100%;
    background-color: rgb(255, 241, 241);
}
.container{
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
    padding-bottom: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(88, 0, 151, 0.26);
}

header{
    padding: 5px 0;
    width: 100%;
    color: white;
    border-radius: 10px 10px 0 0;
    text-align: center;
    background-color: indigo;
}

.list{
    width: 100%;
}

.list > ul{
    position: relative;
    text-align: left;
    list-style: none;
    margin: 0 5px;
}

.list ul li{
    background-color: rgba(76, 0, 130, 0.308);
    border-radius: 5px;
    margin-top: 10px;
    font-size: 17px;
    padding: 5px;
}

.list ul li > button{
    position: absolute;
    right: 5px;
    background-color: indigo;
    color: white;
    font-size: 10px;
    text-transform: uppercase;
    border: 0;
    border-radius: 5px;
    padding: 5px ;
}

input{
    position: relative;
    margin: 10px 5px;
    border: 0;
    width: 89%;
    border: 1px solid rgb(255, 255, 255);
    padding: 6px;
    background-color: rgba(76, 0, 130, 0.308);
}

input:focus{
    outline: none;
}

.list > button{
    position: absolute;
    right: 10px;
    margin-top: 10px;
    background-color: indigo;
    color: white;
    font-size: 10px;
    text-transform: uppercase;
    border: 0;
    border-radius: 0 5px 5px 0;
    padding: 9px;
}

.list p{
    color: red;
    font-size: 13px;
    text-align: center;
}