@font-face {
    font-family: "basiic";
    src: url("../fonts/basiic.ttf");
}

@font-face {
    font-family: "firacode";
    src: url("../fonts/FiraCode-Regular.ttf");
}

@font-face {
    font-family: "cheese";
    src: url("../fonts/MouldyCheeseRegular.ttf");
}

@font-face {
    font-family: "0xProto";
    src: url(https://humantooth.neocities.org/fonts/0xProto-Regular.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "NeoDgm";
    src: url(../fonts/neodgm_pro.woff) format("woff");
    font-weight: normal;
    font-style: normal;
}

body {
    /*
    background-image: url("../pics/LND204.JPG");
    background-size: cover;
    */
    background-image: url("../pics/starsforever.gif");
    /*background-size: contain;*/

    color: var(--text);
    font-family: "NeoDgm", Verdana, Geneva, Tahoma, sans-serif;
}

a:link {
    color: var(--bright-blue);
}

a:visited {
    color: var(--light-purple);
}
a:hover {
    color: white;
}

.shiny-purple {
    backdrop-filter: blur(15px);
    border-image: url("../pics/gui/buttonzpurp.gif");
    border-style: solid;
    border-image-slice: 7 7 7 7;
    border-image-width: 7px 7px 7px 7px;
    background-color: hsla(275, 100%, 12%, 0.6);
}

.shiny-blue {
    backdrop-filter: blur(15px);
    border-image: url("../pics/gui/buttonzblu.gif");
    border-style: solid;
    border-image-slice: 7 7 7 7;
    border-image-width: 7px 7px 7px 7px;
    background-color: var(--deep-purple-clear);
}

.shiny-green {
    backdrop-filter: blur(15px);
    border-image: url("../pics/gui/buttonzgrn.gif");
    border-style: solid;
    border-image-slice: 7 7 7 7;
    border-image-width: 7px 7px 7px 7px;
    background-color: var(--deep-aqua-clear);
}

.shiny-red {
    backdrop-filter: blur(15px);
    border-image: url("../pics/gui/buttonzred.gif");
    border-style: solid;
    border-image-slice: 7 7 7 7;
    border-image-width: 7px 7px 7px 7px;
    background-color: hsla(0, 100%, 12%, 0.6);
}

.shiny-gold {
    backdrop-filter: blur(15px);
    border-image: url("../pics/gui/buttonzgold.gif");
    border-style: solid;
    border-image-slice: 7 7 7 7;
    border-image-width: 7px 7px 7px 7px;
    background-color: hsla(25, 100%, 12%, 0.6);
}

.glassy-blue {
    background-color: var(--deep-purple);
    backdrop-filter: blur(15px) brightness(50%);
    border-radius: 20px;
    box-shadow:
        inset -12px -12px 16px 0px hsla(224, 100%, 20%, 1),
        inset 0px 11px 28px 0px hsl(224, 50%, 50%);
}

.glassy-deep-pink {
    backdrop-filter: blur(15px) brightness(50%);
    background-color: var(--deep-pink);
    border-radius: 25px;
    box-shadow:
        inset -12px -12px 16px 0px hsla(0, 100%, 0%, 0.6),
        inset 0px 11px 28px 0px hsl(325, 100%, 50%);
}

.glassy-aqua {
    backdrop-filter: blur(15px) brightness(50%);
    background-color: var(--deep-aqua);
    border-radius: 25px;
    box-shadow:
        inset -12px -12px 16px 0px hsla(0, 0%, 0%, 0.6),
        inset 0px 11px 28px 0px hsl(174, 100%, 50%);
}

.glassy-orange {
    backdrop-filter: blur(15px) brightness(50%);
    background-color: hsla(28, 100%, 20%, 1);
    border-radius: 25px;
    box-shadow:
        inset -12px -12px 16px 0px hsla(0, 0%, 0%, 0.6),
        inset 0px 11px 28px 0px hsl(28, 100%, 50%);
}

.glassy-pink {
    backdrop-filter: blur(15px) brightness(50%);
    border-radius: 25px;
    background-color: hsla(300, 100%, 15%, 1);
    box-shadow:
        inset -12px -12px 16px 0px hsla(0, 0%, 0%, 0.6),
        inset 0px 11px 28px 0px hsl(300, 100%, 50%);
}

.glassy-green {
    backdrop-filter: blur(15px) brightness(50%);
    border-radius: 25px;
    background-color: hsla(120, 100%, 10%, 1);
    box-shadow:
        inset -12px -12px 16px 0px hsla(0, 0%, 0%, 0.6),
        inset 0px 11px 28px 0px hsl(120, 100%, 50%);
}

.glassy-red {
    backdrop-filter: blur(15px) brightness(50%);
    border-radius: 25px;
    background-color: hsla(0, 100%, 15%, 1);
    box-shadow:
        inset -12px -12px 16px 0px hsla(0, 0%, 0%, 0.6),
        inset 0px 11px 28px 0px hsl(0, 100%, 50%);
}

glassy-purple {
    backdrop-filter: blur(15px) brightness(50%);
    border-radius: 25px;
    background-color: hsl(28th 0, 100%, 15%);
    box-shadow:
        inset -12px -12px 16px 0px hsla(0, 0%, 0%, 0.6),
        inset 0px 11px 28px 0px hsl(280, 100%, 50%);
}

.clay-white {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 100px;
    box-shadow:
        inset -12px -12px 16px 0px rgba(145, 192, 255, 0.6),
        inset 0px 11px 28px 0px rgb(255, 255, 255);
}

.marquee {
    /*padding: 0.5rem 0 0.5rem 0;*/
    /*border: double;*/
    /*border-color: rgb(186, 68, 137);*/
    border-width: 7px;
    /*border-radius: 0;*/
}

.dictionary {
    /*border: 4px groove var(--border);*/
    font-family: "Times New Roman", Times, serif;
    background: linear-gradient(rgb(137, 0, 80), var(--deep-pink));
    padding: 0 0.5rem;
}

li {
    list-style-image: url("../pics/gui/bullgrn.gif");
}

:root {
    --text: white;
    --border: var(--bright-orange);
    /*from fusions pallete in https://comigo.itch.io/palettes*/
    --bright-orange: #d88944;
    --deep-purple: #001652;
    --deep-purple-clear: hsla(224, 100%, 16%, 0.6);
    --pink: #f2709c;
    --cool-deep-gray: #0a1e24;
    --deep-pink: #3c0023;
    --deep-pink-clear: hsla(325, 100%, 12%, 0.6);
    --deep-aqua: #00201d;
    --deep-aqua-clear: hsla(174, 100%, 6%, 0.6);
    --deep-blue: #001e2b;
    --bright-blue: #00aae2;
    --cyan: #006587;
    --lavender: #ab8def;
    --light-purple: #876cd0;
    --purple: #5f50ac;
}

/* cool red button */
.button-19 {
    /*background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.13)), radial-gradient(90% 7% at 50% 8%, rgba(255, 255, 255, 0.47) 25%, rgba(255, 255, 255, 0) 50%), #0053d0;*/
    /*og hex: 0053d0 003f9d 002a6a*/
    background: #d00000;
    border: 0;
    border-radius: 0.375em;
    box-shadow:
        0.2em 0.2em 0.5em rgba(0, 0, 0, 0.47),
        0 -0.1em 0 0.1em rgba(0, 0, 0, 0.27),
        0 0.1em 0 0.1em rgba(255, 255, 255, 0.27),
        -0.2em 0 0.2em #9d0000 inset,
        0 0.2em 0.2em rgba(255, 255, 255, 0.27) inset,
        0.2em 0 0.2em rgba(255, 255, 255, 0.27) inset,
        0 -0.2em 0.2em #9d0000 inset;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    margin: 0 auto;
    padding: 0.75em 1em;
    /*text-shadow: 0 0 0.2em rgba(255, 255, 255, 0.47);*/
    transition-property: box-shadow;
    -webkit-tap-highlight-color: transparent;
}
.button-19,
.button-19 span {
    display: block;
    transition-duration: 0s;
    transition-timing-function: linear;
}
.button-19:focus,
.button-19 span:focus {
    outline: none;
}
.button-19 span {
    transition-property: transform;
    will-change: transform;
}
.button-19:active {
    box-shadow:
        0 0 0 rgba(0, 0, 0, 0.47),
        0 -0.1em 0 0.1em rgba(0, 0, 0, 0.27),
        0 0.1em 0 0.1em rgba(255, 255, 255, 0.27),
        -0.2em 0 0.2em #002a6a inset,
        0 0.2em 0.2em rgba(0, 0, 0, 0.27) inset,
        0.2em 0 0.2em rgba(0, 0, 0, 0.27) inset,
        0 -0.2em 0.2em #6a0000 inset;
}
.button-19:active span {
    transform: scale(0.95);
}
.button-19:focus {
    color: #9dc4ff;
    text-shadow: 0 0 0.2em rgba(157, 196, 255, 0.47);
}