html{background-color:#102a43}.content-container{display:grid;grid-template-columns:1fr 6fr 1fr;grid-template-rows:auto;grid-auto-rows:auto;justify-content:center;width:100vw}@media only screen and (max-width:390px){html{font-size:14px}}@media only screen and (max-width:350px){html{font-size:12px}}.logo{font-family:Times New Roman,Times,serif;color:#bcccdc;margin-left:.25rem;font-size:2.5rem}.header{width:100%;display:flex;justify-content:center}.header-container{display:grid;grid-template-columns:repeat(3,1fr);align-items:center}.header-center{display:flex;grid-column:2 /3;grid-row:1/1;justify-content:space-around;align-items:center;align-self:start;justify-content:center}.searchbar{margin-left:.5rem;display:flex;justify-content:center;align-items:center}.search-input{height:2rem;width:15rem;border-radius:1rem;background-color:#bcccdc;border:none;font-size:1.25rem;text-align:center}.search-input:focus{outline:none}.search-input::placeholder{font-size:1.25rem;text-align:center}.submit-button:hover{cursor:pointer}.menu-button{width:2rem;height:2rem;margin-left:.5rem}.menu-button:hover{cursor:pointer}@media only screen and (max-width:555px){.logo{font-family:Times New Roman,Times,serif;color:#bcccdc;margin:.5rem}.header-center{margin-top:3rem}}@media only screen and (max-width:380px){.searchbar{margin:0}.logo{margin-right:.25rem}}@media only screen and (max-width:325px){.header-center{flex-direction:column}.searchbar{margin-bottom:.5rem}.logo{margin-bottom:0rem}}*,*:after,*:before{box-sizing:border-box}body{margin:0}.subreddit-list{list-style:none;padding:0;margin:0}.subreddit-list button{background:none;border:none;display:flex;align-items:center;font-weight:600;cursor:pointer;width:100%;padding:.5rem;border-radius:.5rem;font-size:1.25rem;color:#102a43;transition:transform .2s ease-in-out}.subreddit-list button:hover{background-color:#486581;transform:translate(10px)}.selected-subreddit button{background-color:#486581}.subreddit-image{width:2.5rem;height:2.5rem;object-fit:cover;border-radius:50%;margin-right:.5rem}:root{--bar-width: 3.25rem;--bar-height: .5rem;--hamburger-gap: .375rem;--foreground: #bcccdc;--background: #829ab1;--hamburger-margin: 2rem;--animation-timing: .2s ease-in-out;--hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2)}.hamburger-menu{--x-width: calc(var(--hamburger-height) * 1.41421356237);display:flex;flex-direction:column;gap:var(--hamburger-gap);width:max-content;position:absolute;top:var(--hamburger-margin);left:var(--hamburger-margin);z-index:2;cursor:pointer}.hamburger-menu:has(input:checked){--foreground: #bcccdc;--background: #333}.hamburger-menu:has(input:focus-visible):before,.hamburger-menu:has(input:focus-visible):after,.hamburger-menu input:focus-visible{border:1px solid var(--background);box-shadow:0 0 0 1px var(--foreground)}.hamburger-menu:before,.hamburger-menu:after,.hamburger-menu input{content:"";width:var(--bar-width);height:var(--bar-height);background-color:var(--foreground);border-radius:9999px;transform-origin:left center;transition:opacity var(--animation-timing),width var(--animation-timing),rotate var(--animation-timing),translate var(--animation-timing),background-color var(--animation-timing)}.hamburger-menu input{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;outline:none;pointer-events:none}.hamburger-menu:has(input:checked):before{rotate:45deg;width:var(--x-width);translate:0 calc(var(--bar-height) / -2)}.hamburger-menu:has(input:checked):after{rotate:-45deg;width:var(--x-width);translate:0 calc(var(--bar-height) / 2)}.hamburger-menu input:checked{opacity:0;width:0}.hamburger-menu:has(input:checked)+.sidebar{translate:0;width:auto}.sidebar{transition:translate var(--animation-timing);translate:-100%;padding:.5rem 1rem;padding-top:1px;background-color:var(--background);min-height:auto;z-index:2;border-radius:0rem .5rem .5rem 0rem;overflow:hidden;position:absolute;display:flex}.sidebar-title{color:#102a43;font-family:Times New Roman,Times,serif;font-size:2.5rem;font-weight:700;margin:.5rem 0;justify-self:center}@media only screen and (max-width:555px){.hamburger-menu{--x-width: calc(var(--hamburger-height) * 1.41421356237);display:flex;flex-direction:column;gap:var(--hamburger-gap);width:max-content;position:absolute;top:var(--hamburger-margin);left:calc((100vw / 2) - (var(--bar-width) / 2));z-index:2;cursor:pointer}:root{--hamburger-margin: 1rem}}.container{background-color:#bcccdc;margin:0rem .5rem .5rem;border-radius:.5rem;grid-column:2 / 3;display:grid;height:fit-content;justify-content:space-between;grid-template-rows:auto auto auto;grid-template-columns:3rem 1fr 1fr 10rem;transition:transform .2s ease-in-out;grid-template-areas:"arrow center center center" "arrow center center center" "arrow rightside rightside rightside" "image image image image" "image image image image"}.container:hover{transform:translate(10px)}.up-arrow:hover,.down-arrow:hover{cursor:pointer}.title{display:flex;align-items:center;color:#102a43;margin:0;font-size:1.5rem;padding-right:1rem}.center{grid-area:center;width:100%;margin-left:1rem}.right-side{grid-area:rightside;display:flex;width:100%;margin-left:1rem;justify-content:space-around}.comment-container{display:flex;align-items:center;width:10rem;margin-top:1rem}.timestamp{display:flex;font-size:1.5rem;align-items:center;color:#102a43;width:10rem;margin-top:1rem;margin-bottom:0}.comments{grid-column:1 / 5}.comments-icon:hover{background-color:#829ab1;border-radius:.5rem;cursor:pointer}.comment-count{color:#102a43;font-weight:700;font-size:1.5rem;margin-left:.25rem}.count{grid-area:arrow;display:flex;align-items:center;flex-direction:column;color:#102a43;font-weight:700;width:3rem}.profile-image{width:3rem;height:3rem;object-fit:cover;border-radius:50%}.user{display:flex;align-items:center;justify-content:left}.username{margin-left:.5rem;color:#102a43}.post-image-container{grid-area:image}.image{width:100%;height:100%;object-fit:contain;padding:1rem;border-radius:1.5rem;max-height:75rem}@media only screen and (max-width:595px){html{font-size:14px}.user{margin-left:1rem}.comments{max-width:100%}}@media only screen and (max-width:435px){html{font-size:10.5px}.center,.user{margin-left:0}.comments{max-width:100%}}.comments-container{background-color:#bcccdc;display:grid;grid-column:2 / 3;height:auto;margin:0rem .5rem .5rem;border-radius:.5rem;border:2px solid #102a43;grid-template-rows:4rem auto;grid-template-areas:"info info ts" "data data data"}.pro-image{width:2rem;height:2rem;object-fit:cover;border-radius:50%}.user-name{color:#102a43;font-size:1.15rem;margin-left:.25rem;font-size:1.5rem}.user-info{grid-area:info;display:flex;height:100%;align-items:center;margin-left:1rem}.ts{display:flex;align-items:center;font-size:1.25rem;margin-left:.5rem;justify-content:end;margin-right:1rem}.comment-time{color:#102a43;font-size:1.5rem}.actual-comment-container{grid-area:data}.actual-comment-container p{color:#102a43;margin-left:.5rem;font-size:1.25rem;padding-right:1rem}@keyframes react-loading-skeleton{to{transform:translate(100%)}}.react-loading-skeleton{--base-color: #ebebeb;--highlight-color: #f5f5f5;--animation-duration: 1.5s;--animation-direction: normal;--pseudo-element-display: block;background-color:var(--base-color);width:100%;border-radius:.25rem;display:inline-flex;line-height:1;position:relative;-webkit-user-select:none;user-select:none;overflow:hidden}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:var( --custom-highlight-background, linear-gradient( 90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100% ) );transform:translate(-100%);animation-name:react-loading-skeleton;animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite}@media(prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display: none}}.comments-container-loading{background-color:#bcccdc;display:grid;grid-column:2 / 3;height:auto;margin:0rem .5rem .5rem;border-radius:.5rem;border:2px solid #102a43;grid-template-areas:"info-loading info-loading ts-loading" "data-loading data-loading data-loading"}.profile-image-skeleton{width:2rem;height:2rem}.user-name-skeleton{width:7rem;margin-left:1rem}.user-info-loading{grid-area:info-loading;display:flex;align-items:center;margin-left:1rem;margin-top:1rem}.ts-div-loading{display:flex;grid-area:ts-loading;margin-right:1rem;margin-top:1rem;align-items:center;justify-content:end}.ts-loading{width:7rem}.actual-comment-container-loading{grid-area:data-loading;margin:1rem}.container-div{background-color:#bcccdc;border-radius:.5rem;margin:0rem .5rem .5rem;grid-column:2 / 3;display:grid;grid-template-columns:5rem 1fr 1fr 10rem;grid-template-areas:"arrow center center center" "arrow center center center" "arrow rightside rightside rightside"}.count-div{grid-area:arrow;width:3rem;margin-left:.5rem;display:flex;align-items:center;flex-direction:column}.arrow-loading{width:1rem}.count-skeleton{width:2.25rem}.center-div{grid-area:center;margin-right:1rem;margin-bottom:1rem}.user-div{display:flex;width:100%;align-items:center;justify-content:left;margin-bottom:1rem}.profile-img-skeleton{width:3rem;height:3rem}.username-skeleton{width:10rem;margin-left:1rem}.title-skeleton{height:2rem}.right-side-div{grid-area:rightside;margin-right:1rem;display:flex;justify-content:space-around;align-items:center;margin-bottom:1rem}.comment-container-div{display:flex;align-items:center;width:10rem}.comments-icon{width:1.75rem;height:1.75rem}.num-comments-skeleton{width:3rem;margin-left:1rem}.timestamp-skeleton{width:7rem}*{box-sizing:border-box}.error-container{grid-column:2 / 3;display:flex;flex-direction:column;justify-content:center;align-items:center}.error-msg{font-family:Times New Roman,Times,serif;color:#829ab1}.reload-button{color:#102a43;outline:0;grid-gap:.5rem;align-items:center;background-color:#bcccdc;border:1px solid #000;border-radius:.5rem;cursor:pointer;display:inline-flex;flex-shrink:0;font-size:1rem;gap:.5rem;justify-content:center;line-height:1.5rem;overflow:hidden;padding:.75rem 1rem;text-decoration:none;text-overflow:ellipsis;transition:all .14s ease-out;white-space:nowrap}.reload-button:hover{box-shadow:4px 4px #486581;transform:translate(-.25rem,-.25rem)}.reload-button:focus-visible{outline-offset:1px}body{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}
