/*
 * ## MZPF - mehrzweckportfolio
 * 
 * GRUBERND 2020-2026 <http://grubernd.at> :: MIT License
 *
 * _v26.121_
 * 
 * Alternative for h1 .. h6: 45494e (RAL 7024 Graphitgrau)
 * 
 */

/* ------------------------------------------------------------------------- */
@font-face {
    font-family: "Courier Prime";
    src: url("courier-prime.woff2");
    font-weight: normal;
    font-style: normal;
}

/* ------------------------------------------------------------------------- */
html {
    font-size: clamp(12px, 1.2vw, 18px);
}

body, a {
    font-family: "Courier Prime", monospace;
    color: #25282a;
    background-color: #efeee5;
}

body {
    margin: 0;
    }

.container {
    width: 100%;
    margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Courier Prime", monospace;
    font-size: 1.851em;
    font-weight: bold;
    color: #651927;
    margin: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1rem;
}

blockquote {
    margin: 0;
    padding-left: 3rem;
    padding-right: 3rem;
}

ul {
    margin: 0;
    padding-left: 3rem;
    padding-bottom: 1rem;
}

p {
    font-family: "Courier Prime", monospace;
    font-size: 1.236rem;
    color: #25282a;
    margin: 0;
    padding-bottom: 1rem;
}

p img {
    padding-left: 0;
    padding-right: 0;
}

img {
    margin: 0;
    padding: 1px;
    width: 100%;
}

nav {
    display: grid;
    padding: 0.5rem 0 2rem 0;
    }

nav img {
    width: 100%;
    height: auto;
    }

/* no extra pixels beyond the img on anchors */
nav a {
    line-height: 0;
}

main {
    padding-bottom: 8rem;
}

footer {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 4rem;
}

.mtm {
    height: 1px;
}


/* ------------------------------------------------------------------------- */
/* These parts need adjustments for the screen size */

body { 
    padding: 4px;
}

.container {
    max-width: 640px;
}

nav {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    }

footer {
    gap: 4px;
}

footer > * {
    flex: 0 0 calc(100% / 3);
}


/* ------------------------------------------------------------------------- */
/* from now on 4 thumbs per row */
@media only screen and (min-width: 640px) {
    body { 
        padding: 4px;
    }

    .container {
        max-width: 960px;
    }

    nav {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        }

    footer {
        gap: 4px;
    }

    footer > * {
        flex: 0 0 calc(100% / 4);
    }
}

/* ------------------------------------------------------------------------- */
/* extend to 6 thumbs per row for large screens */
@media only screen and (min-width: 3200px) {

    body {
        padding: 8px;
    }

    .container {
        max-width: 1440px;
    }

    nav {
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
    }

    footer {
        gap: 8px;
    }

    footer > * {
        flex: 0 0 calc(100% / 6);
    }

}

/* ------------------------------------------------------------------------- */