@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');  
 * {  
  box-sizing: border-box;  
  outline: none;  
 }  
 body {  
  background-color:rgb(87, 8, 177);  
  font-family: 'Poppins', sans-serif;  
  display: flex;  
  flex-wrap: wrap;  
  margin: 0;  
  padding-top: 3rem;  
 }  
 .add {  
  position: fixed;  
  top: 2rem;  
  right: 3rem;  
  background-color: #795df8;  
  color: #fff;  
  border: none;  
  border-radius: 15px;  
  padding: 1rem 2rem;  
  cursor: pointer;  
 }  
 .add:active {  
  transform: scale(0.98);  
 }  
 .note {  
  background-color: #fff;  
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);  
  margin: 30px 20px;  
  height: 400px;  
  width: 400px;  
  overflow-y: scroll;  
 }  
 .note .tools {  
  background-color: #6047ce;  
  display: flex;  
  justify-content: flex-end;  
  padding: 0.5rem;  
 }  
 .note .tools button {  
  background-color: transparent;  
  border: none;  
  color: #fff;  
  cursor: pointer;  
  font-size: 1rem;  
  margin-left: 0.5rem;  
 }  
 .note textarea {  
  outline: none;  
  font-family: inherit;  
  font-size: 1.2rem;  
  border: none;  
  height: 400px;  
  width: 100%;  
  padding: 20px;  
 }  
 .main {  
  padding: 20px;  
 }  
 .hidden {  
  display: none;  
 }  
 @media (max-width:405px){
    .add{
        top: 1rem;  
        right: 1rem;
        margin-right: 75px;
        position:absolute;
    } 
    .note{
        height: 330px;  
        width: 400px;
        padding: 3px;
        margin-top: 50px; 
    }
 }
 @media (max-width:600px){
    .add{
        top: 1rem;  
        right: 2rem;  
    } 
 }
 @media (min-width:900px){
    .note{
        height: 380px;  
        width: 400px;
        padding: 3px;
    }
    .add{
        top: 1rem;  
        right: 1rem;
        margin-bottom: 20px;
    } 
 }