:root{--primary-color: #ffde00;--primary-light-color: #ffe769;--secondary-color: #ffe4ba;--secondary-light-color: #fff6e8;--post-color: #62eea8;--delete-color: #ff9f9f;--light-color: #fffefc;--grey-color: #747e79;--dark-color: #000000;--white-color: #fffefc;--primary-font: "Cabin", sans-serif;--seconday-font: "Calistoga", sans-serif;--border-width: 3px;--element-border-radius: 5px;--button-height: 5px;--small-button-height: 2px;--element-padding: .8em;--maximum-width: 320px}html,body{margin:0;padding:0;font-size:16px}body{color:var(--dark-color);background-color:var(--secondary-light-color);font-family:var(--primary-font)}h1,h2,h3,p{margin:0}h2,h3{font-weight:500}.app-title{font-family:var(--seconday-font);font-size:2.5em;text-align:center}section{margin:3em 0}.auth-fields-and-buttons{display:flex;flex-direction:column;gap:1em}.user-section{display:flex;flex-direction:column;align-items:center;gap:.8em}.user-section img{width:3.75em;height:3.75em;border-radius:100%;border:var(--border-width) solid var(--dark-color)}.user-section h2{font-size:1.2em}.post-section{display:flex;flex-direction:column;gap:1em}.mood-emojis{display:flex}.mood-emoji-btn{display:flex;flex-direction:column;align-items:center;font-size:.8em;gap:.3em;background-color:transparent;border:0}.mood-emoji-btn:hover{transform:scale(1.2)}.mood-emoji-btn img{width:3.1em;height:3.1em}.selected-emoji{transform:scale(1.2);opacity:1}.unselected-emoji{transform:scale(1);opacity:.5}.posts-section{display:flex;flex-direction:column;gap:1em;margin-bottom:1.8em}.filters-and-posts-section{margin-top:1em;display:flex;flex-direction:column;gap:.6em}.filters-section{display:flex;gap:.4em}.filter-btn{color:var(--dark-color);font-size:.9em;padding:.3em;background-color:transparent}.selected-filter{color:var(--white-color);background-color:var(--dark-color)}.post{display:flex;flex-direction:column;background-color:var(--secondary-color);padding:.8em;border-radius:var(--element-border-radius);gap:.4em}.post .header{display:flex;justify-content:space-between;align-items:center}.post .header h3{font-size:1em}.post .header img{width:2em;height:2em}.post p{font-size:.9em;line-height:1.3em}.post .footer{display:flex;align-self:flex-start;gap:.4em}.post .footer button{font-size:.9em;padding:.2em .8em;box-shadow:0 var(--small-button-height) 0 0 var(--dark-color);position:relative}.post .footer button:hover{top:var(--small-button-height);box-shadow:none}.post .footer .edit-color{background-color:var(--post-color)}.post .footer .delete-color{background-color:var(--delete-color)}nav{margin:.6em 0;width:100%;display:flex;justify-content:flex-end}.container{max-width:var(--maximum-width);margin:0 auto;display:flex;flex-direction:column;width:100%}#logged-out-view .container{gap:2em}.app-container{display:flex;flex-direction:column;gap:1em}input,button,textarea{font-family:inherit;padding:var(--element-padding);border-radius:var(--element-border-radius);width:100%;box-sizing:border-box}input,button{font-size:1.1em;text-align:center;border:var(--border-width) solid var(--dark-color)}input:focus,button:focus,textarea:focus{outline:none}textarea{font-size:1em;border:0;box-shadow:3px 3px 3px 1px #00000040;resize:none;height:6em}textarea::placeholder{color:var(--grey-color);opacity:1}textarea:-ms-input-placeholder{color:var(--grey-color)}textarea::-ms-input-placeholder{color:var(--grey-color)}input{font-weight:300}input::placeholder{color:var(--grey-color);opacity:1}input:-ms-input-placeholder{color:var(--grey-color)}input::-ms-input-placeholder{color:var(--grey-color)}button{font-weight:600;width:100%}button:hover{cursor:pointer}.primary-btn{background-color:var(--primary-color);box-shadow:0 var(--button-height) 0 0 var(--dark-color);position:relative}.primary-btn:hover{top:var(--button-height);box-shadow:none}.secondary-btn{padding:.4em;background-color:transparent}.secondary-btn:hover{color:var(--light-color);background-color:var(--dark-color)}.provider-btn{color:var(--dark-color);background-color:var(--light-color);display:flex;justify-content:center;align-items:center;gap:.5em;border:0;box-shadow:3px 3px 3px 1px #00000040}.provider-btn:hover{transition:all .2s ease;box-shadow:0 0 #00000040}.google-btn-logo{width:1.375em}.icon-btn{background:none;border:none;cursor:pointer;padding:0;width:1.875em}.icon-img-btn:hover{filter:invert(.5)}#logged-out-view{display:none}#logged-in-view{display:none;margin:0}