*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0;outline:0;vertical-align:baseline;margin-block:0}html{font-family:Montserrat;font-size:12px;font-weight:500;background-color:#333}body{overflow:scroll}::-webkit-scrollbar{display:none}h1{font-size:5em}.container{width:100%;height:100%}.snap{position:absolute;top:0;left:0;bottom:100vh;-ms-scroll-snap-type:y proximity;scroll-snap-type:y proximity;overflow:scroll}.snap>:nth-child(odd){background-color:#ccc}.scrollsnap.start{scroll-snap-align:start}.scrollsnap.center{scroll-snap-align:center}.fullheight{height:100vh}.fakeout{background-color:#ddd;font-family:"Courier Prime","Courier New",Courier,monospace;font-size:1em;height:135vh;overflow:hidden}.fakeout p{position:sticky;font-size:2em;top:5px;left:5px;padding:5px}.welcome{background:-webkit-gradient(linear, left top, left bottom, from(#222), to(rgba(55, 55, 55, 0.7))),url("/img/kenrokuen.jpg");background:linear-gradient(to bottom, #222, rgba(55, 55, 55, 0.7)),url("/img/kenrokuen.jpg");background-size:cover;background-attachment:fixed;display:grid;place-items:center;min-height:70vh}.welcome h1{color:#fff}.selfhostedmenu{display:grid;min-height:30vh;background-image:url(https://justkhoi.com/wp-content/uploads/2016/12/listn-bish.jpg);background-size:cover;background-attachment:fixed;grid-template-columns:repeat(auto-fit, minmax(25vw, 1fr));place-items:center;color:#fff}.selfhostedmenu .shmenuoption{width:100%;height:100%;display:grid;place-items:center}.selfhostedmenu .shmenuoption:nth-child(even){background-color:rgba(50,50,50,.5)}.selfhostedmenu .shmenuoption a{text-decoration:none;position:relative}.selfhostedmenu .shmenuoption a::before{content:"";position:absolute;width:100%;height:1px;bottom:0;left:0;background-color:#fff;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:bottom left;transform-origin:bottom left;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease}.selfhostedmenu .shmenuoption a:hover::before,.options>div:hover .selfhostedmenu .shmenuoption a::before{-webkit-transform:scaleX(1);transform:scaleX(1)}.mood{background-color:rgba(50,75,105,.4);backdrop-filter:brightness(50%) saturate(0.25) blur(5px);color:#fff}.mood a{color:#fff}.dle{background-color:rgba(50,80,105,.4);backdrop-filter:brightness(30%) saturate .5 blur(5px)}.dle a{color:#fff}.wishlist a{color:#fff}.fs{height:100%;width:100%}.dle_links{display:inline-block}.dle_links ul{list-style-type:none;padding:5px 0px}.dle_links ul li{padding:1rem 2rem;font-size:2rem}.dle_links ul li a{color:#fff;position:relative;text-decoration:none}.dle_links ul li a::before{content:"";position:absolute;width:100%;height:5px;border-radius:4px;background-color:hsla(27,100%,50%,.8);bottom:0;left:0;-webkit-transform-origin:right;transform-origin:right;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out, -webkit-transform .3s ease-in-out}.dle_links ul li a:hover::before{-webkit-transform-origin:left;transform-origin:left;-webkit-transform:scaleX(1);transform:scaleX(1)}.dle-header{display:grid;grid-template-columns:1fr auto;grid-template-areas:"title clocks" "desc clocks";gap:10px;padding:20px;color:#fff}.dle-header h1{grid-area:title;margin:0}.dle-header .head-desc{grid-area:desc;font-size:2rem}.dle-header .clocks{grid-area:clocks;text-align:right}.dle-header #localTime,.dle-header #pdtTime,.dle-header #hstTime{font-size:1rem}.dle-collection{display:grid;gap:1rem;grid-auto-rows:minmax(6rem, auto);margin:2rem 1rem}.dle-collection a{display:block;width:100%;height:100%;text-decoration:none;color:hsl(0,0%,85%)}.dle-collection a .dle-card{background-color:hsl(210,14%,30%);padding:3rem;text-align:center;font-size:2rem;outline:2px solid rgba(0,0,0,0);-webkit-transition:background-color .3s ease,border-radius 1s ease,outline 1.5s ease;transition:background-color .3s ease,border-radius 1s ease,outline 1.5s ease}.dle-collection a .dle-card.clicked{background-color:hsl(172,69%,76%);color:#000;border-radius:15px}.dle-collection a .dle-card.clicked:hover{outline:4px solid #fff}.dle-collection a .dle-card.clicked .game-name{color:#000;font-weight:800}.dle-collection a .dle-card .reset-time{padding:.5rem;font-size:1.5rem}.dle-collection a .dle-card .game-name{position:relative;text-decoration:none;color:#999;font-weight:600;-webkit-transition:color .3s ease-in;transition:color .3s ease-in}.dle-collection a .dle-card .game-name::before{content:"";position:absolute;opacity:20%;width:100%;height:2px;border-radius:4px;background-color:hsl(213,100%,95%);bottom:-10%;left:0;-webkit-transform-origin:right;transform-origin:right;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:opacity 1.5s ease-out,-webkit-transform 1.3s ease-in-out;transition:opacity 1.5s ease-out,-webkit-transform 1.3s ease-in-out;transition:transform 1.3s ease-in-out,opacity 1.5s ease-out;transition:transform 1.3s ease-in-out,opacity 1.5s ease-out,-webkit-transform 1.3s ease-in-out}.dle-collection a .dle-card:hover:not(.clicked){background-color:hsl(207,66%,50%);border-radius:8px;outline:2px solid #fff}.dle-collection a .dle-card:hover:not(.clicked) .game-name{color:#fff}.dle-collection a .dle-card:hover:not(.clicked) .game-name::before{opacity:100%;-webkit-transform-origin:left;transform-origin:left;-webkit-transform:scaleX(1);transform:scaleX(1)}@media(min-width: 992px){.dle-collection{grid-template-columns:repeat(4, 1fr)}}@media(min-width: 768px)and (max-width: 991px){.dle-collection{grid-template-columns:repeat(3, 1fr)}}@media(max-width: 767px){.dle-collection{grid-template-columns:repeat(2, 1fr)}}