/*so i found out you can use variables in css and this changes EVERYTHING*/
:root {
    --bg: #050905;
    --unhl: green;
    --hl: #00ff00;
}

body {
    background-color: var(--bg);
    color: var(--unhl);
    font-family: Terminal, Fixedsys, pixel basiic, Segoe UI;
}

#game {
    border: dashed;
    padding: 10px;
    padding-right: 15px;
    font-size: 30px;
    height: 85vh;
    overflow-y: scroll;
    scrollbar-color: var(--unhl) var(--bg);
    scrollbar-highlight-color: var(--hl);
    scrollbar-arrow-color: var(--bg);
}

.game2{
    border: dashed;
    padding: 10px;
    padding-right: 15px;
    font-size: 30px;
    height: 85vh;
    overflow-y: scroll;
    scrollbar-color: var(--unhl) var(--bg);
    scrollbar-highlight-color: var(--hl);
    scrollbar-arrow-color: var(--bg);
}

p:hover, button:hover, h1:hover, a:hover{
    color: var(--hl);
    border-color: var(--hl);
}

button {
    appearance: none;
    border: groove;
    border-color: var(--unhl);
    background: none;
    color: var(--unhl);
    font-family: pixel basiic;
    font-size: 30px;
    display: block;
    margin-bottom: 10px;
}

h1 {
    text-shadow: none;
}

#credits {
    font-size: small;
    margin-top: 10px;
    line-height: 23px;
}

a {
    color: inherit;
    text-decoration: inherit;
    border: thin groove;
    border-color: var(--unhl);
    padding: 1px;
}

a:visited {
    color: var(--unhl);
}

a:hover {
    color: var(--hl);
}

/*v CSS for making the images green v*/
.graphic {
    background-color: var(--unhl);
    background-blend-mode: luminosity;
}

.graphic:hover{
    background-color: var(--hl);
}

textarea{
    background-color: var(--bg);
    color: var(--unhl);
    border-color: var(--unhl);
    margin-bottom: 10px;
    width: 400px;
    height: 150px;
    resize: none;
    font-size: large;
}

/*.strange { called this because i don't know why i need this*/
    /*opacity: 0;*/
/*}*/
/*The stuff under here I just do a separate ID configuration for each image. If there's a better method to get the same result I don't know it.*/
#g1{
--image: url(https://capstasher.neocities.org/88x31Buttons/alliens.gif);
background-image: var(--image);
height: 31px;
width: 88px;
}
#g2{
--image: url(https://capstasher.neocities.org/88x31Buttons/glittercandybox.gif);
background-image: var(--image);
height: 31px;
width: 88px;
}
#g3{
--image: url(https://capstasher.neocities.org/88x31Buttons/ie_exploder.gif);
background-image: var(--image);
height: 31px;
width: 88px;
}
#g4{
--image: url(https://capstasher.neocities.org/88x31Buttons/anarchy-now.gif);
background-image: var(--image);
height: 31px;
width: 88px;
}

/*^ CSS for making the images green ^*/