*{box-sizing:border-box;font-family:Monaco;font-size:16px;margin:0}:root{--pink: #ffaead;--dk-pink: #cf615f;--lt-gray: #f2f0f1;--med-gray: #b8b7b7;--dk-gray: #696666}.form-container{display:flex;flex-direction:column;border:1px solid black;margin:20px auto;padding:10px;width:270px;background-color:var(--lt-gray);box-shadow:4px 4px 0 1px #000}.input-container{display:flex;flex-direction:column}.input-container textarea{width:100%;margin-top:5px;font-size:14px}.input-container textarea:focus{outline-color:var(--dk-gray)}.input-container label{font-weight:600;margin:8px 0;font-size:17px;align-self:center}.input-container p{margin-bottom:5px;align-self:center}.submit-container{display:flex;flex-direction:column}.submit-button{border-radius:20px;padding:7px 5px;font-size:14px;border:none;background-color:var(--pink)}.submit-button:active{background-color:var(--dk-pink)}.thoughts-container{border:1px solid black;margin:25px auto;width:270px;padding:10px 15px 15px;box-shadow:4px 4px 0 1px #000}.thought-row{margin-bottom:20px}.heart-container{display:flex;justify-content:space-between;align-items:center}.heart-likes{display:flex}.heart-likes p{padding-left:5px;align-self:center;font-size:13px}.heart-container p{color:var(--dk-gray)}.time{font-size:13px}.heart-button{border:none;border-radius:50%;background-color:var(--dk-gray);padding-top:5px;padding-bottom:3px}.heart-button:active{background-color:var(--dk-pink)}.normal-length{color:#000}.over-limit{color:red}@media (min-width: 668px){.form-container{width:400px}.input-container p{align-self:flex-start;margin-bottom:10px}.input-container label{font-size:20px;align-self:flex-start}.submit-button{width:270px;padding:10px}.thoughts-container{width:400px}.heart-likes p,.time{font-size:15px}}@media (min-width: 1025px){*{font-size:20px}.form-container{width:600px}.input-container label{font-size:24px}.input-container textarea{font-size:18px}.input-container p{margin-bottom:15px}.submit-button{font-size:18px;width:320px}.thoughts-container{width:600px}}:root{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}