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

ul {
   list-style: none;
}

body {
   width: 95%;
   margin: 3rem auto;
   background-color: #a1d4e2;
   font-family: 'Poppins', sans-serif;
   display: flex;
   justify-content: center;
}

.container{
   width: 100%;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
}


#add{
   cursor: pointer;
   background: #9EC862;
   border-radius: 3px;
   border: none;
   padding: .5rem 1rem;
   color: #fff;
   position: fixed;
   top: 1rem;
   right: 1rem;

}

.note{
   background-color: #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   margin: 20px;
   width: 300px;
   height: 300px;
   margin-bottom: 3.5rem;
}


.note .tools{
   background-color: #9EC862;
   padding: .5rem;
   display: flex;
   gap: .825rem;
   justify-content: flex-end;
}

.note .tools button{
   cursor: pointer;
   background-color: transparent;
   border: none;
   color: white;
   font-size: 1.25rem;
}

.note .main{
   width: 100%;
   height: 300px;
   padding: .5rem;
}

.main{
   word-break: break-all;
   background-color: rgb(228, 228, 228)!important;
}

.note textarea{
   font-family: inherit;
   padding: .5rem;
   border: none;
   outline: none;
   width: 100%;
   height: 300px;
}

.note .hidden{
   display: none;
}