@import url("fonts/inter/inter.css");

@font-face {
    font-family: "ibmvga";
    src: url("fonts/ibmvga/ibmvga.woff") format("woff");
}

@font-face {
    font-family: "code-new-roman";
    src: url("fonts/code-new-roman/code-new-roman.woff") format("woff");
}

/* 
PALETTE
bacground #011121
background dark #040406
highlight yellow #faf136
highlight purple #b05abd
highlight light #d3fcf4

chat green #41f9ef
chat blue #faf136

*/

body {
    background-color: #011121;
    color: #F5F0F6;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 1em;

    min-height: 100vh;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    margin: 0;
    padding: 0;
}

article {
    margin: 1em;
    margin-top: 0;
    /* margin: 0 auto; */
    max-width: min(50em, 100%);
    overflow-x: hidden;
    place-self: center;
    box-sizing: border-box;
    padding: 1em;
    padding-top: 0;
}

footer {
    margin-top: auto;
    text-align: center;
    margin-bottom: 0.2em;
}

img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: min(60em, 95vw);
    max-height: min(60em, 80vh);
}

video {
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: min(60em, 95vw);
    max-height: min(60em, 80vh);
}

a,
.link,
.blue {
    color: #10b0fa;
    /* text-decoration-color: #10b0fa; */
}

a:hover,
.link:hover,
.blue-lighter {
    color: #c0eaff;
    /* text-decoration-color: #10b0fa; */
}

a.glow:hover {
    text-shadow: 0 0 0.2em #10b0fa;
}

.glow-always {
    text-shadow: 0 0 0.2em #10b0fa;
}

.transparent:not(:hover) {
    opacity: 0.6;
}

a::after,
.link-after,
.blue-darker {
    color: #3562d6;
}

blockquote {
    font-style: italic;
}

h1,
h2,
h3,
h4,
h5,
h6,
.ibmvga {
    font-family: "ibmvga";
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

h1 {
    text-decoration: #faf136 underline;
}

h2 {
    text-decoration: #b05abd underline;
    margin-bottom: 0.5em;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.7em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.2em;
}

h5 {
    font-size: 1em;
}

li {
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 0.3em;
}



ul,
ol {
    padding-left: 1em;
}

/* ol ul,
ul ol,
ul ul,
ol ol {
    padding-left: 1em; 
} */

ul li {
    padding-inline-start: 1ch;
    list-style-type: ">";
}

li::marker,
ol::marker {
    font-family: "ibmvga";
}

.codehilite {
    font-size: 1.1em;
    background-color: #040406;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    margin-bottom: 1em;
    border: 1px solid #999;
    border-radius: 0.5em;
    overflow-x: scroll;
    font-family: 'code-new-roman', monospace;
    box-sizing: border-box;
    max-width: 100%;
}

.button8831 {
    display: inline;
    float: left;
    width: 88px;
    height: 31px;
    image-rendering: pixelated
}

p.buttons8831-container {
    width: auto;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 0;
    justify-content: center;
}

/* * .button8831 {
    display: inline-block;
    text-align: center;
} */

@media (max-width: 800px) {
    /* CSS that should be displayed if width is equal to or less than 800px goes here */

    .gallery {
        margin-right: 0;
        margin-left: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: center;
        /* width: 90%; */
        gap: 1em;
    }

    .gallery-less {
        margin-right: 0;
        margin-left: 0;
        display: grid;
        grid-template-columns: 1fr;
        justify-content: center;
        /* width: 90%; */
        gap: 1em;
    }
}

@media (min-width: 800px) {
    /* CSS that should be displayed if width is equal to or less than 800px goes here */

    .gallery {
        margin-right: 0;
        margin-left: 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: center;
        /* width: 90%; */
        gap: 2em;
    }

    .gallery-less {
        margin-right: 0;
        margin-left: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: center;
        /* width: 90%; */
        gap: 2em;
    }
}



.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    place-self: center;
}

.gallery video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    place-self: center;
}

.gallery-less img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    place-self: center;
}

.gallery-less video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    place-self: center;
}

code {
    font-family: 'code-new-roman', monospace;
    background-color: #040406;
    border-radius: 0.3em;
    border: 1px solid #434364;
    padding-top: 0.21em;
    padding-bottom: 0.09em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    /* padding-right: 0.2em; */
}

.codehilite code {
    background-color: inherit;
    border: inherit;
    padding: inherit;
}

/* 
chat green #41f9ef
chat blue #faf136
*/

.dms {
    background-color: #0c1218;
    padding: 1em;
    border: 1px solid #494949;
    border-radius: 0.5em;
    padding: 1em 1.5em;
}

.chatter {
    display: grid;
    grid-template-columns: min-content max-content;
    grid-template-rows: auto;
    gap: 1em;
    margin-bottom: 0;
}
.chatter-a, .chatter-b {
    font-family: "ibmvga";
    grid-row: 1 1;
    grid-column: 2 2;
    place-self: center;
}

.chatter-a {
    color: #faf136;
}
.chatter-b {
    color: #41f9ef;
}

img.chatter-avatar {
    width: 2em;
    height: 2em;
    border-radius: 1em;
    display: inline;
    grid-row: 1 1;
    grid-column: 1 1;
}

blockquote.chat-quote {
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: auto;
    margin-left: 1em;
}

blockquote.chat-quote .quote-line {
    background-color: #d3fcf4;
    width: 0.2em;
    border-radius: 0.1em;
}

blockquote.chat-quote .quote-content {
    padding-left: 0.8em;
    opacity: 0.6;
}

.dm-message {
    padding-left: 3em;
    margin-bottom: 0.5em;
    /* margin-top: 0em; */
}

p {
    margin-bottom: 1em;
    margin-top: 0.1em;
}

/* .dm-box:first-child {
    margin-top: 0;
} */

.chaosbtn {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.chaosbtn div {
    justify-self: center;
    align-self: center;
}

.chaosbtn div:nth-child(1) {
    text-align: center;
    grid-column: 1 / 2;
}

.chaosbtn div:nth-child(2) {
    grid-column: 2 / 3;
}

.chaosbtn div:nth-child(3) {
    grid-column: 3 / 4;
}