@import url("../vendor/normalize.css");
@import url("./crt.css");
@import url('./c64-palette.css');

@font-face {
    font-family: "PetMe1282Y";
    src: url("../vendor/fonts/petme/PetMe1282Y.ttf") format("truetype");
}

@font-face {
    font-family: "PetMe128";
    src: url("../vendor/fonts/petme/PetMe128.ttf") format("truetype");
}

:root {
    --fgcolor1: var(--color-black);
    --bgcolor1: var(--color-white);
    --link-color1: var(--color-cyan);

    --fgcolor2: var(--color-darkgrey);
    --bgcolor2: var(--color-lightgrey);
    --link-color2: var(--color-yellow);

    --fgcolor3: var(--color-lightblue);
    --bgcolor3: var(--color-blue);
    --link-color3: var(--color-green);

    --fgcolor4: var(--color-white);
    --bgcolor4: var(--color-black);
    --link-color3: var(--color-lightred);

}


/* change */

body {
    font-family: PetMe1282Y, "Pet Me 128 2Y", Helvetica, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.75em;
    font-size: large;
    padding: 1em;
    /*   padding: 0; */

    background-color: var(--bgcolor3);
    color: var(--fgcolor3);

    border-width: 1em 0;
    border-color: var(--fgcolor3);
    border-style: solid;
}


body.home {
    font-family: PetMe1282Y, "Pet Me 128 2Y", Helvetica, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5em;
    font-size: large;
    padding: 0;

    background-color: var(--bgcolor3);
    color: var(--fgcolor3);

    border-width: 1em 0;
    border-color: var(--fgcolor3);
    border-style: solid;
}

@media (min-width: 768px) {
    body {
        font-size: large;
        max-width: 768px;
        margin: auto;

        background-color: var(--bgcolor3);
        color: var(--fgcolor3);

        border-width: 1em 0;
        border-color: var(--fgcolor3);
        border-style: solid;
    }
}

h1, h2, h3, h4, h5, h6 {
    color: var(--bgcolor3);
    line-height: 1.5em;
    border-width: 0.25em;
    border-top-color: var(--bgcolor3);
    border-top-style: solid;
    border-left-color: var(--bgcolor3);
    border-left-style: dashed;
    border-bottom-color: var(--bgcolor3);
    border-bottom-style: solid;
    background-color: var(--fgcolor3);
    padding: 0.5em;
    letter-spacing: 0.03em;
    margin: 1.5em 0em 0.5em;
}


body > h1 {
    color: var(--bgcolor2);
    background-color: var(--fgcolor1);
    line-height: 1.5em;
    border-color: var(--bgcolor2);
    margin-top: 0;
    /*   border-bottom-style: solid; */
    /*   padding: 0 .5em; */
    /*   letter-spacing: 0.3em; */
}


:any-link {
    text-decoration: none;
    color: var(--link-color1);
    border-bottom-width: 0.3em;
    border-bottom-color: var(--link-color1);
    border-bottom-style: solid;
    padding: 0.25em 0 0.25em 0;
}

h2 {
    /*   color: var(--color-lightgrey); */
}

hr {
    border-width: 0.25em 0;
    border-color: var(--fgcolor3);
    border-style: solid;
    margin: 5em 3em;
    height: 1em;
}


ol, ul {
    margin: 1em 0;
}

body.da-home ol, body.da-home ul {
    margin-bottom: 2em;
}

ol li, ul li {
    margin-top: 1em;
}

ol li + li, ul li + li {
    margin-top: 2em;
}


pre, code {
    font-family: PetMe1282Y;
    color: var(--color-green);
    background-color: var(--color-black);
}

pre {
    padding: 0.5em;
    border-color: var(--color-green);
    border-top-style: solid;
    border-bottom-style: solid;
}

header.category-index {
    max-width: 100%;
    max-height: 80vh;
    overflow: hidden;
}

img.category-index {
    width: 100%;
    height: auto;
    display: block;
}

header.category-index + h1 {
    margin: 0;
    padding-top: .2em;
}

footer {
    color: var(--bgcolor3);
    background-color: var(--bgcolor4);
    border: .25em solid var(--fgcolor3);
    /*   margin: 1em; */
    /*   margin-top:1em; */
    padding: 0.25em 1em;
}

footer ul, footer ol {
    margin: 1em 0 !important;;
    padding: 0;
}

footer li {
    /*   color: var(--fgcolor1); */
    display: inline-block;
    margin: 0 0 0 .5em;
    padding: 0;
}

footer li + li {
    margin: 0 0 0 0.5em;
    padding: 0;
}

footer li a:any-link {
    /*   background-color: var(--fgcolor3); */
    /*   border: 8px solid var(--bgcolor3); */
    /*   padding: 1em; */
    /*   margin-right: 1em; */
    /*   border-bottom-width: 0; */
    text-decoration: none;
    display: inline-block;
    border: none;
}

footer li a:any-link::before {
    content: "→";
    /*   margin-right:0.25em; */
    /*   font-size: larger; */
}

#bg-grid {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    height: auto;
    width: auto;
    display: flex;
    pointer-events: none;
    flex-direction: column;
}

/* #keyframes */
@keyframes bgGridMovement {
    0% {
        transform: scale(1.5) rotate3d(0, 0, 0, 0deg);
    }

    50% {
        transform: scale(5) rotate3d(0, 0.5, 1, 360deg);
    }

    100% {
        transform: scale(1.5) rotate3d(0, 0, 0, 0deg);
    }
}

#bg-grid img {
    min-width: 100%;
    min-height: 100%;
    flex: 1;
    animation-name: bgGridMovement;
    animation-duration: 240s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    opacity: 0.1;
}

/* index page promo grid - EF 2022-05-30 */
.grid {
    display: flex;
    overflow: visible;
    flex-direction: column;
    height: 80vh;
    margin: 0;
    border-color: var(--fgcolor3);
    border-style: solid;
    border-width: 0;
    border-top-width: 0.5em;
    border-bottom-width: 0.5em;
}

.grid-block {
    border-color: var(--fgcolor3);
    border-style: solid;
    flex: 1;
}

.grid-block + .grid-block {
    border-color: var(--fgcolor3);
    border-style: solid;
    border-width: 0;
    border-top-width: 0.5em;
}

.image-grid {
    display: flex;
    flex-wrap: wrap;
    max-height: 60vh;
    min-height: 30vh;
    overflow: hidden;
    border: 1em var(--fgcolor3) solid;
    margin-bottom: 1em;
}

.image-grid-item {
    flex-grow: 1;
    object-fit: contain;
    /*   overflow: hidden; */
}

.max-width-33 {
    max-width: calc(100% / 3);
    max-height: calc(100% / 3);
}

.image-grid-item > a > img {
    display: inline-block;
    /*   width: 100%; */
    max-height: 100%;
    width: 100%;
    object-fit: cover;
    vertical-align: bottom;
    align-self: center;
}

.image-grid-item > a {
    border-bottom: 0;
}


body > p > a > img {
    border-color: var(--fgcolor3);
    border-style: solid;
    border-width: 3em;
}

body.file-browser #navigation {
    padding: 1em;
    font-size: small;
    background-color: var(--fgcolor3);
    color: var(--fgcolor1);
}

body.file-browser #listing {

}

body.file-browser #listing table {
    padding: 1rem;
    background-color: var(--fgcolor2);
    border-collapse: collapse;
    width: 100%;
}

body.file-browser #listing table th {
    text-align: left;
    padding: .5rem;
    background-color: var(--fgcolor1);
    font-size: 0.9rem;
    text-transform: uppercase;
}

body.file-browser #listing table tr {
    border-color: var(--fgcolor1);
    color: var(--bgcolor1);
    border-width: .5rem;
    border-style: solid;
}

body.file-browser #listing table td {
    text-align: left;
    padding: .5rem;
    border-color: var(--fgcolor1);
    color: var(--bgcolor1);
    border-width: .4rem;
    border-style: solid;
    font-size: 1rem;
}