:root{--background-color: white;--background-secondary-color: #bdc3c7;--border-color: #95a5a6;--text-color: black;--highlight1-color: #45f670;--highlight2-color: #549598;--highlight3-color: #708a74}body{overflow:hidden;color:var(--text-color);border-color:var(--text-color);background-size:400% 400%;animation:gradient 15s ease infinite;background-color:var(--background-secondary-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.bodyContainer{display:flex;width:100%}.infoColumn{width:50vh;height:93vh;padding:3vh 2.5vh 3vh 8vh;display:flex;flex-direction:column}.pageColumn{flex:1;height:93vh;padding:3vh 8vh 3vh 2.5vh;display:flex;flex-direction:column}.info-block{background-color:var(--background-color);height:500px;flex:1;text-align:center;border-radius:20px;padding:20px;border:.3vh solid var(--text-color)}.socialsWrapper{margin-top:6vh;display:flex;flex-direction:row;justify-content:center;gap:1vh}.socialsButton{overflow:hidden;flex:1;height:8vh;display:flex;align-items:center;justify-content:center;padding-bottom:.15vh;gap:.6vh;transition:background-color .2s}.socialsButton:hover{background-color:var(--highlight1-color)}.pageBlock{background-color:var(--background-color);height:900px;flex:1;text-align:left;overflow-y:scroll;clip-path:border-box;clip-path:scrollbar-thumb;border-radius:20px;padding:20px;border:.3vh solid var(--text-color)}.pageBlock::-webkit-scrollbar{width:1.5vh;background:var(--text-color)}.pageBlock::-webkit-scrollbar-thumb{background:var(--background-color);border-radius:1vh;border:.3vh solid var(--text-color)}.navBar{margin-top:2vh;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.5vh;background-color:var(--background-color);border-radius:20px;animation-delay:.5s;border:.3vh solid var(--text-color)}.navButton{background-color:var(--background-color);border-radius:20px;margin:.5vh;overflow:hidden;width:5vh;height:5vh;display:flex;align-items:center;justify-content:center;padding-bottom:.15vh;text-align:center;border:.3vh solid var(--text-color);gap:.6vh;cursor:pointer;transition:width .3s,background-color .2s,filter .2s,justify-content .2s}.navIcon{width:3.5vh;height:3.5vh}.navButton.active{filter:invert(100%);justify-content:left;width:25vh}.navButton.active:after{content:attr(name);font-weight:bolder}.navButton:hover{filter:invert(0%);background-color:var(--highlight1-color);justify-content:left;width:25vh}.navButton:hover:after{content:attr(name);font-weight:bolder}.navBar:has(.navButton:hover:not(.active)) .active{width:5vh;justify-content:center}.navBar:has(.navButton:hover:not(.active)) .active:after{content:none}.iridescence-container{z-index:-1;position:fixed;top:0;left:0;width:100%;height:100%}.animated-gradient-text{position:relative;margin:0 auto;display:flex;max-width:fit-content;flex-direction:row;align-items:center;justify-content:center;border-radius:1.25rem;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:box-shadow .5s ease-out;overflow:hidden;cursor:pointer}.gradient-overlay{position:absolute;inset:0;background-size:300% 100%;animation:gradient linear infinite;border-radius:inherit;z-index:0;pointer-events:none}.gradient-overlay:before{content:"";position:absolute;border-radius:inherit;width:calc(100% - 2px);height:calc(100% - 2px);left:50%;top:50%;transform:translate(-50%,-50%);background-color:#060010;z-index:-1}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.text-content{position:relative;z-index:2;background-size:300% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:gradient linear infinite}.typewriter{display:inline-block;width:0;overflow:hidden;border-right:.15em solid var(--background-color);white-space:nowrap;margin:0 auto;letter-spacing:.15em;content:"This text replaces the original.";animation-delay:2s;animation:typing 10s steps(20,end) infinite,blink-caret .5s step-end infinite}@keyframes typing{0%{width:0}10%{width:100%}85%{width:100%}90%{width:0px}}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:var(--background-secondary-color)}}.profileImage{width:40vh;height:40vh;border-radius:50%;margin:2vh;border:.3vh solid var(--text-color)}.contentWrapper h1{color:var(--text-color);font-size:7vh;font-weight:bolder;text-transform:uppercase}.contentWrapper span{color:var(--background-color);background-color:var(--highlight1-color);border-radius:20px;padding:.5vh 1vh;background:linear-gradient(-45deg,var(--highlight1-color),var(--highlight2-color),var(--highlight3-color));background-size:400% 400%;animation:gradient 15s ease infinite}.contentWrapper span img{width:15px;height:15px;padding-left:10px;filter:invert(100%)}.contentWrapper h1{border:0;border-bottom:.1vh;border-color:var(--border-color);border-style:solid;margin-top:0}.contentWrapper h2,.contentWrapper h3,.contentWrapper p,.contentWrapper ul{color:var(--text-color);margin-top:0}.contentWrapper .columnWrapper{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;border-left:.2vh solid var(--border-color);margin-right:5px}.contentWrapper .columnWrapper div{min-width:120px;max-width:50%;padding:0 2vh;flex:1;border-color:var(--border-color);border-style:solid;border:0;border-right:.2vh solid var(--border-color)}.contentWrapper .seperator{border:0;border-bottom:.1vh;border-color:var(--border-color);border-style:solid;margin-top:0;margin-bottom:2vh}.contentWrapper .button{padding:12px 20px;font-size:16px}.contentWrapper{opacity:0;transform:translateY(30px);animation:slideIn .6s ease-out forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.inputBox label{color:var(--text-color);font-size:small;display:block}.inputBoxWrapper{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;gap:5px}.inputBox input{flex:1;padding:10px;margin:5px 0;border:1px solid var(--border-color);border-radius:5px}.inputBox textarea{width:95%;height:40vh;padding:10px;margin:5px 0;border:1px solid var(--border-color);border-radius:5px}.button{background-color:var(--background-color);border-radius:20px;border:.3vh solid var(--text-color);cursor:pointer;text-align:center;box-shadow:0 4px 6px #00000014,0 2px 4px #0000000f;transition:all .25s ease}.button:hover{transform:translateY(-2px);box-shadow:0 8px 12px #0000001f,0 4px 6px #0000001a}.button:active{transform:translateY(1px);box-shadow:0 2px 4px #00000014}.projectContainer{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;width:100%}.projectWidget{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:16px;border:1px solid var(--border-color);border-radius:8px;background:var(--background-color);transition:transform .2s ease,box-shadow .2s ease}.projectWidget:hover{transform:translateY(-4px);box-shadow:0 4px 8px #0000001a}.projectWidget h2{color:var(--text-color);text-align:center;margin:12px 0 0}.projectWidget img{width:100px;height:auto;margin-bottom:8px;transition:transform .3s ease}.projectWidget:hover img{transform:scale(1.1)}@media screen and (max-width: 600px){body{overflow:auto}.bodyContainer{flex-direction:column}.infoColumn,.pageColumn{width:100%;padding:2vh 4vh}.pageBlock{overflow-y:auto;overflow-x:auto}.contentWrapper .columnWrapper{flex-direction:column;border:0}.contentWrapper .columnWrapper div{margin-bottom:15px;min-width:100%;border:0}}
