:root {
    --aqua: rgb(150, 255, 210);
    --gradient: linear-gradient(180deg, var(--mint), var(--aqua));
    --gradient-dark: linear-gradient(180deg, var(--teal), var(--turq));
    --mint: rgb(204, 255, 223);
    --teal: rgb(0, 175, 120);
    --teal-dark: rgb(0, 150, 102);
    --text: rgb(0, 90, 75);
    --turq: rgb(0, 180, 175);
    --yg: rgb(225, 255, 200); /* Yellow green */
    --chewy: 'Chewy', 'Comic Sans MS', 'Chalkboard SE', 'sans-serif';
    --happy-monkey: 'Happy Monkey', 'Comic Sans MS', 'Chalkboard SE', 'sans-serif';
    --rounded: 'M PLUS Rounded 1c', 'Short Stack', 'Arial';
    --short-stack: 'Short Stack', 'Comic Sans MS', 'Chalkboard SE', 'sans-serif';
}
::selection {
    background-color: rgba(0, 255, 174, 0.75) !important;
}
body {
    background: var(--gradient);
    color: var(--text);
    font-family: var(--short-stack);
    margin: auto;
    text-align: center;
}
footer {
    bottom: 25px;
    left: 0;
    position: fixed;
    right: 0;
}
h1 {
    color: var(--teal);
    font-family: var(--chewy);
    font-size: 32pt;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
h2 {
    color: var(--turq);
    font-family: var(--happy-monkey);
    margin-top: 50px;
}
hr {
    border-bottom: none;
    border-left: none;
    border-radius: 5px;
    border-right: none;
    border-top: solid 8px var(--teal);
    margin-bottom: 20px;
    width: 25%;
}
html {
    background-color: var(--mint);
    scrollbar-color: var(--teal) var(--mint);
}
line {
    border-bottom: none;
    border-left: none;
    border-radius: 5px;
    border-right: none;
    border-top: solid 8px var(--teal);
    margin-bottom: 20px;
    width: 25%;
}
p {
    line-height: 1.5;
}
.button {
    background: 0;
    border: 0;
    cursor: pointer;
    font-family: var(--happy-monkey);
    font-size: 14pt;
}
.button:hover {
    color: var(--teal);
    transition: color 0.15s;
}
.char {
    background-color: white;
    border-radius: 5px;
    color: black;
    cursor: pointer;
    height: 100px;
    width: 100%;
}
.char:hover {
    backdrop-filter: brightness(80%);
    .name {
        opacity: 100%;
        visibility: visible;
    }
}
.modal {
    background: var(--gradient);
    height: 100%;
    left: 0;
    /* margin: auto; */
    opacity: 0;
    /* padding: 25px; */
    padding-left: 25px;
    padding-right: 0px;
    position: fixed;
    right: 0;
    text-align: left;
    top: 0;
    transition: opacity 0.5s;
    visibility: hidden;
    width: calc(100% - 25px);
    z-index: 2;
}
.name {
    opacity: 0;
    margin-top: 5px;
    scrollbar-color: var(--teal) var(--mint);
    transition: opacity 0.25s;
    visibility: visible;
}
.selected {
    background: var(--teal-dark) !important;
}
#about > p {
    width: calc(100% - 25px);
}
#about-content {
    background: var(--gradient-dark);
    color: white;
    height: 80%;
    left: 0;
    padding: 25px;
    position: fixed;
    right: 0;
    /* width: 100%; */
}
#char {
    padding-left: 25px;
    overflow-y: auto;
    width: 100%;
}
#chars {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    justify-items: center;
    margin-left: 10%;
    margin-right: 10%;
}
#close-btn {
    background: none;
    border: 0;
    color: teal;
    cursor: pointer;
    font-family: var(--rounded);
    font-size: 24pt;
    height: fit-content;
    opacity: 50%;
    position: fixed;
    right: 25px;
    top: 25px;
    transition: font-size 0.25s, opacity 0.25s;
    width: fit-content;
    visibility: hidden;
    z-index: 3;
}
#close-btn:hover {
    font-size: 26pt;
    opacity: 100% !important;
}
#char-content {
    margin-top: 15px;
    text-align: center;
}
#char-content > * {
    display: inline-block;
    margin: auto;
    width: 40%;
}
#image {
    height: auto;
}
#info {
    background: var(--gradient-dark);
    border-radius: 10px 10px 0 0;
    bottom: 0;
    color: white;
    height: 80%;
    margin: auto auto 0;
    max-width: 750px;
    overflow-y: auto;
    padding-right: 25px;
    scrollbar-color: var(--mint) var(--teal);
    width: 75%;
    /* width: calc(100% - 50px); */
    z-index: 4;
}
#info-btn {
    background: var(--turq);
    border-radius: 999px;
    bottom: 10px;
    color: white;
    cursor: pointer;
    font-family: Courier, monospace;
    font-size: 32pt;
    height: 50px;
    padding: 5px;
    position: fixed;
    right: 10px;
    transition: opacity 0.5s;
    width: 50px;
}
#info-organelle {
    color: var(--mint);
}
#menu-btns {
    display: grid;
    gap: 0px;
    grid-template-columns: 1fr 1fr 1fr;
    margin: auto;
    margin-top: 25px;
    text-align: center;
    width: 100%;
}
#menu-btns > * {
    background-color: var(--teal);
    color: white;
    padding: 5px;
    width: 100%;
}
#menu-btns > *:not(.selected):hover {
    filter: brightness(1.15);
}
#name {
    display: inline-block;
    font-weight: normal;
    letter-spacing: 0;
    text-shadow: black 1px 1px;
}
#organelle {
    margin-top: 5px;
    position: absolute;
}
#quote {
    background: none;
    display: inline-block;
    filter: brightness(0.75);
    font-family: var(--happy-monkey);
    font-size: 16pt;
    font-weight: bold;
    margin-left: 4vw;
    text-align: left;
    width: 70%;
}
#quote::before {
    content: "❝ "
}
#quote::after {
    content: " ❞"
}
#text {
    text-align: left;
}

/* @media screen and {min-width: 500px} {

} */