.header, .container {
    display: flex;
    justify-content: center;
}

h1 {
    font-size: 60px;
    background: repeating-linear-gradient(rgb(47, 16, 3), rgb(129, 61, 248));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.inputField {
    background: rgb(242, 252, 242);
    padding: 15px;
    width: 40%;
    border: 2px solid rgb(99, 44, 44); 
    border-radius: 10px;
}
.btn {
    color:rgb(71, 51, 3);
    background: rgb(247, 225, 201);
    font-size: 15px;
    font-weight: bold;
    border: 4px solid rgb(99,44,44); 
    border-radius: 10px;
    padding: 15px;
    
}
body {
    min-height: 50vh;
    background-repeat: no-repeat;
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('backgorund.jpg'); 
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    z-index: -1;
}
.taskList {
    display:flex;
    flex-direction: column;
    align-items: center;
}

.taskItem {
padding:10px;
background: rgb(205, 182, 185);
list-style-type: none;
border-radius: 10px;
border: solid rgb(99,44,44) 2px;
width: 40%;
text-align: center;
font-size: 25px;
}

.taskCompleted {
background:  rgb(223, 238, 183);
color: black;
text-decoration: line-through;
transition:all 1s ease-out;
}

@media all and (max-width: 800px) {
    h1 {font-size: 40px;}
}

@media all and (max-width: 500px){
    h1{font-size: 20px; }
    .taskItem {font-size: 15px;}
}