main{grid-template-rows:320px 225px auto;align-items:center;width:100%;height:100%;display:grid}main .nav{width:100%;height:320px;position:relative}main .nav .background{background-image:url(/src/imgs/banner.png);background-size:100% cover;background-position:50%;background-repeat:no-repeat;width:100%;height:320px;position:absolute;top:0}main .nav .separator{background:linear-gradient(to top,var(--primary)64%,rgba(var(--primary-rgb),0));width:100%;height:64px;position:absolute;bottom:0}main .last-content{justify-content:center;align-items:center;gap:8vh;width:100%;height:225px;display:flex}main .last-content .youtube-video,main .last-content .spotify-track{background-color:rgba(var(--secondary-rgb),.64);border:solid 2px var(--text);width:400px;height:225px;filter:drop-shadow(0 0 6px var(--text));cursor:url(/src/svgs/pointer.svg),pointer;border-radius:16px}main .last-content .spotify-track{width:450px;height:80px}main .last-content .youtube-video.loaded,main .last-content .spotify-track.loaded{border:none}main .last-content .youtube-video iframe,main .last-content .spotify-track iframe{display:none}main .last-content .youtube-video.loaded iframe,main .last-content .spotify-track.loaded iframe{border-radius:16px;display:block}main .last-content .youtube-video:hover,main .last-content .youtube-video.touched,main .last-content .spotify-track:hover,main .last-content .spotify-track.touched{filter:drop-shadow(0 0 4px var(--text));transform:scale(.98)}main .last-content .youtube-video.loaded:hover,main .last-content .youtube-video.loaded.touched,main .last-content .spotify-track.loaded:hover,main .last-content .spotify-track.loaded.touched{filter:drop-shadow(0 0 6px var(--text));transform:scale(1)}main .last-content .youtube-video .cover,main .last-content .spotify-track .cover{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}main .last-content .youtube-video.loaded .cover,main .last-content .spotify-track.loaded .cover{display:none}main .last-content .youtube-video.loading .cover svg,main .last-content .spotify-track.loading .cover svg{animation:3s infinite loading}@keyframes loading{0%{animation-timing-function:ease-in;transform:scale(1)rotate(0)}25%{animation-timing-function:ease-out;transform:scale(1.2)rotate(0)}50%{animation-timing-function:ease-in-out;transform:scale(1)rotate(0)}to{animation-timing-function:ease-in;transform:scale(1)rotate(360deg)}}main .last-content .youtube-video .cover h2,main .last-content .spotify-track .cover h2{color:rgba(var(--text-rgb),.64)}main .last-content .youtube-video.loading .cover h2,main .last-content .spotify-track.loading .cover h2{display:none}main .projects-container .separator{grid-template-columns:1fr auto 1fr;justify-content:center;align-items:center;width:100%;margin-top:4vh;display:grid}main .projects-container .separator .stroke{background-color:var(--text);border-radius:2px;justify-self:center;width:90%;height:4px}main .projects-container .projects{grid-template-columns:repeat(2,1fr);gap:4vh;margin-top:4vh;display:grid}main .projects-container .projects .project{background-color:rgba(var(--secondary-rgb),.64);cursor:url(/src/svgs/pointer.svg),pointer;border:2px solid var(--text);text-align:center;border-radius:16px;flex-direction:column;justify-content:center;justify-self:center;align-items:center;gap:2vh;width:480px;height:384px;padding:1vh;display:flex}main .projects-container .projects .project:hover,main .projects-container .projects .project.touched{transform:scale(.99)}main .projects-container .projects .project .tag{background-color:rgba(var(--secondary-rgb),.8);border:solid 1px var(--text);border-radius:8px;width:fit-content;padding:1vh 2vh}main .projects-container .projects .project .tag:hover,main .projects-container .projects .project .tag.touched{background-color:var(--secondary)}main .projects-container .projects .project img{border-radius:8px;width:96px;height:96px}main .projects-container .projects .project p{color:rgba(var(--text-rgb),.64)}main .projects-container .projects .project .stacks{align-items:center;gap:2vh;height:32px;display:flex}main .projects-container .projects .project .stacks img{border-radius:0;width:32px;height:32px}@media screen and (width<=1024px){main .projects-container .projects{flex-direction:column;align-items:center;display:flex}}@media screen and (width<=950px){main .last-content{gap:4vh}}@media screen and (width<=900px){main{grid-template-rows:320px repeat(2,auto)}main .last-content{flex-direction:column;height:auto}main .last-content .youtube-video{order:2}main .last-content .spotify-track{order:1}}@media screen and (width<=512px){main .projects-container .projects .project{width:304px;height:464px}}@media screen and (width<=490px){main .last-content .youtube-video,main .last-content .youtube-video iframe{width:256px;height:144px}main .last-content .spotify-track,main .last-content .spotify-track iframe{width:300px;height:80px}main .last-content .youtube-video,main .last-content .spotify-track{filter:drop-shadow(0 0 4px var(--text))}main .last-content .youtube-video .cover svg,main .last-content .spotify-track .cover svg{width:48px;height:48px}main .last-content .youtube-video .cover h2,main .last-content .spotify-track .cover h2{text-align:center;font-size:1em}main .last-content .youtube-video:hover,main .last-content .youtube-video.touched,main .last-content .spotify-track:hover,main .last-content .spotify-track.touched{filter:drop-shadow(0 0 2px var(--text))}}