:root{--text-color: #ff3030}*{margin:0;padding:0;box-sizing:border-box}html{scroll-snap-type:mandatory;scroll-snap-type:y mandatory;width:100%;max-width:100vw}body{background:linear-gradient(to top,#ddd 2px,#ccc 2px);background-size:cover;background-size:100% 4px;width:100%;overflow-x:hidden;font-family:Roboto,sans-serif;font-family:Electrolize,sans-serif;font-weight:900}body::-webkit-scrollbar{max-width:10px;background:linear-gradient(to top,#ddd 2px,#ccc 2px)}body::-webkit-scrollbar-track{margin-top:1rem;background-color:transparent}body::-webkit-scrollbar-thumb{background-color:#000}@media screen{body{animation:scanlines infinite 1s linear}}@keyframes scanlines{0%{background-position:0 -10px}50%{background-position:0 0}to{background-position:0 10px}}canvas{width:100%;height:100vh;position:absolute;top:0;left:0}#fluid-sim{z-index:10000}section{width:100%;min-height:100vh;scroll-snap-align:start}#hero{font-family:Vina Sans,sans-serif;font-weight:100;font-style:normal;text-align:center;line-height:15vw;display:flex;flex-direction:column;justify-content:space-around}#hero #name{font-size:20vw;color:transparent;-webkit-text-stroke-width:1px;-webkit-text-stroke-color:var(--text-color)}#hero #role{font-size:20vw;color:var(--text-color)}.centre{margin:auto}#about{font-style:normal}#heading{display:block;font-size:10vw;font-family:Vina Sans,sans-serif}#desc{grid-column-start:1;grid-row-start:2;font-size:2rem;text-align:justify;padding:10rem}@keyframes scale-a-lil{0%{scale:.5}}h2{text-align:center;font-size:3rem;color:var(--text-color);margin-top:1rem}#skills ul{display:flex;flex-direction:row;flex-wrap:wrap;list-style-type:none}#skills li{margin:1rem;width:fit-content;background-color:#000;padding:.5rem 1rem;color:#fff;font-size:2rem;border-radius:0}#projects{display:block}#scrollable{overflow-x:scroll}#scrollable #wrapper{display:flex;flex-direction:row;width:min-content;margin-bottom:1rem}.project{display:block;background-color:transparent;max-width:90vw;height:70vh;border:1px solid black;margin:0rem 1rem;text-align:center;overflow:hidden}.project img{display:block;height:91%;background-color:transparent;margin:0rem auto}.project .title{height:5%;border-top:1px solid black;border-bottom:1px solid black}.project .tags{height:4%;display:flex;flex-direction:row;justify-content:space-around}.project .tag{flex-grow:1;border-right:1px solid black}.project .tag:last-of-type{border:0px}#scrollable::-webkit-scrollbar{max-width:1px}#scrollable::-webkit-scrollbar-track{margin-top:1rem;border:1px solid black}#scrollable::-webkit-scrollbar-thumb{background-color:#000}.timeline-wrapper{position:relative;width:max-content;margin:0;height:30rem;min-width:100vw}.timeline-wrapper .middle-line{position:absolute;width:100%;height:.5rem;top:50%;transform:translateY(-50%);background:#000}.box{width:30vw;position:relative;min-height:100%;height:100%;float:left;margin-left:1rem}.box .date{position:absolute;top:50%;width:4rem;height:4rem;border-radius:0;background:#000;color:#fff;border:2px solid #d9d9d9;left:50%;transform:translateY(-50%) translate(-50%)}.date p{text-align:center;margin-top:.5rem;margin-bottom:0}.box .box-content{background-color:transparent;width:100%;border:1px solid black;padding:1rem;height:30vh}.box-content p{margin:0;color:#555}.box-content .role{color:#000}.box-bottom .box-content{top:65%}footer{background-color:#000;color:#ccc;width:100%;height:100vh;padding:40px 20px;box-sizing:border-box;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;scroll-snap-align:start}.footer-content{max-width:1200px;width:100%}.footer-links{margin-top:20px}.footer-links a{color:#ccc;text-decoration:none;margin:0 15px}.footer-links a:hover{color:var(--text-color)}@media screen and (max-width: 768px){#heading{font-size:4rem}#about #desc{padding:1rem;font-size:1.5rem;text-align:center}#skills ul{justify-content:center;align-content:center;min-height:80vh}#skills li{margin:.15rem;width:fit-content;background-color:#000;padding:.5rem 1rem;color:#fff;font-size:1rem}#scrollable{min-height:80vh}.project{margin-top:0rem}.box{width:70vw}.box .box-content{height:23vh}}.ball{width:10px;height:10px;background-color:#000;border-radius:50%}