#content{position:absolute;min-height:100%;min-width:100%;background-color:#ccc1ae;background-size:cover;overflow:scroll}#plantsDiv{position:absolute;bottom:0;width:100%;z-index:-1}.plants{display:block;width:100%;padding-bottom:0;transition:transform 1s ease}.plants.moving{transform:translateY(-250px)}#content-inner{padding:60px 0}#text{left:0;right:0;margin-inline:auto;width:fit-content;position:absolute;text-align:center}#directions{color:#f4f7ff;margin-top:10vh;font-family:HelveticaNeue-Light,sans-serif;font-weight:600;font-size:30px}#hint{color:#92705f;margin-top:350px;font-family:HelveticaNeue-Light,sans-serif;font-weight:900;font-size:10px;position:relative;z-index:3}#piano{position:relative;margin:0 auto;margin-top:12vh;padding:115px 40px 16px;width:782px;background:#ccc57f;border-radius:20px;z-index:1}#piano .keys{width:780px;padding:2px 0 0 2px;overflow:scroll;border-radius:0 0 4px 4px}.key{float:left;position:relative;width:50px;height:180px;margin:0 2px 2px 0;background:#fff;border-radius:0 0 4px 4px}.key.pressed,.key:active{background:#f4f3f3;box-shadow:inset 3px 2px 3px #999,inset -3px 2px 3px #999}.key.black{width:0;margin:0;z-index:1}.key.black:after{content:"";position:absolute;top:-2px;left:-16px;display:block;width:32px;height:117px;background:#353649;border-radius:0 0 4px 4px;box-shadow:1px 1px #555,2px 2px #555}.key.black1:after{left:-20px}.key.black3:after{left:-16px}.key.black.pressed:after,.key.black:active:after{background-color:#222}.words{justify-content:left;position:absolute;top:20%;left:20px;font-family:HelveticaNeue-Light,sans-serif;font-weight:900;z-index:1;width:90%;background:transparent}#name{color:#623f4c;font-size:180px;position:relative;line-height:250px;background:transparent}#userDirect{color:#818455;font-size:30px;padding-left:4px;position:relative}#home-content{position:absolute;min-width:100%;min-height:100%;background-color:#dab965;background-size:cover;overflow:scroll;overflow-x:hidden;margin:0}.icons{position:fixed;display:flex;justify-content:flex-end;height:100px;width:100%;gap:30px;margin-left:auto;z-index:2}.about{width:75px;padding-top:1%}.frog{height:75px;z-index:1}.frog:hover{transform:scale(1.1);filter:drop-shadow(0 0 2em #74b624)}.kw{width:75px;padding-top:1%}.butterfly{height:75px;z-index:1}.butterfly:hover{transform:scale(1.1);filter:drop-shadow(0 0 2em #bfbae2)}.fyf{width:75px;padding-top:1%}.issey{height:75px}.issey:hover{transform:scale(1.1);filter:drop-shadow(0 0 2em #8d0b0b)}#mountainDiv{position:fixed;bottom:0;width:100%;height:100vh;overflow:hidden;z-index:-1}.mountain{display:block;z-index:-1;width:100%;height:100%;padding-top:33vw;object-fit:cover;object-position:left;transition:transform 1.25s ease}.back{position:absolute;top:5px;left:0%;background-color:transparent;border-style:none;font-size:15px;font-weight:900;font-style:"HelveticaNeue-Light",sans-serif;z-index:3}.home-back{color:#92705f}.home-back:hover{transform:scale(1.05);color:#818455}.piano-back{color:#005348}.piano-back:hover{transform:scale(1.05);color:#2d80a7}.title{font-size:85px}.description{font-size:20px;padding-left:5px}#about-content{position:absolute;min-width:100%;min-height:100%;background-color:#16463f;background-size:cover;overflow:scroll}.about-title{color:#c57644}.about-description{color:#d6cfbe}#project1-content{position:absolute;min-width:100%;min-height:100%;background-color:#533146;overflow:scroll}.project1-title{color:#f4f7ff}.project1-description{color:#f2c649}#project2-content{position:absolute;min-width:100%;min-height:100%;background-color:#c34121;background-size:cover;overflow:scroll}.project2-title{color:#a9c0cb}.project2-description{color:#e4d7c5}#social{display:flex;gap:20px}.social-icons{width:60px;height:60px}.social-icons:hover{transform:scale(1.1);filter:drop-shadow(0 0 3em #F4F7FF)}@media only screen and (max-width: 768px)and (orientation: portrait){#directions{top:100px;font-size:25px;text-align:center}#plantsDiv{position:fixed;bottom:0}#hint{margin-top:60vh}.plants{display:block;width:100%;height:auto;position:relative;object-fit:cover;padding-bottom:0;transition:transform 1s ease}#piano{position:relative;margin-top:20vh;margin-bottom:10%;padding:40px 13.913px 5.56px;width:300px;background:#ccc57f;border-radius:10px}#piano .keys{width:300px;padding:.8px 0 0 .8px;overflow:hidden;border-radius:0 0 1.5px 1.5px}.key{float:left;position:relative;width:19px;height:69.23px;margin:0 .8px .8px 0;background:#fff;border-radius:0 0 1.5px 1.5px}.key.pressed,.key:active{background:#f4f3f3;box-shadow:inset 1.15px .8px 1.15px #999,inset -1.15px .8px 1.15px #999}.key.black{width:0;margin:0;z-index:2}.key.black:after{content:"";position:absolute;top:-.8px;left:-6.15px;display:block;width:12px;height:45px;background:#272836;border-radius:0 0 1.5px 1.5px;box-shadow:.4px .4px #555,.8px .8px #555}.key.black1:after{left:-7.7px}.key.black3:after{left:-6.15px}.key.black.pressed:after,.key.black:active:after{background-color:#222}#name{font-size:88px;font-weight:900;font-style:bold;line-height:90px}#userDirect{line-height:80px;padding-left:0;font-size:20px;color:#f4f7ff}#mountainDiv{height:400px;overflow:hidden}.mountain{top:33vw;height:auto;object-position:left;min-height:400px}.icons{gap:10px}.about{width:50px;padding-top:1%}.frog{height:50px;z-index:1}.kw{width:50px;padding-top:1%}.butterfly{height:50px;z-index:1}.fyf{width:50px;padding-top:1%}.issey{height:50px}.words{top:15%}.title{font-size:40px}.description{font-size:14px}#about-content,#project1-content,#project2-content{overflow:scroll}}@media only screen and (max-width: 768px) and (orientation: landscape){body{margin:0;width:100vw;overflow-x:hidden}#content{overflow:scroll}#directions{top:0;font-size:25px;text-align:center;z-index:3;position:relative}#hint{margin-top:60vh}#plantsDiv{position:fixed;bottom:0;width:100%;z-index:1}.plants{display:block;padding-top:50px;width:100%;height:auto;padding-bottom:0;transition:transform 1s ease}#piano{position:relative;margin-top:20vh;margin-bottom:10%;padding:40px 16px 6px;width:300px;background:#ccc57f;border-radius:10px;scale:1.75;z-index:2}#piano .keys{width:300px;padding:.8px 0 0 .8px;overflow:hidden;border-radius:0 0 1.5px 1.5px}.key{float:left;position:relative;width:19.21px;height:69.23px;margin:0 .8px .8px 0;background:#fff;border-radius:0 0 1.5px 1.5px}.key.pressed,.key:active{background:#f4f3f3;box-shadow:inset 1.15px .8px 1.15px #999,inset -1.15px .8px 1.15px #999}.key.black{width:0;margin:0;z-index:2}.key.black:after{content:"";position:absolute;top:-.8px;left:-6.15px;display:block;width:12px;height:45px;background:#272836;border-radius:0 0 1.5px 1.5px;box-shadow:.4px .4px #555,.8px .8px #555}.key.black1:after{left:-7.7px}.key.black3:after{left:-6.15px}.key.black.pressed:after,.key.black:active:after{background-color:#222}#name{font-size:87px;font-weight:900;font-style:bold;top:20px;line-height:100px}#userDirect{padding-left:5px;font-size:30px;color:#f4f7ff;top:20px}#mountainDiv{height:400px;overflow:hidden}.mountain{top:15vh;height:auto;object-position:left;min-height:400px}.icons{gap:10px}.about{width:50px;padding-top:1%}.frog{height:50px;z-index:1}.kw{width:50px;padding-top:1%}.butterfly{height:50px;z-index:1}.fyf{width:50px;padding-top:1%}.issey{height:50px}.words{top:15%}.title{font-size:40px}.description{font-size:14px}#about-content,#project1-content,#project2-content{overflow:scroll}}@media only screen and (min-width: 769px) and (max-width: 932px) and (orientation: landscape){#name{top:20px;font-size:100px;line-height:20px}#home-content{overflow:hidden}#userDirect{padding-left:5px;font-size:15px;color:#f4f7ff;line-height:55px}#hint{margin-top:60vh}.mountain{padding-top:20vw}body{margin:0;width:100vw;overflow-x:hidden}#content{overflow:scroll}#directions{top:0;font-size:25px;text-align:center;z-index:3;position:relative}#plantsDiv{position:fixed;bottom:0;width:100%;z-index:1}.plants{display:block;padding-top:50px;width:100%;height:auto;padding-bottom:0;transition:transform 1s ease}#piano{position:relative;margin-top:15vh;padding:40px 15px 6px;width:300px;background:#ccc57f;border-radius:10px;scale:1.75;z-index:2}#piano .keys{width:300px;padding:.8px 0 0 .8px;overflow:hidden;border-radius:0 0 1.5px 1.5px}.key{float:left;position:relative;width:19.21px;height:69.23px;margin:0 .8px .8px 0;background:#fff;border-radius:0 0 1.5px 1.5px}.key.pressed,.key:active{background:#f4f3f3;box-shadow:inset 1.15px .8px 1.15px #999,inset -1.15px .8px 1.15px #999}.key.black{width:0;margin:0;z-index:2}.key.black:after{content:"";position:absolute;top:-.8px;left:-6.15px;display:block;width:12px;height:45px;background:#272836;border-radius:0 0 1.5px 1.5px;box-shadow:.4px .4px #555,.8px .8px #555}.key.black1:after{left:-7.7px}.key.black3:after{left:-6.15px}.key.black.pressed:after,.key.black:active:after{background-color:#222}#mountainDiv{height:400px;overflow:hidden}.mountain{top:15vh;height:auto;object-position:left;min-height:400px}.icons{gap:10px}.about{width:50px;padding-top:1%}.frog{height:50px;z-index:1}.kw{width:50px;padding-top:1%}.butterfly{height:50px;z-index:1}.fyf{width:50px;padding-top:1%}.issey{height:50px}.words{top:15%}.title{font-size:40px}.description{font-size:14px}#about-content,#project1-content,#project2-content{overflow:scroll}}#root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;height:100%;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,#app,#app>div{height:100%;margin:0;padding:0;overflow:hidden}@media (max-width: 768px){html,body,#app,#app>div{height:100%;margin:0;padding:0;overflow:scroll}}