@import "https://fonts.googleapis.com/css2?family=Matemasie&family=Montserrat:wght@400;500;600;700&display=swap";:root{--text:#6b6375;--cream:#e8cfb3;--accent:#ff2b2b}body{margin:0;padding:0}.slide-in{transform-origin:top;background:#fff;width:100%;height:100vh;position:fixed;top:0;left:0}.slide-out{transform-origin:bottom;background:#fff;width:100%;height:100vh;position:fixed;top:0;left:0}.background{pointer-events:none;z-index:998;background-color:#fff;width:100vw;height:100vh;position:fixed;top:0;left:0}.transition-grid{z-index:999;pointer-events:none;grid-template-rows:repeat(12,1fr);grid-template-columns:repeat(20,1fr);display:grid;position:fixed;inset:0}.transition-cell{background:var(--accent)}.flip-card{box-sizing:border-box;z-index:10;perspective:1000px;border:4px solid #0000;border-radius:20px;grid-area:image;place-self:stretch end;width:70%;margin:20px 20px 0}.flip-card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s;position:relative}.flip-card-inner.flipped{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{backface-visibility:hidden;border:4px solid var(--cream);box-sizing:border-box;border-radius:20px;width:100%;height:100%;position:absolute;top:0;left:0}.flip-card-front{background-image:url(https://static.wikia.nocookie.net/jjba/images/f/f0/Diego%27s-World.png/revision/latest?cb=20170302064222);background-size:cover}.flip-card-back{border:4px solid var(--accent);background:#f9f3eb;justify-content:center;align-items:center;padding:20px;display:flex;transform:rotateY(180deg)}h1{color:red;margin:0;font-family:matemasie,sans-serif}.flip-header:after{content:"";background:var(--accent);border-radius:2px;width:90%;height:2px;margin-top:18px;display:block}li{max-width:100%;margin:0 0 10px 20px;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;list-style:none}li a{color:red;font-size:1.2rem;text-decoration:underline}li p{color:#000;margin:5px;font-size:1.1rem}li div{color:red;font-size:1.2rem}li a:hover{color:var(--cream);text-decoration:none}.flip-card-hint{color:var(--cream);text-transform:uppercase;letter-spacing:.5px;background:#54545495;border-radius:999px;padding:15px;font-family:metamasie,sans-serif;font-size:13px;font-weight:550;position:absolute;top:16px;left:16px}.matemasie-regular{font-family:Matemasie,sans-serif;font-style:normal;font-weight:400}.matemasie-bold{font-family:Matemasie,sans-serif;font-style:normal;font-weight:700}.grid-overlay{z-index:-10;grid-template-columns:repeat(auto-fill,50px);grid-auto-rows:50px;width:100vw;height:100vh;display:grid;position:fixed;top:0;left:0}.grid-cell{background-color:#0000;border:1px solid #0000000d;width:50px;height:50px;transition:background-color .2s}.grid-cell.active{background-color:#ff2b2b4d}.corner{grid-template-columns:repeat(3,80px);gap:0;display:grid;position:absolute}.corner div{z-index:1;background:#ff2b2b;width:80px;height:80px}.blocks{z-index:1;flex-direction:row;display:flex;position:absolute}.bottom-left{align-items:flex-end;bottom:0;left:0}.blocks div:first-child{background:#ff2b2b;width:80px;height:400px}.blocks div:nth-child(2){background:#ff2b2b;width:80px;height:320px}.blocks div:nth-child(3){background:#ff2b2b;width:80px;height:240px}.blocks div:nth-child(4){background:#ff2b2b;width:80px;height:160px}.blocks div:nth-child(5){background:#ff2b2b;width:80px;height:80px}.top-right{top:0;right:0}.top-right div:nth-child(4),.top-right div:nth-child(8),.top-right div:nth-child(7){opacity:0}.content-container{grid-template:"header header""image about-me"1fr"image projects"1fr/50% 50%;gap:20px;width:min(70vw,1200px);max-height:90vh;margin:auto;padding:20px;display:grid}.header{z-index:1;border-radius:40px;flex-direction:column;grid-area:header;align-items:center;width:100%;height:auto;margin:auto;padding:20px 0;font-size:clamp(1.5em,5vw,3em);display:flex;position:relative}.header svg{z-index:10;width:80%;margin:auto auto 2vh;display:flex}.header-corner-left{z-index:1;background:var(--cream);flex-direction:row-reverse;width:6vw;height:6vw;margin-top:5%;display:flex;position:absolute;top:0;left:0}.header-corner-left:after{content:"";background:#fff;align-self:end;width:3vw;height:3vw;position:absolute}.header-corner-right{z-index:-1;background:var(--cream);flex-direction:row;width:9vw;height:9vw;display:flex;position:absolute;bottom:0;right:0}.header-corner-right:after{content:"";background:#fff;align-self:flex-start;width:3vw;height:6vw;position:absolute}.header-corner-right:before{content:"";background:#fff;align-self:flex-start;width:6vw;height:3vw;position:absolute}.about-me{border:4px solid var(--accent);box-sizing:border-box;background:#e8cfb342;border-radius:20px;grid-area:about-me;place-self:stretch start;width:70%;margin:20px 20px 0}.about-me h1{color:var(--accent);margin:20px;font-family:Matemasie,sans-serif}.about-me h1:after{content:"";background:var(--accent);border-radius:2px;width:90%;height:2px;margin-top:18px;display:block}.about-me p{margin:20px;font-family:Montserrat,sans-serif;font-size:1rem;line-height:1.3}.projects{border:4px solid var(--accent);box-sizing:border-box;background:#e8cfb342;border-radius:20px;grid-area:projects;justify-content:center;place-self:stretch start;align-items:center;width:70%;margin:20px 20px 0;text-decoration:none;display:flex}.projects h1{color:var(--accent);text-align:center;-webkit-user-select:none;user-select:none;margin:auto;font-family:Matemasie,sans-serif}@media (width<=1024px){.content-container{grid-template-columns:1fr;grid-template-areas:"header""about-me""image""projects";width:90vw}.header{width:100%;height:auto;padding:20px 0;font-size:2em}.image{justify-self:center;width:100%;height:300px}.about-me,.projects{justify-self:center;width:100%}}@media (width<=768px){.content-container{gap:15px;width:95vw;padding:15px}.header{font-size:1.5em}.header svg{margin-bottom:1vh}.image{height:250px}.about-me h1{margin:15px;font-size:1.5em}.about-me p{margin:15px;font-size:.9rem}.header-corner-left,.header-corner-right{display:none}}@media (width<=480px){.content-container{gap:10px;width:100vw;padding:10px}.header{font-size:1.2em}.header svg{width:80%}.image{height:200px}.about-me h1,.projects h1{margin:10px;font-size:1.2em}.about-me p{margin:10px;font-size:.85rem}.corner,.blocks{display:none}}