html{
    background-color: #fffcf0;
    font-family: "Roboto Condensed", sans-serif
}

header{
    background-color: #522121;
    position: sticky;
    margin: 0 0 5% 0;
    padding: 15px;
    width: 100%
}
header h1{
    text-align: center;
    color: white
}

fieldset{
    background-color: white;
    text-align: center;
    width: 50%;
    padding: 15px;
    border: 2px solid white;
    border-radius: 5px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3)
}

button{
    margin: 7px;
    font-weight: bold;
    border: none;
    border-radius: 2px;
    padding: 5px;
    text-align: center;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

button:hover {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
    transform: translateY(-4px);
}

#add{
    background-color: darkseagreen;
}

#delete{
    background-color: lightcoral;
}

#sort{
    background-color: powderblue;
}

input{
    margin: 10px
}

#container{
    display: grid;
    place-items: center;
}

span{
    font-weight: bold
}

#list{
    float: left;
    margin: 10px 10px 10px 5%;
}

li{
    margin: 10px
}

ul{
    border: 1px solid white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.3)
}