@import "https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Fuzzy+Bubbles:wght@400;700&family=Jolly+Lodger&family=Luckiest+Guy&display=swap";
.container{background-image:url(/portfoilio/public/images/homepagestarted.png);background-position:50%;background-size:cover;width:100vw;height:100vh;position:relative;overflow:hidden}.header-section{text-align:center;z-index:10;width:100%;position:absolute;top:10px;left:50%;transform:translate(-50%)}.title{-webkit-text-stroke:4px #b05e27;color:#faec00;letter-spacing:3px;opacity:0;margin:0;font-family:Cherry Bomb One,system-ui;font-size:160px;line-height:1;animation:1.5s ease-out forwards fadeIn,4s ease-in-out infinite float}.subtitle{color:#b05e27;text-shadow:1px 1px 2px #fffc;opacity:0;border-radius:10px;margin-top:10px;padding:5px 10px;font-family:Fuzzy Bubbles,sans-serif;font-size:25px;font-weight:700;animation:1.5s ease-out .3s forwards fadeIn;position:absolute;top:170px;left:750px}@media (max-width:1200px){.subtitle{font-size:22px;top:155px;left:650px}}@media (max-width:1278px){.subtitle{font-size:20px;top:145px;left:580px}}@media (max-width:1024px){.subtitle{font-size:18px;top:140px;left:520px}}@media (max-width:768px){.subtitle{text-align:center;width:80%;margin-top:5px;padding:0 20px;font-size:16px;top:100px;left:50%;transform:translate(-50%)}}@media (max-width:480px){.subtitle{width:85%;margin-top:3px;padding:0 15px;font-size:14px;line-height:1.3;top:90px;left:50%;transform:translate(-50%)}.container{height:100vh;min-height:600px}.header-section{padding:0 10px;top:15px}.title{-webkit-text-stroke:1.5px #b05e27;letter-spacing:1px;font-size:48px;animation:1.5s ease-out forwards fadeIn,4s ease-in-out infinite float}.cursor-hover{cursor:pointer;display:inline-block}.about-cursor:hover,.socials-cursor:hover,.projects-cursor:hover{cursor:pointer}.cursor-hover:hover:after{display:none}}@media (max-width:375px){.title{-webkit-text-stroke:1.2px #b05e27;letter-spacing:.5px;font-size:42px}.subtitle{width:90%;padding:0 10px;font-size:13px;line-height:1.4;top:85px}}@media (max-width:320px){.title{-webkit-text-stroke:1px #b05e27;font-size:38px}.subtitle{width:95%;font-size:12px;top:80px}}@media (max-width:480px) and (orientation:portrait){.container{background-position:50%;background-attachment:fixed}.header-section{top:5vh}.title{font-size:44px}.subtitle{top:12vh}}@media (max-height:480px) and (orientation:landscape){.header-section{top:5px}.title{-webkit-text-stroke:1px #b05e27;font-size:40px}.subtitle{width:70%;font-size:12px;top:60px;left:50%;transform:translate(-50%)}}.cursor-hover{cursor:pointer;display:inline-block}.about-cursor:hover{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='30'><rect width='100%' height='100%' fill='%23FAEC00' rx='15' ry='15'/><text x='50%' y='50%' text-anchor='middle' dy='.3em' font-family='Fuzzy Bubbles, sans-serif' font-size='14' fill='%23B05E27' font-weight='bold'>ABOUT</text></svg>") 40 15,auto}.socials-cursor:hover{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='30'><rect width='100%' height='100%' fill='%23FAEC00' rx='15' ry='15'/><text x='50%' y='50%' text-anchor='middle' dy='.3em' font-family='Fuzzy Bubbles, sans-serif' font-size='14' fill='%23B05E27' font-weight='bold'>SOCIALS</text></svg>") 45 15,auto}.projects-cursor:hover{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='95' height='30'><rect width='100%' height='100%' fill='%23FAEC00' rx='15' ry='15'/><text x='50%' y='50%' text-anchor='middle' dy='.3em' font-family='Fuzzy Bubbles, sans-serif' font-size='14' fill='%23B05E27' font-weight='bold'>PROJECTS</text></svg>") 47 15,auto}.cursor-hover:hover:after{content:attr(data-cursor);color:#b05e27;pointer-events:none;z-index:1000;background-color:#faec00;border-radius:15px;padding:4px 12px;font-family:DynaPuff,system-ui;font-size:14px;font-weight:700;animation:.2s ease-out fadeInCursor;position:fixed;top:20px;left:20px}@keyframes fadeInCursor{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%)}}@keyframes float{0%{transform:translate(-50%)}50%{transform:translate(-50%,-6px)}to{transform:translate(-50%)}}.frog{z-index:5;width:25%;position:absolute;top:220px;left:38%}.koi{z-index:4;width:7%;position:absolute;bottom:15px;left:500px}.swan{z-index:3;width:25%;position:absolute;bottom:65px;right:300px}@media (max-width:480px){.frog{width:50%;max-width:250px;top:200px;left:50%;transform:translate(-50%)}.koi{width:15%;max-width:80px;bottom:10px;left:10px}.swan{width:45%;max-width:200px;bottom:30px;right:5px}}@media (max-width:375px){.frog{width:55%;top:180px}.koi{width:18%;left:5px}.swan{width:50%;bottom:20px;right:2px}}@media (max-width:320px){.frog{width:60%;top:160px}.koi{width:20%}.swan{width:55%;bottom:15px}}@media (max-width:1200px){.title{-webkit-text-stroke:3.5px #b05e27;font-size:135px}.frog{width:30%;top:240px;left:36%}.koi{width:8.5%;left:380px}.swan{width:28%;right:220px}}@media (max-width:1292px){.subtitle{font-size:20px;top:160px;left:650px}}@media (max-width:1278px){.title{-webkit-text-stroke:3px #b05e27;font-size:120px}.frog{width:32%;top:250px;left:35%}.koi{width:10%;left:200px}.swan{width:30%;right:100px}.subtitle{font-size:20px;top:145px;left:480px}}@media (max-width:1024px){.title{font-size:110px}.frog{width:35%;top:260px;left:32%}.koi{width:10%;left:200px}.swan{width:30%;right:100px}.subtitle{font-size:18px;top:140px;left:350px}}@media (max-width:768px){.header-section{top:20px}.title{-webkit-text-stroke:2px #b05e27;font-size:70px}.frog{width:45%;top:250px;left:50%;transform:translate(-50%)}.koi{width:14%;bottom:10px;left:20px}.swan{width:40%;bottom:40px;right:20px}.cursor-hover:hover{cursor:pointer}}@media (hover:none) and (pointer:coarse){.cursor-hover:hover:after{display:none}.about-cursor:hover,.socials-cursor:hover,.projects-cursor:hover{cursor:pointer}}