/* MoxieCat - 2023 */

/* PALETTE*/
:root {
    /* Define palette */
    --black: #121212;
    --offwhite: #fdecbe;

    --orange: #ffad52;
    --orange-light: #ffd2a0;
    --orange-dark: #ec912a;

    --blue: #2b2d6f;
    --blue-light: #494b8b;
    --blue-dark: #141652;

    --pink: #ec6c93;
}

html {
    overflow-x: hidden;
    max-width: 100%;
}

/* ---- DESKTOP STYLES ---- */
/* Because forget mobile-first, I'm doing it my way */
body {
    font-family: 'New Kansas', monospace;
    overflow-x:hidden;
    background-color:var(--blue);
    font-size:1.25em;
    font-weight:300;
}

br {
    margin-bottom:1.5em;
}

::selection {
    text-shadow:none;
    background-color:var(--pink);
    color:white;
}

/* Header */
header {
    background-color:var(--orange);
    position:fixed;
    transform:rotate(-5deg);
    min-width:20vw;
    max-width:30vw;
    min-height:130vh;
    top:-15vh;
    left:-10vw;
    padding:2em;
    padding-left:11.5vw;
    padding-top:20vh;
    z-index:2;
}

header nav {
    display:flex;
    flex-flow:column;
    transform:rotate(5deg);
}

header nav a {
    font-size:calc(1.75vw + 0.5vh);
    font-weight:600;
    text-decoration:none;
    color:var(--offwhite);
    margin:0.75em;
    border:0.125em solid var(--orange);
    border-radius:0.25em;
    padding:0.125em;
    width:92%;
    text-shadow:none;
    transition:text-shadow 0.125s;
    transition:border-color 0.125s;
}

header nav a:hover {
    border:0.125em solid var(--offwhite);
    text-shadow:0 0.125em 0.125em var(--orange-dark);
    transition:text-shadow 0.0125s;
    transition:border-color 0.0125s;
}

header nav a.current {
    border:0.125em solid var(--orange);
    text-shadow:none;
    color:var(--orange-light);
}

#logo-box {
    margin-top:5em;
    display:block;
    position:absolute;
    left:8vw;
    bottom:16vh;
}

#logo-box img {
    margin:0.25rem;
    max-width:95%;
}

#header-border {
    display:block;
    background-image:url("/img/DotsOrange.webp");
    background-size:contain;
    width:3.9vw;
    min-height:200vh;
    position:absolute;
    top:0;
    left:99%;
    animation-name:border-scroll;
    animation-duration:25s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}

@keyframes border-scroll {
    from {top:0;}
    to {top:-50vh;}
}

/* Main Body */
main {
    display:flex;
    flex-flow:column;
    padding:1em 12vw 4vw 24vw;
    color:var(--offwhite);
    text-shadow:0.125em 0.125em var(--blue-dark);
    font-weight:normal;
}

main a {
    color:var(--orange);
}

main a:visited {
    color:var(--pink);
}

main a:hover {
    color:white;
}

main h1 {
    font-weight:800;
    font-size:2em;
}

main h2 {
    font-weight:600;
    font-size:1.5em;
}

#featured {
    position:relative;
    margin-bottom:1.5em;
    display:grid;
    grid-template-columns:auto 2.5fr;
    column-gap:1.625em;
}

#featured h2 {
    font-size:1.125em;
    margin-top:0;
}

#featured div {
    display:flex;
    flex-flow:column;
    align-items:flex-start;
}

#featured img {
    max-height:25vh;
    object-fit:contain;
    margin-left:0;
}

section {
    margin-bottom:1.5em;
}

section p {
    margin-top:0.5em;
}

section ul {
    margin:0;
}


/* Footer */
footer {
    background-color:var(--black);
    position:fixed;
    display:flex;
    flex-flow:row-reverse;
    min-width:120vw;
    min-height:10vw;
    left:-10vw;
    bottom:-6vw;
    transform:rotate(-5deg);
    color:white;
    padding-top:calc(calc(4.5vw / 1.2) - 0.5em);
    padding-right:12vw;
    z-index:3;
}

footer p {
    transform:rotate(5deg);
    font-size:1.2vw;
}

footer p img{
    display:inline;
    width:5vw;
}

#corner-cat {
    position:absolute;
    display:block;
    background-image:url("/img/CornerCat-2025.webp");
    background-repeat:none;
    background-size:cover;
    pointer-events:none;
    height:36vh;
    width:45vh;
    top:-32vh;
    right:8.25vw;
    z-index:4;
    transform:rotate(5deg);
}

#corner-cat-hover {
    pointer-events:auto;
    position:relative;
    display:block;
    padding:0;
    background-image:url("/img/CornerCat-2025.webp");
    background-repeat:none;
    background-size:cover;
    background-position-x:100%;
    height:103.5%;
    width:50%;
    float:right;
}

#corner-cat-hover:hover {
    background-image:url("/img/CornerCat-2025-wink.webp");
}

/* Utilities */
.grid {
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    column-gap:2em;
    row-gap:2em;
}

.force-3 {
    grid-template-columns:1fr 1fr 1fr;
}

.force-2 {
    grid-template-columns:1fr 1fr;
}

.panel {
    display:block;
    background-color:var(--blue-light);
    margin:1em -0.25em;
    padding:1.25em;
    border-radius:1em;
    box-shadow:0.5em 0.5em 0.5em var(--blue-dark);
}

.panel * {
    text-shadow:0.125em 0.125em var(--blue);
}

/* Alt colour for panels within panels */
.panel .panel {
    background-color:var(--blue);
    text-shadow:0.125em 0.125em var(--blue-dark);
}

.label {
    font-weight:bold;
    color:var(--offwhite);
}

.large {
    font-size:1.125em;
}

.small {
    font-size:0.75em;
}

.mono {
    font-family:'Courier New', Courier, monospace;
}

strong {
    font-weight:500;
}

.date {
	font-size:0.85em;
	font-style:italic;
	margin-left:2em;
}

.row {
	display:flex;
	flex-flow:row;
	align-items:center;
}

.button {
    aspect-ratio: 88 / 31;
    display:inline-block;
    min-width:10vw;
    max-width:15vw;
    justify-items: center;
}

.button img {
    aspect-ratio: 88 / 31;
    width: 100%;
    image-rendering: pixelated;
}

.button picture {
    aspect-ratio: 88 / 31;
    width: 100%;
    image-rendering: pixelated;
}

.button-container {
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap:1em;
    row-gap:0.75em;
    width:90%;
    margin:auto;
}

.code-block {
    background-color:#323232;
    color:#e0e0e0;
    font-family:'Courier New', Courier, monospace;
    padding:0.5em;
    text-shadow:none;
    border-radius:0.125em;
}

.spacer {
    min-height:2em;
}

.text-center {
    text-align:center;
}

.text-right {
    text-align:right;
}

input {
    text-shadow:none !important;
}

label {
    color:var(--offwhite);
}

textarea {
    text-shadow:none !important;
    margin:0;
}

button.editor {
    font-size:0.65em;
    text-shadow:none !important;
    margin:0.125em 0;
}

/* MEDIA QUERIES */

@media only screen and (max-width:900px) {
    #corner-cat {
        display:none;
    }

    #header-border {
        display:none;
    }

    #logo-box {
        position:fixed;
        top:0;
        left:0;
        margin:0;
        width:100%;
        display:flex;
        flex-flow:column;
        align-items:center;
        max-height:2rem;
        background-color:var(--orange);
    }

    #logo-box img {
        max-height:100%;
        margin:0;
        content:url("/img/logo-moxiecat.svg");
    }


    #featured {
        display:flex;
        flex-flow:column;
        align-items:center;
        justify-content: center;
    }

    /*
    #featured-heading {
        display:none;
    }
    */

    body {
        display:flex;
        flex-flow:column;
        align-items:center;
    }
    
    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::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;
    }
    
    main {
        padding:2em;
        padding-top:6.5em;
    }

    main h1 {
        font-size:1.5em;
    }

    main h2 {
        font-size:1.25em;
    }
    
    footer {
        transform:none;
        min-height:2em;
        min-width:100%;
        padding:0.325em;
        left:auto;
        bottom:0;
    }
    
    footer p {
        transform:none;
        font-size:0.65em;
    }

    footer a {
        display:none;
    }

    .button-container {
        grid-template-columns: repeat(3, 1fr);
        column-gap:0.5em;
        row-gap:0.75em;
        width:98%;
        margin:auto;
    }

    .button {
        min-width:15vw;
        max-width:25vw;
    }
}