body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--colour-page-bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--colour-main:#0f1626;--colour-sub1:#ab987a;--colour-sub2:#ff533d;--colour-bg:#f5f5f5;--colour-page-bg:#f0ecec}.App{background-color:#f0ecec;background-color:var(--colour-page-bg);font-family:Sarabun,sans-serif;text-align:center}.generic-banner{background-color:#ab987a;background-color:var(--colour-sub1);border:thin solid #000;font-weight:700;justify-content:left;margin-top:3px;padding:3px 3px 3px 5%;text-align:center}.display-page{display:block;margin:auto;width:90%}button:hover{cursor:pointer}.header{display:grid;grid-area:title account;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content}.header h1{color:#0f1626;color:var(--colour-main);font-family:Square Peg,cursive;font-size:2em;letter-spacing:.5em;margin:10px 10px 10px 30px;text-align:left}.header a{margin:10px}.header__account{display:flex;flex-direction:column;justify-content:space-between}.header__account a{color:#000;font-size:larger;text-decoration:none}.header__account a:hover{border-bottom:5px solid #ff533d;border-bottom:5px solid var(--colour-sub2);color:#ff533d;color:var(--colour-sub2);text-decoration:none}.header__account--user{align-self:flex-end;font-size:small;margin-right:10px;min-height:40px;padding:0}.search-bar{align-items:center;background-color:#ab987a;background-color:var(--colour-sub1);border:thin solid #000;display:flex;flex-wrap:wrap;font-weight:700;justify-content:center;justify-content:left;margin-bottom:20px;padding:3px 3px 3px 10px}.search-bar-container{margin:0 auto}.search-bar label{margin-right:3px;width:-webkit-max-content;width:max-content}.search-bar select{border:#ff533d;margin-left:2px;margin-right:10px;min-width:100px;padding:3px}.search-bar button{border-radius:5px;margin-bottom:5px;margin-top:5px;padding:5px}.article-results{display:grid;grid-template-areas:"title button";grid-template-columns:auto -webkit-max-content;grid-template-columns:auto max-content}.article-results h2{font-style:italic;grid-area:title;margin-left:10px;text-align:left}.article-results button{background-color:rgba(255,83,61,.7);border-radius:5px;font-size:large;grid-area:button;margin:20px 20px 20px 0;padding:5px}.article__link{color:#0f1626;color:var(--colour-main);text-decoration:none}.article-thumbnail{background-color:#f5f5f5;background-color:var(--colour-bg);border:thin solid #0f1626;border:thin solid var(--colour-main);border-radius:5px;display:grid;grid-template-areas:"title author" "content content" "comments votes";grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto auto;margin:5px;padding:5px}.article-thumbnail h3{border-bottom:thick solid #ff533d;border-bottom:thick solid var(--colour-sub2);margin-left:20px;margin-right:20px;padding-bottom:5px}.article-thumbnail__body{grid-area:content;height:150px;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent);mask-image:linear-gradient(180deg,#000 50%,transparent);overflow:hidden;text-overflow:ellipsis}.article-thumbnail__author{font-size:.8em;grid-area:author;min-width:100px}.article-thumbnail__votes{font-weight:700;grid-area:votes}.article-thumbnail__comment-count{font-weight:700;grid-area:comments;padding-left:10px;text-align:left}.article{background-color:#f5f5f5;background-color:var(--colour-bg);border:.2em solid #0f1626;border:.2em solid var(--colour-main);border-radius:5px;display:grid;grid-template-areas:"title title" "author empty" "content content" "votes votes";grid-template-columns:auto auto;grid-template-rows:auto auto auto auto;margin:10px;padding:5px 5px 0}.article__back{align-items:center;background-color:transparent;border:none;color:#0f1626;color:var(--colour-main);display:flex;font-size:x-large;font-weight:bolder;grid-area:title;height:30px;text-align:right;-webkit-transform:rotate(180deg);transform:rotate(180deg);width:-webkit-min-content;width:min-content}.article__back:hover{background-color:rgba(255,83,61,.5);border-radius:30%}.article__delete{background-color:#ff533d;background-color:var(--colour-sub2);border:thin solid #0f1626;border:thin solid var(--colour-main);color:#fff;display:flex;font-weight:700;grid-area:title;height:20px;justify-self:right;margin-right:10px;margin-top:10px}.article h3{border-bottom:thick solid #ff533d;border-bottom:thick solid var(--colour-sub2);grid-area:title;margin-bottom:0;margin-left:30px;margin-right:30px;padding-bottom:10px}.article__body{grid-area:content;padding-bottom:0;text-align:left}.article__author{font-size:.8em;grid-area:author;margin-top:0;padding-left:5px;padding-top:5px;text-align:left}.article__votes{display:flex;grid-area:votes;justify-content:right;margin-bottom:0;padding-bottom:0;text-align:right}.article__votes,.article__votes p{font-weight:700;padding-right:10px}.article__votes p{bottom:0;color:#0f1626;color:var(--colour-main);display:inline;height:50px;padding-left:10px}.article__votes button{min-width:38px}.article__comment-count{display:flex;font-weight:700;grid-area:votes;padding-bottom:0;padding-left:10px;text-align:left}.add-comment{border-radius:5px;display:grid;grid-template-areas:"label button" "textbox textbox";grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:-webkit-min-content auto;grid-template-rows:min-content auto;margin:5px}.add-comment p{font-size:large;font-weight:700;grid-area:label;padding-left:10px;text-align:left}.add-comment textarea{grid-area:textbox;margin:10px;min-height:80px}.add-comment button{border:thin solid grey;border-radius:5px;grid-area:button;margin:10px}.add-comment__button--enabled{background-color:#bdb7b7;color:#0f1626;color:var(--colour-main)}.add-comment__button--disabled{background-color:#fff;color:#979494}.voted{color:#ff533d;color:var(--colour-sub2);font-size:x-large}.not-voted,.voted{background-color:transparent;border:none;height:50px;outline:none}.not-voted{color:#616060;font-size:large}.comment-label{font-size:large;font-weight:700;padding-left:10px;text-align:left}.comment{background-color:#f5f5f5;background-color:var(--colour-bg);border:thin solid #000;border-radius:5px;display:grid;grid-template-areas:"body body delete" "votes votes votes";grid-template-columns:-webkit-min-content auto -webkit-min-content;grid-template-columns:min-content auto min-content;grid-template-rows:auto auto;margin:5px}.comment__body{background-color:#ebe6e6;grid-area:body;margin-right:10px;margin-top:10px;padding:3px}.comment__author,.comment__body{margin-left:10px;text-align:left}.comment__author{font-size:small;grid-area:votes;margin-top:0;padding-top:0;top:0;width:-webkit-max-content;width:max-content}.comment__votes{bottom:0;grid-area:votes;overflow:hidden;padding-right:10px;text-align:right}.comment__votes button,.comment__votes p{bottom:0;display:inline-block;padding:0}.comment__votes button{margin-bottom:0;min-width:40px}.comment__delete{background-color:#ff533d;background-color:var(--colour-sub2);border:thin solid #0f1626;border:thin solid var(--colour-main);color:#fff;font-weight:700;grid-area:delete;height:20px;margin-right:10px;margin-top:10px}.login__main{display:flex;flex-direction:column;justify-content:center}.login__form{align-self:center;background-color:#f5f5f5;background-color:var(--colour-bg);border:thin solid #000;display:grid;grid-template-areas:"username-label username" "password-label password" "button button" "error error";grid-template-columns:-webkit-min-content auto;grid-template-columns:min-content auto;grid-template-rows:auto auto -webkit-min-content -webkit-min-content;grid-template-rows:auto auto min-content min-content;margin-top:50px;min-width:300px;padding:20px;width:50%}.login__form label{font-size:large;padding:10px}.login__form input{margin:10px;padding:10px}.login__form button{background-color:rgba(255,83,61,.7);border-radius:5px;font-size:large;grid-area:button;margin-bottom:0;margin-left:40px;margin-top:20px;padding:5px;width:-webkit-min-content;width:min-content}.login__form-error{font-size:large;font-style:italic;grid-area:error;height:20px}.display-more-button{background-color:transparent;border:none;font-size:large;margin-bottom:10px;padding:10px}.display-more-button:hover{background-color:rgba(255,83,61,.5);border-radius:10%}.account-page{display:flex;flex-direction:column;justify-content:center}.account-info{align-self:center;background-color:#f5f5f5;background-color:var(--colour-bg);border:thin solid #0f1626;border:thin solid var(--colour-main);display:block;flex-direction:column;font-size:large;font-weight:700;margin:10px 10px 30px;padding:10px;text-align:center;width:90%}.account-info button{background-color:rgba(255,83,61,.7);border-radius:5px;font-size:large;padding:5px;width:-webkit-min-content;width:min-content}.account-articles{align-self:center;border-top:thick double #ff533d;border-top:thick double var(--colour-sub2);padding-left:10px;padding-right:10px;width:90%}.account-articles h2{margin-left:10px;text-align:left}.post-article-page{align-items:center;display:flex;flex-direction:column}.post-article__back{background-color:transparent;border:none;color:#0f1626;color:var(--colour-main);display:flex;font-size:x-large;font-weight:bolder;height:30px;margin-right:80%;text-align:right;-webkit-transform:rotate(180deg);transform:rotate(180deg);width:-webkit-min-content;width:min-content}.post-article__back:hover{background-color:rgba(255,83,61,.5);border-radius:30%}.post-article{align-items:start;background-color:#f5f5f5;background-color:var(--colour-bg);border:thin solid #000;display:flex;flex-direction:column;margin-top:30px;padding-left:20px;width:80%}.post-article label{font-size:large;font-weight:700;margin-bottom:5px;margin-top:30px}.post-article input,textarea{padding:10px;width:90%}.post-article textarea{min-height:200px}.post-article select{font-size:large}.post-article button{background-color:rgba(255,83,61,.7);border-radius:5px;font-size:large;margin:20px 20px 20px 0;padding:5px}.post-article p{font-style:italic;height:20px}@media screen and (min-width:1000px){main{margin:0 auto;max-width:1000px}}
/*# sourceMappingURL=main.bdcc3e1f.css.map*/