:root{--primary-color: #863bae;--secondary-color: #faf2e5;--secondary-color-but-darker: #847e74;--font-color: var(--secondary-color)}body{color:var(--font-color);margin:0;font-family:-apple-system,Source Code Pro,monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#141311}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:clamp(.9rem,2vw,1.3rem);padding:2rem 1rem;min-height:100vh;box-sizing:border-box;text-shadow:var(--primary-color) 5px 5px 10px}h1{font-size:clamp(1.7rem,2.2vw,2.7rem);margin-top:5rem;text-align:center}h2{font-size:clamp(1.2rem,1.8vw,2.3rem);margin-top:2rem;text-align:center}.App-subheadline{font-size:clamp(1rem,2.5vw,1.5rem);margin:2rem 1rem 3rem;text-align:center;max-width:800px;line-height:1.6}.App-Link{margin-top:1rem;text-decoration:none;background-color:var(--secondary-color);color:var(--primary-color);font-weight:700;padding:.5rem 1rem;border-radius:5px;transition:all .3s ease;box-shadow:5px 5px 10px var(--primary-color);text-shadow:1px 1px 10px var(--primary-color)}.App-Link:hover{background-color:var(--primary-color);color:var(--secondary-color);transform:translateY(-5px);box-shadow:5px 5px 10px var(--secondary-color);text-shadow:1px 1px 10px var(--secondary-color)}.Experiences{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:clamp(.9rem,2vw,1.3rem)}@media(max-width:600px){.App-subheadline{font-size:1rem}}.App-Socials{display:flex;justify-content:center;padding:2rem;gap:2rem}.App-Socials a{display:flex;flex-direction:column;align-items:center;text-decoration:none;font-weight:600;gap:.75rem;padding:1rem;border-radius:12px;width:140px}.App-Socials a:hover{transform:translateY(-5px)}.App-Socials img{width:48px;height:48px;object-fit:contain;transition:transform .3s ease}.App-Socials a:hover img{transform:scale(1.1)}.App-Socials span{font-size:1rem;text-align:center}.App-Button{cursor:pointer;display:inline-block;margin-top:5rem;text-decoration:none;background-color:var(--secondary-color);color:var(--primary-color);font-weight:700;padding:.75rem 1.5rem;border-radius:8px;transition:all .3s ease;box-shadow:5px 5px 10px var(--primary-color);text-shadow:1px 1px 10px var(--primary-color)}@media(max-width:480px){.App-Socials{flex-direction:column;gap:1.5rem}.App-Socials a{width:120px;padding:1rem;gap:.5rem}.App-Socials img{width:40px;height:40px}.App-Socials span{font-size:.9rem}}.App-Burger{position:fixed;top:3rem;left:3rem;display:flex;flex-direction:column;justify-content:space-around;width:2rem;height:2rem;background:transparent;border:none;cursor:pointer;padding:0;z-index:10}.App-Burger:hover div{background-color:var(--secondary-color-but-darker)}.App-Burger div{width:2rem;height:.25rem;background:var(--secondary-color);border-radius:10px;transition:all .3s linear;position:relative;transform-origin:1px}.App-Burger.open div{background:var(--primary-color)}.App-Burger.open:hover div{background:var(--secondary-color-but-darker)}.App-Burger.open div:nth-child(1){transform:rotate(45deg)}.App-Burger.open div:nth-child(2){opacity:0}.App-Burger.open div:nth-child(3){transform:rotate(-45deg)}@media(max-width:600px){.App-Burger{top:2rem;left:2rem;width:1.5rem;height:1.5rem}.App-Burger div{width:1.5rem;height:.2rem}}.App-FloatingMenu{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease-in-out,visibility 0s linear .5s;position:fixed;z-index:9;top:2rem;left:2rem;width:fit-content;height:fit-content;background-color:var(--secondary-color);color:var(--primary-color);padding:5rem 2rem 2rem;border-radius:2rem;box-shadow:0 4px 8px var(--primary-color)}.App-FloatingMenu.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s ease-in-out,visibility 0s linear 0s}.App-menu-item{margin:1rem 0;font-size:1.5rem;cursor:pointer;transition:color .3s ease-in-out;font-style:italic}.App-menu-item:hover{font-weight:700}.App-menu-item.active{font-weight:700;text-shadow:5px 5px 15px var(--primary-color)}@media(max-width:600px){.App-FloatingMenu{top:1rem;left:1rem;padding:4rem 1rem 1rem;border-radius:1rem}}.Book{position:relative;border-radius:10px;width:clamp(200px,20vw,300px);height:clamp(250px,35vh,400px);background-color:var(--secondary-color);box-shadow:1px 1px 12px #000;transform:preserve-3d;perspective:600px;display:flex;align-items:center;justify-content:center;color:var(--primary-color);transition:transform .5s,z-index .5s;font-size:1rem;z-index:0;text-align:center;padding:1rem;box-shadow:var(--primary-color) 5px 5px 10px;text-shadow:none}.Cover,.Page{padding:1rem;top:0;position:absolute;background-color:var(--secondary-color);width:100%;height:100%;border-radius:10px;cursor:pointer;transition:all .5s;transform-origin:0;box-shadow:1px 1px 12px #000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.8rem;text-align:center;box-shadow:var(--primary-color) 5px 5px 10px}.Book:hover .Cover{transform:rotateY(-70deg);box-shadow:var(--primary-color) 5px 5px 10px}.Page{transform-origin:100%}.Book:hover .Page{transform:rotate(25deg) rotateX(-30deg) rotateY(-10deg) translate(100px)}.Book:hover{transform:rotate(-10deg);z-index:10}.Book-Title{font-weight:700;font-size:clamp(1rem,2vw,1.4rem);text-align:center;word-wrap:break-word;max-width:90%}.Book-Link{margin-top:1rem;text-decoration:none;background-color:var(--secondary-color);color:var(--primary-color);font-weight:700;border:1px solid var(--primary-color);padding:.5rem 1rem;border-radius:5px;transition:all .3s ease;font-size:clamp(.9rem,1.5vw,1.1rem)}.Book-Link:hover{background-color:var(--primary-color);color:var(--secondary-color);transform:translateY(-5px)}.Book-Tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.5rem;font-size:.8rem}@media(max-width:900px){.Book{width:clamp(180px,40vw,280px);height:clamp(220px,40vh,350px);font-size:clamp(1rem,2vw,1.3rem)}.Book-Title{font-size:1.2rem}}@media(max-width:600px){.Book{width:50vw;height:auto;min-height:250px;font-size:.9rem}.Cover{padding:.8rem;gap:.6rem}.Page{padding:.75rem;transform-origin:100%}.Book-Link{padding:.4rem .8rem;font-size:clamp(.8rem,1.2vw,1rem)}.Book-Tags{gap:.4rem;font-size:.9rem}.Book:hover .Page{transform:rotate(15deg) rotateX(-30deg) rotateY(-10deg) translate(50px);box-shadow:1px 1px 20px #000a}.Book:hover{transform:rotate(-5deg);z-index:10}}.BookTag{display:inline-block;background-color:var(--primary-color);color:var(--secondary-color);padding:4px 8px;border-radius:4px;font-size:.9rem;font-weight:500;transition:background-color .3s ease;box-shadow:var(--primary-color) 2px 2px 5px}@media(max-width:900px){.BookTag{font-size:.8rem;padding:3px 6px}}.Modal-Overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;justify-content:center;align-items:center;z-index:999}.Modal{color:var(--primary-color);background:var(--secondary-color);padding:2rem;width:900px;max-width:95%;border-radius:12px;position:relative;animation:modalPop .25s ease-out;text-shadow:none}.Modal-Content{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}.Modal-Left{display:flex;flex-direction:column;gap:1rem}.Modal-Right{display:flex;justify-content:center;align-items:center}.Modal-Image{width:100%;max-width:260px;height:auto;object-fit:contain;border-radius:10px}.Modal-CloseBtn{position:absolute;top:12px;right:12px;font-size:1.5rem;background:none;border:none;cursor:pointer}.Modal-Link{display:inline-block;color:var(--primary-color);background-color:var(--secondary-color);text-decoration:none;padding:.6rem 1rem;border-radius:6px;border:1px solid var(--primary-color);margin-top:.8rem;text-align:center;font-weight:700;transition:.3s ease}.Modal-Link:hover{background-color:var(--primary-color);color:var(--secondary-color);transform:translateY(-5px)}.Modal-Tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.5rem}@media(max-width:750px){.Modal-Content{grid-template-columns:1fr;text-align:center}.Modal-Right{order:-1}.Modal-Image{max-width:80%;margin:0 auto}.Modal-Left{text-align:center}}.Book-Container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5rem;padding:2rem}@media(max-width:900px){.Book-Container{gap:3rem}}@media(max-width:600px){.Book-Container{flex-direction:column;gap:2rem}}.App-header{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,3vw,2rem);min-height:25vh;flex-direction:row;text-align:center;position:relative;flex-wrap:wrap;padding:1rem}.Header-img{height:clamp(120px,20vh,200px);width:clamp(120px,20vh,200px);border-radius:50%;object-fit:cover;transform:rotate(15deg);pointer-events:none;flex-shrink:0}.App-headline{font-weight:700;font-size:clamp(1.8rem,4vw,3rem);text-align:center;line-height:1.2;max-width:90%}@media(max-width:900px){.App-header{flex-direction:column;text-align:center}.Header-img{transform:rotate(10deg)}.App-headline{font-size:clamp(1.5rem,5vw,2.5rem)}}@media(max-width:600px){.App{padding:1rem}.App-header{gap:1rem}.Header-img{height:120px;width:120px;transform:rotate(8deg)}.App-headline{font-size:1.8rem}}.Woopsie-Content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}h1{font-size:clamp(1.5rem,2vw,2.5rem);text-align:center}.Woop-subheadline{font-size:clamp(1rem,2.5vw,1.5rem);margin:2rem 1rem 3rem;text-align:center;max-width:800px;line-height:1.6}.Woop-img{width:100%;max-width:80vw;height:auto;object-fit:contain;pointer-events:none;display:block;margin:0 auto;margin-top:5rem;margin-bottom:5rem}.Woop-Arcade-Games{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:3rem}.Woop-Arcade-Games-Images{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:2rem}.Woop-Arcade-Games-Images img{width:100%;max-width:50vw;height:auto;object-fit:contain;pointer-events:none;display:block;margin:0 auto}@media(max-width:600px){.Woop-img{max-width:90vw}}@media(min-width:768px){.Woop-Arcade-Games-Images img{max-width:30vw}}.Skill{position:relative;display:flex;flex-direction:column;align-items:center;margin:10px;color:var(--secondary-color);border-radius:15%;padding:3%;width:115px;height:110px;box-shadow:inset 0 0 15px var(--primary-color);text-shadow:var(--primary-color) 0 0 10px;justify-content:space-evenly}.Skill-Name{font-size:16px;font-weight:700;text-align:center}.Skill-Image{width:64px;height:64px;margin-bottom:10px}@media(max-width:600px){.Skill{border-radius:10%;width:115px;height:110px}}.Skill-Container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2rem;padding:2rem}@media(max-width:900px){.Skill-Container{gap:1.5rem}}@media(max-width:600px){.Skill-Container{gap:1rem}}