@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&family=Open+Sans:wght@400;700&family=Ubuntu:wght@300;400&display=swap";*{margin:0;padding:0;color:#2c302e;font-family:Montserrat,Open Sans,Ubuntu,sans-serif}h1{font-weight:700}.single-user-img{max-width:80vw;width:300px;mix-blend-mode:multiply;max-height:70vh;height:300px}.header-main-text a,.header-main-text a:visited,a:active,a:hover{color:#fff0f6}a{text-decoration:none;color:#84a59d}a :visited,a:active,a:hover{color:#2c302e}.nav-bar button{margin:5px}button{padding:5px 10px;cursor:pointer;background-color:#fff0f6;border-radius:5px}select{background-color:#fff0f6;border-radius:2px}.app{background-color:#fff0f6;min-height:100vh;min-width:100vw}.app .header{display:flex;justify-content:space-between;background-color:#2c302e;padding:5px 20px}.app .header .header-main-text{color:#fff0f6;font-size:xx-large}.app .header .header-logged-in{display:grid;grid-template-columns:repeat(2,auto);grid-template-rows:repeat(2,auto)}.app .header .header-logged-in .header-logged-in-username{grid-area:1 / 1 / 2 / 3}.app .header .header-logged-in .header-logged-in-avatar-background{grid-area:2 / 1 / 3 / 2;background-color:#fff0f6;height:40px;width:40px;border-radius:100%;display:flex;margin:auto}.app .header .header-logged-in .header-logged-in-avatar-background .header-logged-in-avatar{mix-blend-mode:multiply;margin:0 auto}.app .header .header-logged-in .header-logged-in-switch-user{grid-area:2 / 2 / 3 / 3;margin:10px}.app .header .header-logged-in-avatar{height:40px;max-width:40px}.app .header .header-logged-in-username{color:#fff0f6}.app .nav-bar{background-color:#fafffe;margin:10px 2%;padding:5px}.app .home{background-color:#fafffe;margin:10px 2%;padding:5px;display:flex;flex-direction:column}.app .home .home-articles-link{margin:auto}.app .articles{background-color:#fafffe;margin:10px 2%;padding:5px}.app .articles .articles-sort-and-order{padding-top:10px;display:flex}.app .articles .articles-sort-and-order .articles-sort-by{margin-right:20px}.app .articles .articles-sort-and-order .sort-drop-down,.app .articles .articles-sort-and-order .order-drop-down{padding-left:2px}.app .article-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:2%;border:3px #fff0f6 solid;border-radius:5px}.app .article-list .article-card{display:grid;grid-template-columns:40px 300px;grid-template-rows:min-content 150px 30px;grid-column-gap:10px;grid-row-gap:10px;width:350px;max-width:80vw;min-height:250px;max-height:auto;margin:10px;padding:10px;border:3px #fff0f6 solid;border-radius:5px}.app .article-list .article-card .article-card-votes{grid-area:1 / 1 / 4 / 2;text-align:center}.app .article-list .article-card .article-card-title{grid-area:1 / 2 / 2 / 3;max-width:80%}.app .article-list .article-card .article-card-img{grid-area:2 / 2 / 3 / 3;max-height:150px;width:80%;object-fit:cover}.app .article-list .article-card .article-card-info{grid-area:3 / 2 / 4 / 3;display:flex;justify-content:space-between;width:80%}.app .log-in{background-color:#fafffe;margin:10px 2%;padding:5px}.app .single-article{max-width:100vw;background-color:#fafffe;margin:10px 2%;padding:10px 2%}.app .single-article .single-article-info{display:flex;justify-content:space-between;align-items:center;max-width:80vw}.app .single-article .single-article-info .single-article-votes{text-align:center}.app .single-article .single-article-text{padding-top:10px;padding-bottom:20px}.app .single-article .single-article-img{max-width:90%;margin:0 auto}.active-topic{background-color:#84a59d}.comment-list{display:flex;flex-direction:column;justify-content:center}.comment-list .comment-card{border:1px solid #84a59d;border-radius:1px;padding:5px;margin:2px auto;width:92%}.comment-list .comment-card .comment-card-first-line{display:flex;align-items:center;justify-content:space-between;overflow:hidden}.comment-list .comment-card .comment-card-first-line .comment-card-first-left{display:flex;justify-content:flex-start;align-items:center}.comment-list .comment-card .comment-card-first-line .comment-card-first-left .comment-card-avatar-background{background-color:#fff0f6;height:40px;width:40px;border-radius:100%;display:flex}.comment-list .comment-card .comment-card-first-line .comment-card-first-left .comment-card-avatar-background .comment-card-avatar{mix-blend-mode:multiply;margin:0 auto;max-width:100%}.comment-list .comment-card .comment-card-first-line .comment-card-first-left .comment-card-author{align-self:center;padding:0 5px}.comment-list .comment-card .comment-card-first-line .comment-card-first-left .comment-card-date{color:#2c302e5c;font-size:10px}.comment-list .comment-card .comment-card-body{margin-left:20px}.comment-list .comment-card .comment-card-votes{display:flex;align-items:center}.comment-list .comment-card .comment-card-votes .comment-card-votes-text{padding:0 10px}.user-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly}.user-list .user-card{width:200px;padding:auto;margin:10px}.user-list .user-card .user-card-avatar{max-width:100%;height:100px;mix-blend-mode:multiply}.error-msg{color:red}@media only screen and (min-width: 900px){.app .header{grid-area:1 / 1 / 2 / 3;padding:10px 100px;color:#fafffe}.app .content-container{width:calc(100% - 200px);margin:0 auto;display:grid;grid-template-columns:200px 1fr;grid-template-rows:1fr;grid-column-gap:10px;grid-row-gap:5px}.app .content-container .nav-bar{grid-area:1 / 1 / 2 / 2;display:flex;flex-direction:column}.app .content-container .home,.app .content-container .articles,.app .content-container .log-in,.app .content-container .single-article,.app .content-container .error-page{grid-area:1 / 2 / 2 / 3}.article-card{display:grid;grid-template-columns:40px auto;grid-template-rows:min-content 150px 30px;grid-column-gap:10px;grid-row-gap:10px;width:200px;max-width:100vw;min-height:250px;max-height:auto;margin:10px;padding:10px;border:3px #fff0f6 solid;border-radius:5px}.article-card .article-card-votes{grid-area:1 / 1 / 4 / 2;text-align:center}.article-card .article-card-title{grid-area:1 / 2 / 2 / 3}.article-card .article-card-img{grid-area:2 / 2 / 3 / 3;max-height:150px;width:300px;object-fit:cover}.article-card .article-card-info{grid-area:3 / 2 / 4 / 3;display:flex;justify-content:space-between}.sort-drop-down,.order-drop-down{padding-left:2px;margin-left:5px}}.comment-adder{margin:10px auto}.comment-adder .comment-adder-label{margin:auto;align-content:flex-start}.comment-adder .comment-adder-input{width:100%;margin:5px auto;height:60px}.comment-adder .comment-adder-button{margin:auto}