/* Binarian-Web Copyright (C) 2025 Lyxminx and Sarahtonin

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>. */

:root {
    --NightDeep: 6, 26, 51;
    --NightLow: 23, 33, 86;
    --NightMid: 68, 48, 142;

    --NightHigh: 160, 166, 238;
    --NightShallow: 203, 204, 237;
}

/*ISSUE CHECKER

body {
    border: solid, silver, 2px;
}
main {
    border: solid, red, 1px;
}
header, nav, section, article, footer, aside {
    border: solid, yellow, 1px;
}
figure, details, mark, summary, time {
    border: solid, lime, 1px;
}
img, map, ul, table {
    border: solid, cyan, 1px;
}
h1, h2, h3, h4, h5, h6, p, li, figcaption, th, td {
    border: solid, magenta, 1px;
}*/

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: "ellograph-cf", monospace;
    font-weight: 400;
    font-style: normal;
    background-color: rgb(var(--NightLow));
    background-image: radial-gradient(circle at bottom, rgb(var(--NightMid)), rgb(var(--NightDeep)));
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}

header, footer, article {
    padding: 20px 40px 20px;
}

aside {
    background-color: rgb(var(--NightDeep));
    background-image: radial-gradient(circle at center, rgb(var(--NightDeep)), rgb(var(--NightLow)));
    max-height: 100%;
    width: 5%;
    float: left;
    outline: 5px solid rgb(var(--NightHigh));
}

nav {
    max-width: 70%;
    height: fit-content;
    margin: auto;
}

figure {
    justify-content: center;
    margin-bottom: 45px;
    height: fit-content;
}

img {
    width: 80%;
    border: solid, rgb(var(--NightShallow)), 5px;
    border-radius: 10px;
    transition: all 400ms ease-in-out;
}

img:hover {
    border: solid, rgb(var(--NightHigh)), 5px;
    border-radius: 30px;
    transition: all 400ms ease-in-out;
}

main {
    height: 90%;
    width: 90%;
    flex-wrap: nowrap;
    margin: auto;
}

header, footer {
    max-height: 5%;
    max-width: 100%;
}

a, p, li, strong, span, h1, h2, h3, h4, h5, h6, figcaption{
    color: rgb(var(--NightShallow));
    width: fit-content;
    margin: 10px;
}

a {
    color: rgb(var(--NightHigh));
    text-underline-offset: 4px;
}

strong {
    font-weight: 900;
}

span {
    font-size: 4px;
}

figure a {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: 0;
}

.Title {
    text-decoration: underline;
    text-underline-offset: 15px;
}

input {
    font-family: "ellograph-cf", monospace;
    font-weight: 400;
    font-style: normal;
    background-color: rgb(var(--NightDeep));
    border: solid, rgb(var(--NightShallow)), 5px;
    border-radius: 10px;
    padding: 5px;
    color: rgb(var(--NightShallow));
}

::placeholder {
    font-family: "ellograph-cf", monospace;
    font-weight: 400;
    font-style: italic;
    color: rgb(var(--NightShallow));
}

button {
    font-family: "ellograph-cf", monospace;
    font-weight: 400;
    font-style: normal;
    background-color: rgb(var(--NightLow));
    border: solid, rgb(var(--NightShallow)), 5px;
    border-radius: 10px;
    padding: 5px;
    color: rgb(var(--NightShallow));
    transition: all 400ms ease-in-out;
}

button:hover {
    border: solid, rgb(var(--NightHigh)), 5px;
    border-radius: 30px;
    transition: all 400ms ease-in-out;
}