@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:wght@700&display=swap');

* {
 font-family: 'Roboto Serif', serif;
}

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

body, html {
 background: #6987C9;
}

body {
 height: 100vh;
 display: flex;
 justify-content: center;
}

#container {
 width: auto;
 height: auto;
 padding: 0;
 min-width: 450px;
 position: absolute;
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
 background: white;
 border-radius: 10px;
}

.box {
 padding: 5%;
 text-align: center;
 background-color: #2D3142;
 border-radius: 10px 10px 0 0;
 color: white;
}

.box i {
 margin: 2%;
}

header {
 position: relative;
 display: flex;
 justify-content: space-between;
 padding: 30px 20px;
}

header input {
 padding-left: 10px;
 min-height: 40px;
 width: 85%;
 border: 2px solid #d1d3d4;
 font-weight: 500;
 position: relative;
 border-radius: 5px;
}

header button {
 min-width: 40px;
 background-color: #2D3142;
 border: none;
 font-size: 1.5rem;
 font-style: bold;
 position: relative;
 float: right;
 width: 20%;
 height: 45px;
 border-radius: 5px;
 color: white;
}

header button:hover {
 background-color: #6975A0;
}

hr {
 margin: 8px;
 color: #d1d3d4;
}

h3 {
 margin: 8px;
}

h3 i {
 margin: 2%;
}

#flag-icon {
 color: red;
}

#circle-check-icon {
 color: green;
}

#add i {
 color: white; 
}

li {
 width: 100%;
 display: flex;
 align-items: center;
 padding: 2%;
 box-sizing: border-box;
 border-radius: 10px;
 margin-bottom: 20px;
}

li .buttons {
 min-width: 100px;
 margin-left: auto;
 display: inline;
}

li .buttons button {
 background: none;
 min-width: 40px;
 border: none;
 font-size: 1.5rem;
}

.completed li {
 background-color: #409888;
 padding: 2%;
 color: #C91313;
 text-decoration-line: line-through;
}

button:hover i {
 cursor: pointer;
}