body{position:absolute;height:100%;width:100%;inset:0;overflow:hidden;box-sizing:border-box;padding:1rem;margin:0;font-family:Arial,Helvetica,sans-serif;background:#fff;display:grid;grid-template-areas:"heading heading" "meme quotes" "footer footer";grid-template-columns:repeat(2, 50%);grid-template-rows:min-content 1fr min-content auto}@media screen and (max-width: 800px){body{grid-template-columns:100%;grid-template-rows:min-content repeat(2, 1fr) min-content auto;grid-template-areas:"heading" "meme" "quotes" "footer"}}#heading{grid-area:heading;display:flex;flex-direction:row;flex-wrap:wrap;font-size:calc(8px + 1vmin)}#heading h1{margin:.25rem}#heading #progress{--progress: 0%;position:relative;width:100%;height:1.5rem;border-radius:.75rem;background-color:#d3d3d3;box-shadow:0 0 .25rem #000;z-index:0}#heading #progress::after{position:absolute;content:"";height:100%;width:var(--progress);background-color:red;border-radius:.75rem;animation:1s linear infinite alternate progressBar;z-index:1}@keyframes progressBar{from{opacity:1}to{opacity:.5}}#meme{position:relative;grid-area:meme;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;gap:.25rem;height:100%;padding:1rem;box-sizing:border-box;overflow:hidden}#meme button{display:grid;place-items:center;height:3em;width:max-content;align-self:center;cursor:pointer;background-color:#fff;border:2px solid #000;border-radius:.25em;font-size:1em;transition:background-color .2s linear,color .2s linear}@media(hover: hover)and (pointer: fine){#meme button:hover{background-color:#000;color:#fff}}#meme #meme-img{justify-self:center;max-height:calc(100% - 3em);width:100%;object-fit:contain}#meme.loading::before{content:"";position:absolute;z-index:1;width:calc(100% - .5rem);height:calc(100% - .5rem);inset:.25rem;border-radius:1rem;background-color:rgba(0,0,0,.5)}#meme.loading::after{position:absolute;content:"";z-index:2;width:10%;aspect-ratio:1/1;top:50%;left:45%;transform:translateY(-50%);border:5px dotted #fff;border-radius:50%;animation:rotSpinner 5s linear infinite}@keyframes rotSpinner{0%{transform:translateY(-50%) rotate(0deg)}100%{transform:translateY(-50%) rotate(360deg)}}#quotes{grid-area:quotes;display:flex;padding:0;gap:2.5rem;box-sizing:border-box;overflow-x:scroll;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;scroll-marker-group:after;anchor-name:--quotesCar}#quotes .quote{align-self:center;scroll-snap-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;height:min-content;box-sizing:border-box;padding:3vh 2rem;list-style-type:none;background-color:#d3d3d3;border:1px solid #000;border-radius:1rem;font-size:calc(4px + 1vmin);flex:0 0 100%}#quotes .quote .text{font-size:2.5em}#quotes .quote .author{font-size:1.5em;font-style:italic}#quotes .quote::scroll-marker{content:"";width:1rem;aspect-ratio:1/1;background-color:rgba(0,0,0,0);border:1px solid #000;border-radius:50%;transition:background-color .3s ease}#quotes .quote::scroll-marker:target-current{background-color:#000}#quotes::scroll-button(*){position:absolute;position-anchor:--quotesCar;transform:translateY(-50%);top:anchor(center);width:2rem;height:2rem;padding:0;cursor:pointer;background-color:rgba(0,0,0,.6);--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.325 12.85q-.225-.15-.337-.375T5.874 12t.113-.475t.337-.375l8.15-5.175q.125-.075.263-.112T15 5.825q.4 0 .7.288t.3.712v10.35q0 .425-.3.713t-.7.287q-.125 0-.262-.038t-.263-.112z'/%3E%3C/svg%3E");-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;transition:background-color .2s linear}#quotes::scroll-button(*):hover{background-color:#000}#quotes::scroll-button(*):disabled{background-color:rgba(0,0,0,.2);cursor:unset}#quotes::scroll-button(left){left:anchor(left);content:""}#quotes::scroll-button(right){transform:rotate(180deg) translateY(50%);right:anchor(right);content:""}#quotes::scroll-marker-group{position:absolute;position-anchor:--quotesCar;top:calc(anchor(bottom) - 1rem);left:anchor(left);width:anchor-size(width);display:flex;justify-content:center;gap:.25rem}@media screen and (max-width: 800px){#quotes::scroll-marker-group{display:none}}footer{grid-area:footer;display:flex;flex-direction:column}#logo{width:15em;transform:rotate(-5deg)}