body {
   margin: 0;
   background: #2a7b9b;
   background: linear-gradient(
      90deg,
      rgba(42, 123, 155, 1) 0%,
      rgb(166, 243, 198) 98%
   );
   font-family: "Courier New", Courier, monospace;
}

.heading {
   color: darkblue;
   text-align: center;
   padding-top: 10px;
   font-size: 40px;
}

.info-text {
   text-align: center;
   color: rgb(184, 18, 54);
   font-size: 25px;
}

.app {
   display: grid;
   grid-template-columns: repeat(auto-fill, 300px);
   gap: 40px;
   justify-content: center;
   padding: 50px;
}

.note {
   padding: 17px;
   border-radius: 15px;
   resize: none;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
   font-size: 18px;
   height: 200px;
   color: rgb(128, 17, 172);
   border: none;
   outline: none;
   background: rgba(255, 255, 255, 0.1);
   box-sizing: border-box;
}

.note::placeholder {
   color: gray;
   opacity: 30%;
}

.note:hover,
.note:focus {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   transition: all 300ms ease;
}

.btn {
   height: 200px;
   border-color: rgba(255, 255, 255, 0.37);
   background: rgba(255, 255, 255, 0.27);
   border-radius: 15px;
   font-size: 70px;
   font-weight: 700;
   color: rgba(0, 0, 0, 0.3);
   cursor: pointer;
}

.btn:hover {
   background: rgba(255, 255, 255, 0.55);
   color: rgba(0, 0, 0, 0.6);
   transition: all 300ms ease;
}