:root{--bg-color:white;--text-color:black;--max-width:1000px;--img-invert:invert(1)}@media (prefers-color-scheme:dark){:root{--bg-color:black;--text-color:white;--img-invert:invert(0)}}html,body{background:var(--bg-color);width:calc(100vw - 6rem);height:calc(100vh - 6rem);color:var(--text-color);margin:0;padding:1.5rem;font-family:Lato,sans-serif}@media (max-width:550px){html,body{width:calc(100vw - 4rem);height:calc(100vh - 4rem);padding:1rem}}html main,body main{width:100%;max-width:var(--max-width);margin:auto;padding:4rem 0;position:relative}.avatar{opacity:1;border:solid 5px var(--text-color);border-radius:50%;width:200px;height:200px;transition:all .5s;position:absolute;top:4rem;right:0;overflow:hidden;transform:translate(2rem)}@media (max-width:900px){.avatar{width:150px;height:150px;transform:translate(.5rem)}}@media (max-width:550px){.avatar{display:none}}.avatar.hidden{opacity:0}.avatar img{opacity:1;transition:all .5s;position:absolute;top:0;right:0}@media (max-width:900px){.avatar img{width:150px;height:150px}}.avatar img.hidden{opacity:0}.content{opacity:1;transition:all .5s}@media (max-width:900px){.content{max-width:70%}}@media (max-width:550px){.content{max-width:none}}.content.hidden{opacity:0}.content h2{margin:2.5rem 0 1rem;font-size:5rem;line-height:1}@media (max-width:900px){.content h2{font-size:3.5rem}}@media (max-width:550px){.content h2{font-size:2.5rem}}.content h3{opacity:.5;margin:0 0 3rem;font-size:2.75rem;font-style:italic;line-height:1}@media (max-width:900px){.content h3{font-size:1.85rem}}.content h3 img{filter:var(--img-invert);transform:translateY(5px)}@media (max-width:900px){.content h3 img{width:67px;height:30px}}.content h4{margin:2.5rem 0 .75rem;font-size:1.5rem}.content p{max-width:75%;font-size:1.2rem;line-height:1.75rem}@media (max-width:900px){.content p{max-width:none}}.content .length-selector{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}@media (max-width:900px){.content .length-selector p{width:100%}}.content .length-selector button{color:var(--text-color);border:solid 2px var(--text-color);cursor:pointer;background:0 0;border-radius:5px;padding:.5rem .65rem;font-family:Lato,sans-serif;font-size:1rem;line-height:1}.content .length-selector button.selected{background:var(--text-color);color:var(--bg-color);font-weight:600}.content .connect-buttons{align-items:center;gap:.5rem;display:flex}.content .connect-buttons .connect-link{color:var(--text-color);border:solid 2px var(--text-color);background:0 0;border-radius:50%;padding:.5rem}.content .connect-buttons .connect-link.linkedin{padding:.35rem .45rem}.content .connect-buttons .connect-link.hackerrank{text-decoration:none}.content .connect-buttons .connect-link.hackerrank p{background:var(--text-color);color:var(--bg-color);border-radius:50%;margin:0;padding:.6rem .45rem .6rem .35rem;font-size:1.055rem;font-weight:900;line-height:1.055rem}.content .connect-buttons .connect-link.hackerrank p span{background:var(--bg-color);width:.55rem;height:.8rem;margin-left:1px;display:inline-block}.content .music-projects{flex-wrap:wrap;gap:4rem 2rem;display:flex}@media (max-width:900px){.content .music-projects>div{width:calc(50% - 1.5rem)}}@media (max-width:550px){.content .music-projects>div{width:100%}}.content .music-projects>div .artist-image{border:solid 3px var(--text-color);border-radius:10px;overflow:hidden}.content .music-projects>div .artist-image img{object-fit:cover;width:100%;height:100%;margin-bottom:-5px}.content .music-projects>div h5{margin:1rem 0 2rem;font-size:1.25rem;line-height:1}.content .music-projects>div .artist-button{color:var(--text-color);border:solid 2px var(--text-color);border-radius:5px;padding:.3rem .75rem .5rem;text-decoration:none}header{max-width:var(--max-width);opacity:1;margin:auto;transition:all .5s;display:flex}header.hidden{opacity:0}header .logo{background:var(--text-color);color:var(--bg-color);border-radius:5px;padding:1rem .75rem;font-size:1.5rem;font-weight:900;line-height:1;display:inline-block}header .menu{min-height:100%;margin-left:auto;display:flex;position:relative}header .menu:after{content:"";background:var(--text-color);width:calc(50% - 1rem);height:3px;margin:0 .5rem;transition:all .5s;position:absolute;bottom:0}header .menu.code:after{transform:translate(0)}header .menu.music:after{transform:translate(calc(100% + 1rem))}header .menu button{color:var(--text-color);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;margin:0 1rem;padding:0;font-size:large;display:flex}.intro{font-size:3rem;line-height:3rem}@media (max-width:900px){.intro{font-size:2rem;line-height:4rem}}.intro.small{opacity:.5;font-size:.85rem;line-height:1rem;transition:all 50ms linear}.intro h1{margin:0}.intro h1 span{opacity:1;transition:all .5s}.intro h1 span.hidden{opacity:0}