/* CSS for shell goes here */

#mobileMenu{
    width: 100vw;
    height: 100vh;
    position: absolute;
    transform: translateY(-100vh);
    top: 0px;
    left: 0px;
    background: var(--color-everything-else);
    overflow: hidden;
}

#mobileMenu.opened {
    transform: translateY(0vh) !important;
}

#mobileMenu .mobileMenu-content{
    width: 100%;
    height: 100%;
}

#mobileMenu .container{
    width: 100%;
    height: 100%;
    padding-top: 5vw;
}


header .logo-container svg {
    width:100%;
    height:auto;
    margin-bottom:var(--gap-spacing);
}
#ascii-fire-footer {
    margin-bottom:var(--gap-spacing);
}
footer h2 {
    margin-bottom: 0.7vw;
    font-size: 11.45vw;
    white-space: nowrap;
}
footer .logo svg {
    max-width:100%;
    width:20vw;
    height:auto;
}
footer .contact-marquee {
    white-space:nowrap;
    width:100%;
    overflow-x:hidden;
}
footer .footer-links {
    margin-top:1vw;
    margin-bottom:5vw;
}
@keyframes marquee {
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-100%);
    }
}
footer .marq-1, footer .marq-2 {
    display:inline-block;
    animation: marquee forwards 30s infinite;
    animation-timing-function: linear;
}
header #desktop-nav{
    position: relative;
    width: 100%;
    padding-top: 2vw;
}

header .desktop-menu{
    position: absolute;
    right: 0%;
    display: flex;
    width: 100%;
}

header #desktop-nav #about-link{
    padding-right: 12.2vw;
}
header #desktop-nav #work-link {
    padding-right: 6.3vw;
    margin-left: auto;
}

header #desktop-nav a {
    font-size: 1.5vw;
    font-family: 'GMon';
}

header #mobileMenu .mobile-menu-link {
    font-size: 5vw;
    padding-bottom: 5vw;
}