:root{margin:0;font-family:Courier New,Courier,monospace}form{border:solid;box-shadow:10px 10px 1px 1px #000c;padding:30px;max-width:70%;margin:20px auto 40px;background-color:#eee8e8fb;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}h2{font-size:15px}textarea{padding:25px;width:80%;height:20px}.submit{border-radius:20px;background-color:pink;margin-top:20px;padding:10px;border:none}.message{border:solid;padding:30px;max-width:70%;max-height:30%;margin:20px auto 40px;box-shadow:10px 10px 1px 1px #000c;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word;position:relative}.heart-container{display:flex;align-items:center}.heart-button{background:rgb(232,229,229);border-radius:50%;height:50px;width:50px;border:none;font-size:20px;cursor:pointer;margin-right:8px}.heart-button.clicked{background-color:#ffcccb}.hearts-count{font-family:Arial,Helvetica,sans-serif;color:#b6b0b0;margin:0}.time{font-size:.85rem;font-family:Arial,Helvetica,sans-serif;color:gray;position:absolute;bottom:10px;right:10px}@media (min-width: 768px) and (max-width: 1024px){body{margin:0;padding:0;overflow-x:hidden}.message,form{width:80%;max-width:80%;margin:20px auto}.hearts-count{margin:0}h1{text-align:center}}@media (min-width: 320px) and (max-width: 767px){body{margin:0;padding:0;overflow-x:hidden}form{width:80%;max-width:100%;margin:20px 40px 20px auto;padding:30px}textarea{width:70%}.heart-button{padding:15px}.message{margin-left:30px;width:80%;max-width:100%}.hearts-count{margin:0}}
