#overlay{height:100%;width:100%;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2;background:#00000080;opacity:0;transition:all .2s;pointer-events:none}#heading{display:flex;flex-direction:column;align-items:center;margin:0 auto}#heading h2{font-size:3rem}#add-note-btn{position:fixed;right:2rem;bottom:3rem;z-index:1;padding:.5rem 1rem;border-radius:6px;background:var(--primary);color:#fff}#add-note-btn:hover{background:var(--secondary)}#guestbook{height:60vh;width:100%;position:relative;display:flex;flex-direction:column;padding:1rem;border:solid 2px var(--primary);border-radius:1rem .5rem .5rem 1rem;margin:3rem auto 0;font-family:inter;overflow-y:scroll}#guestbook::-webkit-scrollbar{width:.5rem;border-radius:1rem}#guestbook::-webkit-scrollbar-thumb{background:var(--primary);border-radius:1rem}#guestbook #add-note-form{max-height:80%;width:40%;position:fixed;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);display:none;flex-direction:column;gap:1.5rem;padding:1rem;border-radius:1rem;background:var(--bg);box-shadow:0 0 5px 1px #00000040}#guestbook #add-note-form div{display:flex;flex-direction:column-reverse}#guestbook #add-note-form label{color:var(--placeholder-text);font-size:small}#guestbook #add-note-form div input[type=text]{padding:.25rem;border-radius:.5rem;font-size:medium;border:solid 1px var(--input-border);outline:none;transition:all .1s}#guestbook #add-note-form div input[type=text]:focus{border:solid 1px var(--placeholder-text);background:var(--input-bg);box-shadow:inset 0 0 0 1px var(--placeholder-text)}#guestbook #add-note-form div input[type=text]:focus+label{color:var(--text)}#guestbook #add-note-form #star-rating{display:flex;flex-direction:column;border:none}#guestbook #add-note-form #star-rating div{display:flex;flex-direction:row;gap:.25rem}#guestbook #add-note-form #star-rating div img{height:2rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s}#guestbook #add-note-form #star-rating div img:hover{transform:translateY(-2px)}#guestbook #add-note-form textarea{max-height:15rem;padding:.25rem;border:solid 1px var(--input-border);border-radius:.5rem;font-size:medium;outline:none;font-family:Inter;resize:vertical;transition:all .1s}#guestbook #add-note-form textarea:focus{border:solid 1px var(--placeholder-text);background:var(--input-bg);box-shadow:inset 0 0 0 1px var(--placeholder-text)}#guestbook #add-note-form textarea:focus+label{color:var(--text)}#guestbook #add-note-form #form-buttons{display:flex;flex-direction:row;justify-content:space-between}#guestbook #add-note-form #form-buttons button{padding:.5rem 1rem;border-radius:6px;font-size:medium}#guestbook #add-note-form #form-buttons button:first-of-type{background:var(--input-border)}#guestbook #add-note-form #form-buttons button:first-of-type:hover{color:red;text-shadow:0 0 1px red}#guestbook #add-note-form #form-buttons button:last-of-type{background:var(--primary);color:#fff}#guestbook #add-note-form #form-buttons button:last-of-type:hover{background:var(--secondary)}#guestbook .success{height:10rem;width:40%;position:fixed;left:50%;top:50%;z-index:3;display:none;flex-direction:column;gap:.5rem;transform:translate(-50%,-50%);padding:1rem;border:solid 3px #4caf50;border-radius:1rem;background:#e8f5e9;font-family:Inter}#guestbook .success img{height:3rem;position:absolute;left:50%;top:-25%;transform:translate(-50%,25%);padding:.5rem;border-radius:100%;background:#4caf50}#guestbook .success h3{color:#4caf50;font-size:2rem;font-family:Inter;font-weight:600;text-align:center}#guestbook .success p{margin:auto;color:#4caf50;font-weight:700}#guestbook #notes{display:flex;flex-direction:column;gap:.25rem}#guestbook #notes .note{width:60%;display:flex;flex-direction:column;padding:.5rem;border-radius:1rem;margin:0 auto;background:var(--input-bg)}#guestbook #notes .note:hover{background:#eee}#guestbook #notes .note div img{height:2rem;-webkit-user-select:none;user-select:none}#guestbook #notes .note p:first-of-type{font-weight:600}#guestbook #notes .note p:last-of-type{word-break:break-all;white-space:normal}