:root{--primary-color: #8d99ae;--secondary-color: #b2bcc9;--terciary-color: #9caab8;--foreground-color: #edf2f4;--background-color: #2b2d42;--shadow: 0 4px rgba(0, 0, 0, .1);--font: "Nunito Sans", sans-serif;font-family:var(--font)}html,body{overflow:hidden;background-color:#3f445f}body{margin:0;position:relative}p{font-family:var(--font)}a{text-decoration:none}#content{margin:0;display:flex;justify-content:center}@media screen and (max-width:768px){html,body{overflow-y:auto;overflow-x:hidden;margin-bottom:1rem}body{position:relative}}nav{display:flex;align-items:center;background-color:var(--primary-color);padding:10px 20px;position:relative;height:2rem;box-shadow:var(--shadow)}.nav-buttons{position:absolute;left:50%;transform:translate(-50%)}.nav-buttons button{display:inline-flex;align-items:end;justify-content:center;width:3rem;height:3rem;margin-left:.5rem;margin-right:.5rem;background-color:transparent;border:none;cursor:pointer}.nav-buttons button.active{background-color:#0000001a;border-radius:0}.nav-buttons button:hover{background-color:#ffffff1a}.nav-buttons button img{margin:0;width:100%;height:100%}@media screen and (max-width:600px){.date-time{display:none}.nav-buttons{position:static;transform:none;margin:0 auto}}.date-time{color:var(--foreground-color);margin-left:auto;text-align:right;display:flex;flex-direction:column;font-family:serif;padding-left:1rem;border-left:2px solid var(--foreground-color)}.date-time p{margin:0;font-size:.75rem}.background{z-index:-1000;overflow:hidden}.hero{position:absolute;top:50vh;left:50vw;transform:translate(-50%,-150%);color:var(--primary-color);padding:10px;text-align:center;transition:opacity 2s ease-in-out,transform 2s ease-in-out;opacity:50%;width:100%}.hero p{font-family:monospace;font-size:1.1rem;opacity:75%}.hero:hover{transform:translate(-50%,-150%) scale(1.05);opacity:100%}.shootingStars{position:absolute;top:0;left:0;width:100%;height:100vh;background:linear-gradient(#1a1b2a,#414465);background-position-x:center;background-size:cover;animation:animateBg 50s linear infinite;overflow:hidden}@keyframes animateBg{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.shootingStars span{position:absolute;top:50%;left:50%;width:4px;height:4px;background:#edf2f4;border-radius:50%;box-shadow:0 0 0 4px #ffffff1a,0 0 0 8px #ffffff1a,0 0 20px #fff;animation:animate 9s linear infinite}.shootingStars span:before{content:"";position:absolute;top:50%;transform:translateY(-50%);width:300px;height:1px;background:linear-gradient(90deg,#8d99ae,transparent)}@keyframes animate{0%{transform:rotate(315deg) translate(0);opacity:1}70%{opacity:1}to{transform:rotate(315deg) translate(-1500px);opacity:0}}.shootingStars span:nth-child(1){top:0;right:0;left:initial;animation-delay:0;animation-duration:3s}.shootingStars span:nth-child(2){top:0;right:80px;left:initial;animation-delay:.6s;animation-duration:9s}.shootingStars span:nth-child(3){top:80px;right:0;left:initial;animation-delay:1.2s;animation-duration:6s}.shootingStars span:nth-child(4){top:0;right:180px;left:initial;animation-delay:1.8s;animation-duration:4.5s}.shootingStars span:nth-child(5){top:0;right:400px;left:initial;animation-delay:2.4s;animation-duration:7.5s}.shootingStars span:nth-child(6){top:0;right:600px;left:initial;animation-delay:3s;animation-duration:9s}.shootingStars span:nth-child(7){top:300px;right:0;left:initial;animation-delay:3s;animation-duration:5.25s}.shootingStars span:nth-child(8){top:0;right:700px;left:initial;animation-delay:4.2s;animation-duration:3.75s}.shootingStars span:nth-child(9){top:0;right:1000px;left:initial;animation-delay:2.25s;animation-duration:6.75s}.shootingStars span:nth-child(10){top:0;right:1000px;left:initial;animation-delay:8.25s;animation-duration:6.75s}@media screen and (max-width:600px){.hero h1{font-size:1.4rem}.hero p{font-size:.9rem}}.footer{position:absolute;top:95vh;left:50vw;transform:translate(-50%,-100%);display:flex;flex-direction:column;gap:.5rem;align-items:center;justify-content:center;z-index:0}.footer *{text-align:center;margin:0;color:var(--primary-color);opacity:50%}.footer a:hover{text-decoration:underline}.homePage{height:100vh}header{background-color:var(--primary-color);display:flex;align-items:center;justify-content:space-between;height:2.5rem;padding-left:1rem;padding-right:1rem;border-radius:1rem 1rem 0 0}header button{background-color:var(--background-color);height:1rem;width:1rem;border-radius:50%;border:none;cursor:pointer;transition:background-color .2s}header button:hover{background-color:var(--secondary-color);transition:background-color .2s}header p{font-family:monospace;font-size:1.25rem}.windowContainer{height:100vh;width:100vw;display:flex;justify-content:center}.window{box-shadow:var(--shadow);width:60rem;height:45rem;margin:1.5rem;border-radius:1.35rem;animation:scaleUp .5s ease-in-out forwards;transform-origin:50% 0;z-index:2;overflow-y:scroll;padding-bottom:1rem}.window-light{background-color:var(--foreground-color)}.window-dark{border:.25rem solid var(--primary-color);background-color:var(--background-color);opacity:75%}.window.scale-down-exit{animation:scaleDown .25s ease-in-out forwards}@keyframes scaleUp{0%{transform:scale(0)}60%{transform:scale(1.05)}80%{transform:scale(.95)}to{transform:scale(1)}}@keyframes scaleDown{0%{transform:scale(1)}60%{transform:scale(1.05)}to{transform:scale(0)}}@media screen and (max-width:768px){.window{width:90vw;height:auto}}.profileItem{display:flex;align-items:center;gap:.5rem;border-bottom:2px solid var(--secondary-color)}.profileTitle{font-family:monospace;font-size:1.1rem;color:var(--foreground-color)}.profileTitle img{height:2rem;width:auto;filter:saturate(0%) brightness(300%)}.profileContent{color:var(--foreground-color);opacity:50%;flex-grow:1;text-align:right}.profileImg{width:256px;height:256px;outline:4px dotted var(--primary-color);display:flex;align-items:center;justify-content:center}.profileImg img{width:90%;height:90%;outline:4px solid var(--primary-color)}.profileWindow{display:flex;flex-direction:column;gap:1rem}.profileTop{margin:1rem;margin-left:2.5%;margin-right:2.5%;display:flex;align-items:center;gap:2rem}.profileBottom{margin-left:2.5%;margin-right:2.5%;display:flex;gap:2rem}.profileBox{background-color:var(--primary-color);border-radius:1rem;min-width:240px;margin:0 auto}.profileInfo{flex-grow:1;padding:1.5rem 2.5rem;margin-top:0;padding-top:0}.profileSocials{padding:0rem 1rem 1rem 0rem;display:flex}.profileSocials .profileItem{border-top:2px solid transparent;border-left:2px solid transparent;border-right:2px solid transparent;transition:all .2s ease-in-out}.profileSocials .profileItem:hover{border:2px dashed var(--secondary-color);border-radius:1rem}.profileSocials a{text-decoration:none}.profileBio{padding:1rem 2.5rem;display:flex;flex-direction:column;gap:.5rem}.profileBio h1{color:var(--foreground-color);opacity:50%;margin:0}.profileBio p{color:var(--foreground-color);font-size:1.45rem;margin:0}@media screen and (max-width:768px){.profileTop,.profileBottom{flex-direction:column;align-items:center}.profileBox{min-width:200px}.profileBio{margin-left:1.5rem;margin-right:1.5rem;margin-bottom:2rem}.profileBio p{text-align:center}.profileSocials{display:flex;align-items:center;justify-content:center;padding:0}.profileSocials .profileItem .profileContent{display:none}.profileSocials ul{display:flex;flex-direction:row;padding-left:0}}.folder{display:flex;flex-direction:column;align-items:center;transition:all .2s ease-in-out}.folder p{font-weight:700;text-align:center;font-size:2rem;color:var(--foreground-color);width:75%}.folder:hover{opacity:75%}.gamesBox{background:var(--primary-color);border-radius:1rem;padding:.5rem;margin:1rem}.gamesHeader p{color:var(--foreground-color);font-family:monospace;font-size:1.35rem;padding-left:1rem;opacity:75%}.gamesContent{padding-top:2rem;height:70%;display:grid;justify-items:center;grid-template-columns:auto auto auto}@media screen and (max-width:768px){.gamesContent{grid-template-columns:auto;height:81%}}.projectsWindow *{font-family:monospace;color:var(--primary-color);margin:.5rem}.projectsWindow p{font-size:1rem}.terminalTxt,.projectsWindow h2{color:var(--foreground-color)}.projectHighlight{display:flex;gap:1.25rem;border:.25rem dotted var(--primary-color);margin:1rem 3rem 1.5rem}.projectDescription{text-align:right}.projectDescription p{text-align:left}.projectDescription a{filter:none;transition:all .2s ease-in-out}.projectDescription a:hover{filter:brightness(150%)}@media screen and (max-width:768px){.projectHighlight{gap:0}.projectsWindow{height:150vh}}
