body {
    background-image: url("../pics/starsforever.gif");
	background-size: 12%;
    
    color: var(--text);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

section {
    /*border: 1px groove var(--border);*/
    border-image: url("../pics/gui/buttonzpurp.gif");
    border-style:  solid;
    border-image-slice: 7 7 7 7;
    border-image-width: 7px 7px 7px 7px;
    /*border-image-outset: 7px 7px 7px 7px;*/
    border-image-repeat: stretch stretch; 
    padding: 7px;
    
    
    background-color: var(--deep-purple-clear);
}


header {
    border-image-repeat: stretch stretch; 
    
    /*background: url('../pics/background.png');*/
	background-size: 70%;
    
    border-radius: 100px;
    box-shadow: inset -12px -12px 36px 0px hsla(28, 65%, 56%, 0.2), inset 0px 11px 28px 0px hsl(28, 50%, 50%);
}

nav a {
    /*
    border-image: var(--block-border);
    border-style: solid;
    border-radius: 5px;
    background-color: var(--deep-pink);
    */
    background: url("../pics/gui/rectred.gif");
    background-size: 100% 100%;
}

.glassy-blue {
    background-color: var(--deep-purple-clear);
    
    border-image: none;
    border-style: none;
    backdrop-filter: blur(2px); 
    border-radius: 20px; 
    box-shadow: inset -12px -12px 16px 0px hsla(224, 100%, 25%, 0.6), inset 0px 11px 28px 0px hsl(224, 50%, 50%);
    
    /*
    backdrop-filter: blur(1px);
    border-radius: 50px;
    box-shadow: inset -12px -12px 16px 0px rgba(216, 137, 68, 0.6), inset 0px 11px 28px 0px rgb(255, 255, 255);
    background-color: var(--bright-orange)
    */
}

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

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

.glassy-orange {
    border-image: none;
    border-style: none;
    backdrop-filter: blur(2px); 
    background-color: hsla(28, 100%, 20%, 0.6); 
    border-radius: 25px;
    box-shadow: inset -12px -12px 16px 0px hsla(28, 100%, 56%, 0.6), inset 0px 11px 28px 0px hsl(28, 75%, 60%);
}

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

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

.glassy-red {
    border-image: none;
    border-style: none;
    backdrop-filter: blur(2px); 
    border-radius: 25px; 
    background-color: hsla(0, 100%, 15%, 0.6);
    box-shadow: inset -12px -12px 16px 0px hsla(0, 100%, 30%, 0.6), inset 0px 11px 28px 0px hsl(0, 50%, 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: .5rem 0 .5rem 0;
    border: double;
    border-color: rgb(186, 68, 137);
    border-width: 4px;
    border-radius: 0;
}

.dictionary {
    border: 4px groove var(--border);
    font-family: 'Times New Roman', Times, serif; margin: 5px;
    background: linear-gradient(rgb(137, 0, 80), var(--deep-pink));
}  

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: rgba(0, 22, 82, .6);
	--pink: #f2709c;
	--cool-deep-gray: #0a1e24;
	--deep-pink: #3c0023;
    --deep-pink-clear: rgba(60, 0, 35, .6);
	--deep-aqua: #00201d;
	--deep-aqua-clear: rgba(0, 32, 29, 0.6);
	--deep-blue: #001e2b;
    --bright-blue: #00aae2
    --lavender: #ab8def
}

/* CSS */
.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);
}