opticraft.css

@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap);@media (prefers-color-scheme:light){body{background:#fff;color:#141617}.version{color:#141617}.box{background-color:#fff;box-shadow:0 0 50px 0 rgba(0,0,0,.25)}.tilesWrap li{background:#fafafa;border:1px solid #f4f4f4}.tilesWrap li p::before{background:linear-gradient(to bottom,transparent,#fafafa)}.tilesWrap li input{border:2px solid #141617}.tilesWrap li button{border:2px solid #141617}.tilesWrap li button:before{background:#e6e6e6}}@media (prefers-color-scheme:dark){body{background:#141617;color:#f9f8f8}.version{color:#f9f8f8}.box{background-color:#1a1c1d}.tilesWrap li{background:#262a2b;border:1px solid #252727}.tilesWrap li p::before{background:linear-gradient(to bottom,transparent,#262a2b)}.tilesWrap li input{border:2px solid #f9f8f8;color:#f9f8f8}.tilesWrap li button{border:2px solid #f9f8f8;color:#f9f8f8}.tilesWrap li button:before{background:#f9f8f8}}body{font-family:Nunito}.header-div{position:static;margin:0 0 0 10%;width:80%;height:220px}.logo{position:relative;width:60px;height:112px;top:30px;left:10px}.title{position:relative;padding:0 0 0 90px;top:-110px}.title-desc{position:relative;padding:0 0 0 92px;top:-140px}.desc{position:relative;padding:0 0 0 92px;top:-150px}.desc-span{color:#e01a4f}.issues{color:#e01a4f;transition:text-shadow .5s}.issues:hover{text-shadow:0 0 10px #e01a4f}.version{position:relative;padding:0 0 0 92px;top:-160px;font-size:19px;transition:text-shadow .5s}.version:hover{color:#e01a4f;text-shadow:0 0 10px #e01a4f}.box{position:sticky;margin:-1% 0 0 10%;width:80%;border-radius:20px}.sides{position:relative;top:30px;left:40px}.tilesWrap{padding:1%;margin:50px auto;list-style:none;text-align:center;display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap}.tilesWrap li{display:inline-block;flex:1;width:20%;min-width:200px;max-width:230px;padding:80px 20px 40px;position:relative;vertical-align:top;margin:15px;min-height:25vh;text-align:left;border-radius:25px 0 25px 0}.tilesWrap li h3{margin-top:-25px;font-size:20px;margin-bottom:0}.tilesWrap li h4{font-size:18px;color:#e01a4f;top:-10px;position:relative;display:block}.tilesWrap li p:has(+ .expand:checked){--max-lines:10;--line-height:1.1;max-height:calc(var(--max-lines) * 16px * var(--line-height));overflow:hidden;position:relative}.tilesWrap li p::before{content:"";position:absolute;height:calc(16px * var(--line-height));width:100%;bottom:0;pointer-events:none}.tilesWrap li input{background:0 0;padding:10px 10px;border-radius:6px;position:relative;cursor:pointer;appearance:none;margin-bottom:20px}.tilesWrap li input::before{content:"Expand"}.tilesWrap li input:checked::before{content:"Collapse"}.tilesWrap li a{font-size:18px;color:#e01a4f;top:-10px;position:relative;display:block}.tilesWrap li button{background:0 0;padding:10px 10px;border-radius:6px;position:relative;transition:all .3s ease-in-out;transform:translateY(-40px);opacity:0;cursor:pointer;overflow:hidden}.tilesWrap li button:before{content:'';position:absolute;height:100%;width:120%;top:0;opacity:0;left:-140px;border-radius:0 20px 20px 0;z-index:-1;transition:all .3s ease-in-out}.tilesWrap li:hover button{transform:translateY(5px);opacity:1}.tilesWrap li button:hover{color:#262a2b}.tilesWrap li button:hover:before{left:0;opacity:1}.tilesWrap li:before{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;z-index:-1;background:#f9f8f8;transform:skew(2deg,2deg)}.tilesWrap li:before{background:#e01a4f;background:-webkit-linear-gradient(to right,#e01a4f,#f9c22e);background:linear-gradient(to right,#e01a4f,#f9c22e)}.censored{transition:filter 1s}.censored:hover{filter:blur(4px)}.phosphor{transition:text-shadow 1s}.phosphor:hover{text-shadow:0 0 20px #f9c22e}