@import url('https://rsms.me/inter/inter-ui.css');html{font-family:'Inter UI',sans-serif}@supports(font-variation-settings:normal){html{font-family:'Inter UI var alt',sans-serif}}*{box-sizing:border-box}*:focus{outline:0}body,html{position:relative;height:100%;margin:0;color:#fff;scroll-behavior:smooth}a{color:#fff;text-decoration:none}.logo{width:65px;height:65px;border:2px solid;border-left:0;padding:5px;vertical-align:middle;line-height:1;padding:20px 5px 0 0;font-weight:600;letter-spacing:-1px;z-index:1}nav#main-nav{position:fixed;width:100%;height:65px;top:30px;padding:0 60px;display:flex;justify-content:space-between;z-index:12}nav#main-nav ul{position:fixed;background:rgba(10,10,10,0.95);width:100%;height:100%;top:0;left:0;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:10}nav#main-nav ul li{display:block}nav#main-nav ul li a{font-weight:800;-webkit-text-stroke:1px rgba(255,255,255,0.5);color:transparent;font-size:40px;margin:0 10px;padding:12px 5px;display:inline-block;line-height:1}nav#main-nav ul li a:hover{color:#fff}nav#main-nav ul li a.active{color:#fff;font-size:60px;opacity:1}.github{font-size:2rem;padding:0 10px;margin:0 5px;display:inline-block;position:fixed;bottom:30px;left:60px;z-index:11}details{position:relative}details summary{list-style:none;position:relative;z-index:20;cursor:pointer;height:35px}details summary::-webkit-details-marker{display:none}details summary .open{display:none}details[open] summary .open{display:block}details summary .open .bar:first-of-type{transform:rotate(-45deg);width:30px;bottom:-11px;position:relative}details summary .open .bar:nth-child(2){transform:rotate(45deg);width:30px;bottom:-2px;position:relative}details[open] summary .closed{display:none}details summary:hover .closed .bar:first-of-type{width:35px}details summary:hover .closed .bar:nth-of-type(2){width:30px}details summary:hover .closed .bar:nth-of-type(3){width:20px}.bar{height:1px;background:#fff;display:block;margin:8px;-moz-transition:all .4s ease;-o-transition:all .4s ease;-webkit-transition:all .4s ease;transition:all .4s ease}.bar:first-of-type{width:30px}.bar:nth-of-type(2){width:25px}.bar:nth-of-type(3){width:15px}.line{width:1px;background:rgba(255,255,255,0.05);height:100%;position:fixed}.line:first-of-type{margin-left:20%}.line:nth-of-type(2){margin-left:40%}.line:nth-of-type(3){margin-left:60%}.line:nth-of-type(4){margin-left:80%}section{display:none}section.active{display:block}section div.box{min-height:100vh;display:flex;justify-content:flex-end;align-items:flex-start;flex-direction:column;padding:10vh 20%;color:#fff}section h2{font-size:120px;-webkit-text-stroke:2px white;color:transparent;letter-spacing:-1px;font-weight:800;margin:30px 0;line-height:.8}section h3{font-weight:300;letter-spacing:6px;font-size:20px;line-height:2}section h4{font-size:80px;font-weight:800;letter-spacing:-5px;margin:20px 0;line-height:.8}section p{font-weight:300;line-height:2.2;text-align:justify}section#jellyfish div.box:first-of-type{background:url("../img/jellyfish/1.jpeg") center;background-size:cover}section#jellyfish div.box:nth-of-type(2){background:url("../img/jellyfish/2.jpeg") rgba(10,10,10,0.2) center;background-size:cover;background-blend-mode:soft-light}section#jellyfish div.box:nth-of-type(3){background:url("../img/jellyfish/3.jpeg") center;background-size:cover}section#jellyfish div.box:nth-of-type(4){background:url("../img/jellyfish/4.jpeg") center;background-size:cover}section#neon div.box:first-of-type{background:url("../img/neon/1.jpeg") center;background-size:cover}section#neon div.box:nth-of-type(2){background:url("../img/neon/2.jpeg") center;background-size:cover}section#neon div.box:nth-of-type(3){background:url("../img/neon/3.jpeg") center;background-size:cover}section#neon div.box:nth-of-type(4){background:url("../img/neon/4.jpeg") rgba(10,10,10,0.4) center;background-size:cover;background-blend-mode:soft-light}section#skateboarding div.box:first-of-type{background:url("../img/skateboarding/1.jpeg") center;background-size:cover}section#skateboarding div.box:nth-of-type(2){background:url("../img/skateboarding/2.jpeg") rgba(10,10,10,0.3) center;background-size:cover;background-blend-mode:soft-light}section#skateboarding div.box:nth-of-type(3){background:url("../img/skateboarding/3.jpeg") center;background-size:cover}section#skateboarding div.box:nth-of-type(4){background:url("../img/skateboarding/4.jpeg") center;background-size:cover}section#road-lights div.box:first-of-type{background:url("../img/road-lights/1.jpeg") center;background-size:cover}section#road-lights div.box:nth-of-type(2){background:url("../img/road-lights/2.jpeg") rgba(10,10,10,0.4) center;background-size:cover;background-blend-mode:soft-light}section#road-lights div.box:nth-of-type(3){background:url("../img/road-lights/3.jpeg") rgba(10,10,10,0.4) center;background-size:cover;background-blend-mode:soft-light}section#road-lights div.box:nth-of-type(4){background:url("../img/road-lights/4.jpeg") rgba(10,10,10,0.2) center;background-size:cover;background-blend-mode:soft-light}section#umbrella div.box:first-of-type{background:url("../img/umbrella/1.jpeg") rgba(10,10,10,0.4) center;background-size:cover;background-blend-mode:soft-light}section#umbrella div.box:nth-of-type(2){background:url("../img/umbrella/2.jpeg") rgba(10,10,10,0.5) center;background-size:cover;background-blend-mode:soft-light}section#umbrella div.box:nth-of-type(3){background:url("../img/umbrella/3.jpeg") center;background-size:cover}section#umbrella div.box:nth-of-type(4){background:url("../img/umbrella/4.jpeg") center;background-size:cover}footer{position:fixed;font-size:11px;z-index:0;top:0;bottom:0;transform:rotate(-90deg);width:100vh;text-align:center;left:0;padding:85px;color:#aaa}footer a{font-weight:600;color:#aaa}footer a:hover{border-bottom:1px solid rgba(255,255,255,0.2)}@media(max-width:768px){nav#main-nav{padding:0 10px;top:15px}nav#main-nav ul li a{font-size:25px}nav#main-nav ul li a.active{font-size:35px}section div.box{padding:55px 10%}section h2{font-size:55px;-webkit-text-stroke:1px white}section h3{line-height:1.5;font-size:14px;letter-spacing:1px;word-spacing:0}section h4{font-size:40px;letter-spacing:-2px}section p{line-height:1.5;font-size:12.5px}.line:first-of-type{margin-left:10%}.line:nth-of-type(2){margin-left:35%}.line:nth-of-type(3){margin-left:65%}.line:nth-of-type(4){margin-left:90%}footer{padding:3.25% 12px;font-size:9px}.github{bottom:10px;left:10px;padding:0}details{padding:15px 0}}