/* MoxieCat - 2023 */
/* Overwrites main.css a LOT to look more like a carrd */

body {
    display:flex;
    flex-flow:column;
    align-items:center;
}

header {
    position:fixed;
    top:0;
    left:auto;
    min-width:100%;
    max-width:100%;
    min-height:3em;
    max-height:3.5em;
    transform:none;
    padding:0.5em;
}

header nav {
    display:flex;
    flex-flow:row;
    transform:none;
    margin:0;
    padding:0;
}

header nav a {
    font-size:1.5em;
    font-weight:600;
    text-align:center;
    margin:0 0.5em;
    padding:0;
}

header nav img {
    height:2.5em;
    width:auto;
}

main {
    padding:4.5em;
}

main .panel {
    padding:2em;
    box-shadow:0.5em 0.5em 0.5em var(--blue-dark);
    text-align: center;
    align-items: center;
}

main a.panel {
    text-decoration:none;
    padding:0.5em;
    box-shadow:none;
    font-size:1.125em;
    width:80%;
    margin:0.5em auto;
    transition:width 0.125s;
}

main a:hover {
    color:white;
    width:100%;
}

footer {
    transform:none;
    min-height:2em;
    min-width:100%;
    padding:0.325em;
    left:auto;
    bottom:0;
}

footer p {
    transform:none;
    font-size:0.75em;
}

main::before {
    content:"";
    display:block;
    background-image:url("/img/DotsBlue.webp");
    background-size:contain;
    width:10vw;
    min-height:200vh;
    position:fixed;
    top:0;
    left:0;
    animation-name:border-scroll;
    animation-duration:25s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    z-index:-1;
}

main::after {
    content:"";
    display:block;
    background-image:url("/img/DotsBlue.webp");
    background-size:contain;
    width:10vw;
    min-height:200vh;
    position:fixed;
    top:0;
    right:0;
    transform:rotate(180deg);
    animation-name:border-scroll;
    animation-direction: reverse;
    animation-duration:25s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    z-index:-1;
}


@media only screen and (max-width: 900px) {
    header {
        position:fixed;
        top:1.5rem;
        left:auto;
        min-width:100%;
        max-width:100%;
        min-height:3em;
        max-height:5em;
        transform:none;
        padding:0.5em;
    }
    
    header nav {
        flex-flow:row;
        justify-content:left;
        transform:none;
        margin:0;
        padding:0;
        overflow:auto;
        white-space:nowrap;
    }

    /* Fade edges on mobile nav */
    header nav::before {
        content:"<";
        color:var(--offwhite);
        text-align:left;
        line-height:3em;
        position:absolute;
        z-index:5;
        pointer-events:none;
        background-image:linear-gradient(to left, #ffad5200, #ffad52ff);
        width:1.2em;
        height:3em;
        left:0;
    }

    header nav::after {
        content:">";
        color:var(--offwhite);
        text-align:right;
        line-height:3em;
        align-content:center;
        position:absolute;
        z-index:5;
        pointer-events:none;
        background-image:linear-gradient(to right, #ffad5200, #ffad52ff);
        width:1.2em;
        height:3em;
        right:0;
    }
    
    header nav a {
        font-size:1.75em;
        font-weight:600;
        text-align:center;
        margin:0;
        padding:0 0.35em;
        width:auto;
        display:inline-block;
    }
    
    header nav img {
        height:2.5em;
        width:auto;
    }

    main {
        padding:2em 10vw;
        padding-top:6.5em;
    }

    main h1 {
        font-size:1.25em;
        text-align: center;
    }

    main h2 {
        font-size:1.05em;
    }

    main .panel {
        padding:0.75em;
    }

    main a.panel {
        font-size:1em;
    }
}