:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}header{height:100%;width:160px;position:fixed;top:0;left:0;background-color:#2c2f33}.sideBarLogo{height:80px;width:80px;margin-left:0}nav{display:flex;flex-direction:column;margin-top:225px}nav>a{margin-top:40px;color:#00a2ff}body{background:linear-gradient(to bottom,#0051ff,#00a2ff,#00d9ff)}.homeLogo{position:relative;width:40%;top:-500px;opacity:0%;animation-name:slideIn;animation-duration:2s;animation-fill-mode:forwards;animation-timing-function:ease-in-out}.Intro{position:absolute;top:450px;right:62rem;opacity:0%;animation-name:slideInText;animation-duration:4s;animation-fill-mode:forwards;animation-timing-function:ease-in-out;font-size:1.5rem;max-width:500px}@keyframes slideIn{to{opacity:100%;transform:translateY(300px)}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}p{width:50%;position:relative;left:-15rem;top:5rem}img{width:10%;height:10%}.logos{position:relative;left:40rem;bottom:10rem}.layer1{opacity:0%;margin-bottom:2rem;display:flex;position:relative;justify-content:center;align-items:center;animation-name:slideInText;animation-duration:2s;animation-fill-mode:forwards;animation-timing-function:ease-in-out}.layer2{opacity:0%;margin-bottom:2rem;display:flex;position:relative;justify-content:center;align-items:center;animation-name:slideInText;animation-duration:3s;animation-fill-mode:forwards;animation-timing-function:ease-in-out}.layer3{opacity:0%;margin-bottom:2rem;display:flex;position:relative;justify-content:center;align-items:center;animation-name:slideInText;animation-duration:4s;animation-fill-mode:forwards;animation-timing-function:ease-in-out}.cssLogo{width:6%;height:6%}.java{width:6%;height:6%;margin-right:1rem}.aboutText{opacity:0%;animation-name:slideInText;animation-duration:2s;animation-fill-mode:forwards;position:relative;top:15rem}@keyframes slideInText{to{opacity:100%}}.projects{display:flex;flex-direction:row;flex-wrap:wrap;position:relative;left:-60rem;bottom:20rem}.external-link{width:20%;height:25%}button{opacity:0%;position:relative;bottom:5rem;font-size:1rem;width:20rem;height:5rem;display:flex;align-items:center;border-radius:2rem;justify-content:center;animation-name:project_slideIn;animation-duration:2s;animation-fill-mode:forwards;gap:15px}button:hover{cursor:pointer}@keyframes project_slideIn{to{opacity:100%;transform:translateY(5rem)}}.contact{opacity:0%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;animation-name:slideInContact;animation-duration:2s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}h1{position:relative;font-size:2rem}p{position:relative;top:-1rem;width:50%;left:0rem}button{width:10rem}.form-group{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}.text{width:30rem;height:2rem;margin:.5rem;border:1px solid #ccc;border-radius:.5rem;padding:.5rem;font-size:1rem}.textbox{width:30rem;height:10rem;margin:.5rem;border:1px solid #ccc;border-radius:.5rem;padding:.5rem}input::placeholder{font-size:1rem}textarea::placeholder{font-size:1.2rem}@keyframes slideInContact{to{opacity:100%}}