@import url(main.css);
body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    line-height: 1.5;
    padding: 0.5rem 1rem 1rem;
    overflow-y: hidden;
}
html {
    background-color: black;
    overflow-y: hidden;
}
section {
    border: 3px double white;
    padding: 0.25rem;
    box-shadow: 0.25rem 0.25rem 0 blue;
    display: flex;
    flex-direction: column;
    background-color: black;
}
article {
    border: 1px solid white;
    padding: 0.5rem;
    box-shadow: inset 0.125rem 0.125rem 0 blue;
    display: flex;
    flex-direction: column;
}
header {
    background: linear-gradient(black, black 33%, white 33%, white 67%, black 67%, black);
    justify-content: center;
    display: flex;
    margin: 1.25rem 0 1.5rem;
    user-select: none;
    border: 1px solid white;
    filter: drop-shadow(0.25rem 0.25rem 0 blue);
}
header:hover {
    background: linear-gradient(blue, blue 33%, white 33%, white 67%, blue 67%, blue);
}
header:active {
    background: white;
}
header span {
    background-color: white;
    font-size: 1.5rem;
    color: black;
    font-family: "MCB", monospace;
    text-shadow: none;
    padding: 0.25rem 1rem 0;
    outline: 1px solid white;
    outline-offset: 0.5rem;
}
section:hover, article:hover {
    border-color: cyan;
}
.emptyFill {
    display: flex;
    flex: 1;
    border: 1px solid white;
    box-shadow: 0.25rem 0.25rem 0 blue;
    background-image: --stripe(135deg, white, black, 1rem, 1rem);
    background-size: 200vw auto;
    cursor: not-allowed;
    animation: emptyAnimation 4s linear infinite;
}
@keyframes emptyAnimation {
    0% {
        background-position-x: 100vw;
    }
    100% {
        background-position-x: calc(100vw + 2.828rem);
    }
}
.emptyFill:hover {
    background-image: --stripe(135deg, white, blue, 1rem, 1rem);
}
.emptyFill:active {
    background: white;
}
.boxContainer {
    display: flex;
    flex-direction: column;
}
h3 a:hover, h3 a:hover * {
    color: white;
}
h1 {
    background-color: white;
    font-weight: normal;
    font-size: 1rem;
    color: black;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
    user-select: none;
    text-shadow: none;
    border: 1px solid white;
}
h2 {
    background-image: linear-gradient(to right, white, white 40%, cyan 45%, blue 60%, blue 70%, black, black);
    border: 1px solid white;
    font-weight: normal;
    font-size: 1rem;
    color: black;
    padding: 0.125rem 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0.125rem 0.125rem 0 blue;
    user-select: none;
    text-shadow: none;
}
h2:hover {
    background: white;
}
h1:hover, h2:active {
    background: cyan;
    border: 1px solid cyan;
}
h3, summary {
    border: 1px dotted white;
    font-weight: normal;
    font-size: 1rem;
    padding: 0.25rem 0.625rem;
    margin-bottom: 0.25rem;
    box-shadow: 0.125rem 0.125rem 0 blue;
    text-shadow: 0 1px 0 blue;
    font-family: "MCB", monospace;
    user-select: none;
}
h3:hover, summary:hover {
    background-color: blue;
}
h3:active, h3:active *, summary:active {
    background-color: white;
    color: black;
    text-shadow: none;
}
summary {
    cursor: pointer;
    margin-bottom: 0.5rem;
    border-style: solid;
}
details:has(summary.content):open {
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed white;
}
hr {
    margin: 0.75rem 0 0.5rem;
    border: none;
    border-top: 1px dashed white;
    filter: drop-shadow(0.25rem 0.25rem 0 blue);
}
.button {
    box-shadow: 0.125rem 0.125rem 0 blue;
    border: 1px solid white;
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: pointer;
}
.button:hover {
    background-color: blue;
}
.button:active {
    background-color: white;
    text-shadow: none;
    color: black;
}
table {
    border: 1px solid white;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
th, td {
    padding: 0.25rem 0.5rem;
    border: 1px solid white;
    white-space: nowrap;
}
th {
    color: black;
    text-shadow: none;
    background-color: white;
    font-weight: normal;
    border-right-color: black;
}
th:last-child {
    border-right-color: white;
}
.blogImg {
    width: 100%;
    border: 3px double white;
    box-shadow: 0.25rem 0.25rem 0 blue;
    margin-bottom: 0.5rem;
}
::-webkit-scrollbar {
    width: 1rem;
}
::-webkit-scrollbar-track {
    background: black;
    border: 1px solid white;
}
::-webkit-scrollbar-thumb {
    background-color: black;
    border: 1px solid white;
}
::-webkit-scrollbar-thumb:hover {
    background-color: blue;
}
::-webkit-scrollbar-thumb:active {
    background-color: white;
}
@media (max-width: 768px) {
    .mobileOptimizedGrid {grid-template-columns: 1fr !important;}
    .emptyFill {
        display: none;
    }
}