@import"https://fonts.googleapis.com/css2?family=Audiowide&family=Marck+Script&family=Montserrat:wght@600&family=Nanum+Pen+Script&family=Varela+Round&display=swap";.side-nav{position:fixed;z-index:1000;left:-200px;width:250px;height:100vh;background-color:var(--secondary);transition:.3s;overflow:hidden}.side-nav:hover{left:0px;transition:.3s;width:200px}.side-nav div{height:50px}.side-nav ul{position:relative;height:calc(100vh - 100px);display:flex;flex-direction:column;justify-content:center;transition:.3s}.side-nav ul li{margin-bottom:.5rem}.side-nav ul li:last-child{margin-bottom:0rem}.side-nav ul button{all:unset;width:200px;text-align:center;padding:.75rem 0rem;background-color:var(--secondary);transition:.3s}.side-nav ul button:hover{background-color:#4c0506;transition:.3s}.side-nav ul li .active{background-color:var(--quaternary);transition:.3s}.top{display:flex}.top img{width:150px;height:150px;margin:0 25px}.nav-icon{position:relative;transition:.3s;background-color:var(--secondary);font-size:2rem;padding:4px;height:40px;width:40px;border-radius:5px;margin:5px}.nav-icon:hover{transition:.3s;background-color:var(--quaternary)}.nav-show{position:relative;z-index:1001;margin-left:0}.nav-drop{display:flex;flex-direction:row;justify-content:space-between;margin-left:5px;overflow:hidden}.nav-drop:hover .nav-hide{left:0px;transition:.3s}.nav-hide{left:-150px;transition:.3s}.contact-bg{background-color:#00000050;position:fixed;z-index:2000;width:100vw;height:100vh;left:0}.contact-container{position:fixed;left:50%;top:50%;margin-top:-258px;margin-left:-250px;z-index:3000;background-color:var(--secondary);min-width:500px;border-radius:1rem}.contact-form{display:flex;flex-direction:column;justify-content:flex-start;padding:1.75rem}.contact-form label{font-size:1.15rem}.contact-form input,.contact-form textarea{color:var(--primary);padding:.25rem;font-size:1rem;margin:.5rem 2rem;border:none;text-align:left;display:block;border-radius:.25rem}.contact-form input[id*=message],.contact-form textarea[id*=message]{height:200px}.contact-form button[type*=submit]{position:relative;background-color:var(--quaternary);border-radius:.4rem;width:75px;display:inline-block;padding:.5rem;text-align:center;font-size:1.15rem;transition:.3s;margin-top:.5rem}.contact-form button[type*=submit]:hover{background-color:var(--tertiary);transition:.3s}.flexx{display:flex;flex-direction:row;justify-content:space-evenly}.flexy{display:flex;flex-direction:column;justify-content:space-evenly;height:100vh}.about-tabs{width:400px}.about-tabs button{text-align:center;background-color:var(--secondary);font-size:1.75rem;color:#949494;width:100%;padding:.5rem;border-radius:10px 10px 0 0}.about-tabs button:hover span{color:#949494}@media screen and (min-width: 768px){.about-tabs button[id*=selfie]{display:none}}@media screen and (max-width: 768px){.flexy .picture{display:none}}.about-tabs .active{background-color:var(--quaternary);color:var(--text-primary)}.about-tabs .active:hover span{color:var(--text-primary)}.about-text{background-color:var(--quaternary);height:500px;border-radius:0 0 10px 10px;padding:1rem;font-size:1.125rem;max-width:400px}.about-text-icons{background-color:var(--text-primary);width:300px;height:70px;display:flex;flex-direction:row;justify-content:space-evenly;border-radius:.375rem;margin-bottom:.5rem}.about-text-icons button{margin:10px 0;height:50px}.about-text-icons img{height:50px}.picture{width:300px}.pic-tab{width:100%}.skill-grid{display:grid;grid-template-columns:calc((100% - 32px) / 3) calc((100% - 32px) / 3) calc((100% - 32px) / 3);grid-template-rows:auto auto auto;gap:16px}.skill-grid button{max-width:100%;aspect-ratio:1/1;background-color:var(--text-primary);display:flex;justify-content:flex-end;flex-direction:column;border-radius:.25rem;overflow:hidden}.skill-grid button img{z-index:5;position:absolute;width:112px}.skill-grid button div{display:none;text-align:center;margin-bottom:10px;z-index:10;position:relative;color:var(--primary);font-weight:900}.project{background-image:url("data:image/svg+xml,%3Csvg id='visual' viewBox='0 0 900 600' width='900' height='600' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'%3E%3Crect x='0' y='0' width='900' height='600' fill='%230b090a'%3E%3C/rect%3E%3Cpath d='M0 357L90 386L180 330L270 316L360 318L450 341L540 385L630 314L720 390L810 335L900 365L900 0L810 0L720 0L630 0L540 0L450 0L360 0L270 0L180 0L90 0L0 0Z' fill='%230b090a'%3E%3C/path%3E%3Cpath d='M0 339L90 339L180 383L270 369L360 319L450 276L540 359L630 381L720 276L810 300L900 369L900 0L810 0L720 0L630 0L540 0L450 0L360 0L270 0L180 0L90 0L0 0Z' fill='%230a0809'%3E%3C/path%3E%3Cpath d='M0 280L90 318L180 311L270 329L360 283L450 300L540 248L630 267L720 248L810 288L900 291L900 0L810 0L720 0L630 0L540 0L450 0L360 0L270 0L180 0L90 0L0 0Z' fill='%23080607'%3E%3C/path%3E%3Cpath d='M0 250L90 216L180 238L270 223L360 272L450 215L540 193L630 247L720 269L810 279L900 243L900 0L810 0L720 0L630 0L540 0L450 0L360 0L270 0L180 0L90 0L0 0Z' fill='%23070506'%3E%3C/path%3E%3Cpath d='M0 166L90 207L180 174L270 207L360 170L450 216L540 164L630 169L720 202L810 164L900 162L900 0L810 0L720 0L630 0L540 0L450 0L360 0L270 0L180 0L90 0L0 0Z' fill='%23050304'%3E%3C/path%3E%3Cpath d='M0 184L90 115L180 118L270 170L360 177L450 179L540 146L630 166L720 142L810 135L900 153L900 0L810 0L720 0L630 0L540 0L450 0L360 0L270 0L180 0L90 0L0 0Z' fill='%23040203'%3E%3C/path%3E%3Cpath d='M0 97L90 113L180 94L270 105L360 131L450 113L540 84L630 97L720 89L810 95L900 120L900 0L810 0L720 0L630 0L540 0L450 0L360 0L270 0L180 0L90 0L0 0Z' fill='%23030102'%3E%3C/path%3E%3Cpath d='M0 40L90 73L180 75L270 56L360 43L450 53L540 63L630 55L720 43L810 65L900 61L900 0L810 0L720 0L630 0L540 0L450 0L360 0L270 0L180 0L90 0L0 0Z' fill='%23000000'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-size:cover;padding-top:2%;padding-bottom:2%}.proj-grid{position:relative;display:grid;grid-template-columns:auto auto auto auto;grid-template-rows:auto auto auto auto;justify-content:center;scale:1}.proj-grid:has(button:hover) button:not(:hover){scale:.8;opacity:.7}.proj-grid button{width:150px;aspect-ratio:1/1;background:red;transition:scale .3s,opacity .3s}.proj-grid button:hover{scale:1.3;z-index:10}.proj-grid button div{display:none}.proj-grid button:hover div{text-align:center;width:100%;display:block}.header{background-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,0) 40%),var(--header-img);background-size:cover;background-repeat:no-repeat;display:flex;flex-direction:column;justify-content:center;gap:50px}.anthony{font-family:var(--special)!important;font-size:4.5rem!important;margin-left:.3rem}.aspiring{font-family:var(--audio)!important}.header-cont span{position:relative;font-size:3rem;line-height:2.5rem;display:inline-block;margin-right:.4rem}.contact-butt{background-color:var(--secondary);font-size:2rem;padding:.75rem 1.75rem;border-radius:10px;transition:.3s}.contact-butt:hover{background-color:var(--quaternary)}:root{--header: "Montserrat", sans-serif;--special: "Marck Script", cursive;--text: "Varela Round", sans-serif;--audio: "Audiowide", cursive;--script: "Nanum Pen Script", cursive;--primary: #0b090a;--secondary: #161a1d;--tertiary: #ba181b;--quaternary: #660708;--text-primary: #f5f3f4;--text-secondary: #ec1a1a;--header-img: url(/assets/nebula.0af5d770.jpg)}@media (prefers-color-scheme: light){:root{--primary: #0b090a;--secondary: #161a1d;--tertiary: #ba181b;--quaternary: #660708;--text-primary: #0b090a;--text-secondary: #ec1a1a;--header-img: url(/assets/nebula.0af5d770.jpg)}}*{padding:0;margin:0;box-sizing:border-box;color:var(--text-primary);font-family:var(--text)}html{scroll-behavior:smooth}button{all:unset;cursor:pointer}::-webkit-scrollbar{width:.6rem}::-webkit-scrollbar-track{background:none}::-webkit-scrollbar-thumb{background:#323232;border-radius:.2rem}::-webkit-scrollbar-thumb:hover{background:#292929}body{min-height:100vh;background-color:var(--primary)}body section{position:relative;max-height:100vh;min-height:100vh;padding:0px 5% 0px calc(50px + 5%)}#body{display:flex;flex-direction:column;justify-content:flex-start}.header-text{font-size:2.5rem;font-family:var(--header);transition:.3s;width:max-content;color:var(--text-primary)}.header-text span{font-family:var(--header);color:var(--text-secondary);transition:.3s}.header-text:hover{color:var(--text-secondary);transition:.3s}.header-text:hover span{color:var(--text-primary);transition:.3s}