:root{--primary: dodgerblue;--primary-dark: rgb(5, 92, 179);--white: rgb(240, 240, 240);--bg-white: rgb(245, 245, 245);--black: rgb(75, 75, 75);--bg-black: rgb(15, 15, 15)}:root.light-mode{--tile-bg: rgb(250, 250, 250);--border-color: rgb(0, 0, 0, .1);background-color:var(--white);color:var(--black)}:root.light-mode dialog{background-color:var(--white);color:var(--black);box-shadow:0 0 1rem #0003}:root.light-mode dialog a{color:var(--black);border:2px solid var(--black)}:root.light-mode dialog a img{filter:invert(100%)}:root.light-mode dialog a:hover img{filter:none}:root.light-mode dialog .tech div{border-color:var(--black)!important}:root.dark-mode{--tile-bg: rgb(35, 35, 35);--border-color: rgb(255, 255, 255, .1);background-color:var(--bg-black);color:var(--white)}:root.dark-mode dialog{background-color:var(--tile-bg);color:var(--white);border:1px solid rgba(255,255,255,.1)}:root.dark-mode dialog a{color:var(--white);border:1px solid var(--white)}html,body{margin:0;padding:0}body{width:100%;display:flex;flex-direction:column;align-items:center;justify-items:center;font-family:DM Sans,Helvetica,sans-serif;font-size:1rem;padding:2em 2em 4em;box-sizing:border-box}.dark-light-switch{cursor:pointer;position:fixed;top:1rem;right:1rem;height:1.5rem;width:1.5rem;display:grid;place-items:center;transition:.2s}.dark-light-switch img{height:100%;width:100%}.dark-light-switch:hover{scale:1.1}main{display:flex;flex-direction:column;justify-content:center;align-items:center}header{width:100%;font-size:2rem;font-weight:700;color:var(--primary);padding-bottom:.5rem;border:none;border-bottom:1px solid var(--border-color);margin-bottom:2.5rem}.grid-box{display:grid;grid-template-columns:repeat(2,1fr);gap:3.5vw;margin:auto}.tile{cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;box-sizing:border-box;width:44dvw;height:47dvw;padding:1.25em .75em;box-shadow:0 0 12px #00000013;border-radius:.75rem;background-color:var(--tile-bg);color:inherit;text-align:center;text-decoration:none;transition:.2s}.tile img{height:6rem;width:6rem;border-radius:.5rem}.tile:hover{scale:1.05;box-shadow:2px 4px 8px #00000013,-.5px 0 0 .5px #00000003,0 -.5px 0 .5px #0000000d}a.tile img{filter:invert(45%) sepia(70%) saturate(1037%) hue-rotate(185deg) brightness(101%) contrast(101%)}dialog{position:fixed;inset:0;height:fit-content;width:fit-content;border:none;border-radius:.75rem;outline:none}dialog::backdrop{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}dialog .dialog-close{cursor:pointer;position:absolute;top:.5rem;right:.5rem;color:red;display:grid;place-items:center;font-size:1.5rem;font-weight:700;line-height:.6;padding:.35rem;border-radius:50%;background-color:#fe676740}dialog .dialog-main{margin:2rem;display:flex;flex-direction:column;gap:3.5rem}dialog .dialog-main .project-box{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:1rem}dialog .dialog-main .project-box>*{max-width:14rem}dialog .dialog-main .project-box .img-box{height:12rem;width:12rem}dialog .dialog-main .project-box .img-box img{height:100%;width:100%;border-radius:.75rem}dialog .dialog-main .project-box .about{color:inherit;font-size:.85rem;text-align:center}dialog .dialog-main .project-box .tech{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}dialog .dialog-main .project-box .tech div{font-size:.675rem;border-radius:9999px;padding:.7em 1em .675em;border:1px solid var(--white);text-transform:uppercase;line-height:.25;display:grid;place-items:center}dialog .dialog-main .links{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem}dialog .dialog-main .links a{width:75%;display:flex;justify-content:center;align-items:center;gap:.5rem;text-decoration:none;font-size:.75rem;font-weight:400;outline:none;padding:.5rem;border-radius:999px}dialog .dialog-main .links a img{height:1.5rem;width:1.5rem}dialog .dialog-main .links a:hover{background-color:var(--primary);color:var(--white)}@media only screen and (min-width: 768px){.dark-light-switch{height:1.75rem;width:1.75rem}header{font-size:2rem}.grid-box{grid-template-columns:repeat(3,1fr);gap:1.5em}.tile{height:12rem;width:12rem;padding:.25em;gap:.8em;font-size:.75rem}.tile img{height:7.5rem;width:7.5rem}dialog .dialog-close{background-color:transparent}dialog .dialog-close:hover{background-color:#fe676740}dialog .dialog-main{flex-direction:row}dialog .dialog-main .links{margin-right:.75rem}dialog .dialog-main .links a{width:100%;font-size:.9rem;padding:.75rem}}@media only screen and (min-width: 1200px){header{font-size:2.5rem}.grid-box{grid-template-columns:repeat(3,1fr);gap:1.75em}.tile{height:14rem;width:14rem;padding:.3em;gap:1em;font-size:1rem}.tile img{height:9rem;width:9rem}}