main{grid-template-rows:320px repeat(2,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 h1{text-align:center}main .contact-methods{grid-template-columns:repeat(5,1fr);align-items:center;gap:4vh;width:100%;margin-top:8vh;display:grid}main .contact-methods .contact-method{text-align:center;flex-direction:column;justify-content:center;justify-self:center;align-items:center;display:flex}main .contact-methods .contact-method .thumbnail{background-color:rgba(var(--secondary-rgb),.64);cursor:url(/src/svgs/pointer.svg),pointer;border-radius:16px;justify-content:center;align-items:center;width:128px;height:128px;display:flex}main .contact-methods .contact-method .thumbnail:hover,main .contact-methods .contact-method .thumbnail.touched{background-color:var(--secondary);transform:scale(.98)}main .contact-methods .contact-method .thumbnail img{filter:grayscale();width:64px;height:64px}main .contact-methods .contact-method .thumbnail:hover img,main .contact-methods .contact-method .thumbnail.touched img,main .contact-methods .contact-method.animate .thumbnail img{filter:none}main .contact-methods .contact-method h2{margin-top:2vh}main .contact-methods .contact-method p{color:rgba(var(--text-rgb),.64);cursor:url(/src/svgs/pointer.svg),pointer}main .contact-methods .contact-method p:hover,main .contact-methods .contact-method p.touched{color:rgba(var(--text-rgb),.8)}@media screen and (width<=900px){main .contact-methods{grid-template-columns:repeat(4,1fr)}}@media screen and (width<=700px){main .contact-methods{grid-template-columns:repeat(3,1fr)}}@media screen and (width<=500px){main .contact-methods{grid-template-columns:repeat(2,1fr)}}@media screen and (width<=350px){main .contact-methods{grid-template-columns:1fr}}