style.css

@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');

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

html{
        background: url(./assets/wp7127008.jpg) no-repeat center center fixed; 
        background-size: cover;
}

body{
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: lexend, Helvetica, sans-serifs;
}

li{
        display: flex;
        justify-content: space-around;
}


section{
        background-color: #93B5C6;
        margin: 20px 0;
        border-radius: 100px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 0 100px;
}

.main-header{
        font-family: 'Architects Daughter', cursive;
        margin: 1rem 0 0.2rem 0;
        font-size: 3rem;
        text-align: center;
}

.sub-header{
        font-family: 'Architects Daughter', cursive;
        margin: 1rem 0;
        font-size: 2rem;
        text-align: center;
}

.input-field{
        text-align: center;
}

.input-field .input{
        padding: 0.5rem;
        padding-left: 25px;
        border-radius: 100px;
        border: none;
        outline: none;
}


.btn {
        padding:0.5rem 1.6rem;
        outline: none;
        background-color: #F7DAD9;
        border: none;
        border-radius:100px;
        box-shadow: 0 0.4rem #95a5a6;
        cursor: pointer;
        font-family: monospace;
        margin-left: 20px;
      }
      
      .btn:hover{
        background-color: #e4b5b4;
      }
      
      .btn:active {
        background-color: #e4b5b4;
        box-shadow: 0 5px #95a5a6;
        transform: translateY(4px);
      }

.list{
        margin: 1rem 0 0.5rem 0;
}

.list li{
        padding: 1rem 0 1rem 0 ;
        display: flex;
        justify-content: space-between;
        align-items: center;
}

p{
        width:60%;
        word-wrap: break-word;
}


.trash-btn, .back-btn{
        padding:0.5rem;
        outline: none;
        background-color: rgb(228, 101, 101);
        border: none;
        color: #333;
        box-shadow: 0 0.4rem #95a5a6;
        cursor: pointer;
        border-radius:0.2rem;
}

.trash-btn:hover, .back-btn:hover{
        background-color: rgba(228, 181, 180, 0.815), 101, 101);
      }
      
      .trash-btn:active, .back-btn:active {
        background-color: #e4b5b4;
        box-shadow: 0 5px #95a5a6;
        transform: translateY(4px);
      }


.strike{
        text-decoration: line-through;
}