::selection {
    background-color: var(--black); 
    color: var(--white);
}

::-moz-selection {
    background-color: var(--black); 
    color: var(--white);
}

a:link, a:visited{
    color: rgb(from var(--black) r g b / 0.8);
}

body {
    background-color: var(--light-white);
    font-family: Arial, sans-serif;
}
header {
    background-color: var(--grad-normal);
}

header .button {
    background-color: inherit;
    border-color: var(--grad-saturated);
}

header .button:hover {
    background-color: var(--white);
    border-color: var(--grad-deep);
    font-weight: bold;
    border: 3px solid;
    transition: 0.3s;
}

footer {
    color: var(--black);
    background-color: var(--grad-normal);
}

footer .button {
    background-color: var(--white);
    border-color: var(--grad-deep);
    border: 2px dotted;
    transition: 0.3s;
}

footer .button:hover {
    border: 2px dotted;
    background-color: var(--dark-white);
    color: var(--dark-black);
    transition: 0.3s;
}

content {
    color: var(--black);
    background-image: url('../resource/matcha.svg');
    background-repeat: repeat;
    background-color: rgb(from var(--light-white) r g b / 0.4); /* Adjust alpha for transparency */
    background-blend-mode: overlay;
}

dialog {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    border: 2px solid var(--grad-deep);
    background-color: var(--light-white);
}

dialog .button {
    background-color: var(--white);
    transition: 0.3s;
}

dialog .button:hover {
    background-color: var(--dark-white);
    transition: 0.3s;
}


.art-text { /* Artistic text style */
    font-family: "Playwrite DE SAS";
    font-weight: bold;
    letter-spacing: 0.05em;
}
.mono-text {
    font-family: "Courier New", Courier, monospace;
}
.web-text {
    font-family: "Futura", sans-serif;
}
.normal-text {
    font-family: Arial, sans-serif;
}
.color-text {
    color: var(--grad-saturated);
}
.black-text {
    color: var(--black)
}
.accent-text {
    color: var(--accent-saturated);
}
.gray-text {
    color: var(--standard-gray);
}
.basic-overlay {
    background-color: rgb(from var(--grad-normal) r g b / 0.6);
}
.white-overlay {
    background-color: rgb(from var(--pure-white) r g b / 0.7);
}
.accent-div, .accent-div-hoverable{
    background-color: var(--light-white) !important;
    border-color: var(--accent-saturated) !important;
    color: var(--accent-saturated) !important;
}
.accent-div-hoverable:hover {
    background-color: var(--accent-saturated) !important;
    color: var(--pure-white) !important;
    transition: 0.3s;
}
.color-div, .color-div-hoverable{
    background-color: var(--light-white) !important;
    border-color: var(--grad-saturated) !important;
    color: var(--grad-saturated) !important;
}
.color-div-hoverable:hover {
    background-color: var(--grad-saturated) !important;
    color: var(--pure-white) !important;
    transition: 0.3s;
}
.grad-div, .grad-div-hoverable{
    background-color: var(--pure-white) !important;
    border-color: var(--grad-deep) !important;
    color: var(--grad-deep) !important;
}
.grad-div-hoverable:hover {
    background-color: var(--grad-deep) !important;
    color: var(--pure-white) !important;
    transition: 0.3s;
}
.dark-div, .dark-div-hoverable{
    background-color: var(--white) !important;
    border-color: var(--black) !important;
    color: var(--black) !important;
}
.dark-div-hoverable:hover {
    background-color: var(--black) !important;
    color: var(--pure-white) !important;
    transition: 0.3s;
}
.normal-div, .normal-div-hoverable{
    background-color: var(--white) !important;
    border-color: var(--black) !important;
    color: var(--black) !important;
}
.normal-div-hoverable:hover {
    background-color: var(--black) !important;
    color: var(--pure-white) !important;
    transition: 0.3s;
}
.light-div, .light-div-hoverable{
    background-color: var(--light-white) !important;
    border-color: var(--black) !important;
    color: var(--black) !important;
}
.light-div-hoverable:hover {
    background-color: var(--black) !important;
    color: var(--pure-white) !important;
    transition: 0.3s;
}
.black-div, .black-div-hoverable{
    background-color: var(--pure-white) !important;
    border-color: var(--dark-black) !important;
    color: var(--dark-black) !important;
}
.black-div-hoverable:hover {
    background-color: var(--dark-black) !important;
    color: var(--pure-white) !important;
    transition: 0.3s;
}
.gray-div, .gray-div-hoverable{
    background-color: var(--light-white) !important;
    border-color: var(--standard-gray) !important;
    color: var(--standard-gray) !important;
}
.gray-div-hoverable:hover {
    background-color: var(--standard-gray) !important;
    color: var(--pure-white) !important;
    transition: 0.3s;
}
.accent-div-hoverable, .color-div-hoverable, .grad-div-hoverable, .dark-div-hoverable, .normal-div-hoverable, .black-div-hoverable, .gray-div-hoverablem, .light-div-hoverable{
    transition: 0.3s;
}

.accent-select:focus, .accent-select:focus-visible, .accent-select:focus-within{
    outline: none; /* Remove default outline, as we use border highlighting */
    border-color: var(--accent-saturated);
    box-shadow: 0 0 5px var(--accent-saturated);
}

@font-face {
    font-family : "Playwrite DE SAS";
    src: url("../font/PlaywriteDESAS.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

.animated-pink {
    animation: flashPinkWhite 2s infinite;
}

@keyframes flashPinkWhite {
    0% { color: var(--grad-saturated); background-color: inherit; }
    50% { color: var(--pure-white); background-color: var(--grad-saturated); }
    100% { color: var(--grad-saturated); background-color: inherit; }
}

.button-binary-row .button {
    background-color: var(--light-white);
    border-color: var(--accent-saturated);
    color: var(--accent-saturated);
    transition: 0.3s;
}

.button-binary-row .button:hover {
    background-color: var(--accent-saturated);
    border-color: var(--accent-saturated);
    color: var(--light-white);
    transition: 0.3s;
}