/*====================FONTS====================*/
@font-face {
    font-family: "MC";
    src: url("Minecraftia_regular.woff2") format("woff2");
    font-display: swap;
    font-weight: normal;
}
@font-face {
    font-family: "MC";
    src: url("Minecraftia_bold.woff2") format("woff2");
    font-display: swap;
    font-weight: bold;
}
@font-face {
    font-family: "PS2P";
    src: url("PressStart2P.woff2") format("woff2");
    font-display: swap;
}
/*====================GENERAL STYLING====================*/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    min-width: 320px;
    font-family: 'MC', monospace;
    line-height: 1.25;
    cursor: default;
    -webkit-text-size-adjust: none;
    color: #00f;
}
body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
}
html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -9999;
    background: linear-gradient(135deg, #ccf, #0000, #cff), repeating-conic-gradient(#fdf 0 90deg, #fcf 90deg 180deg);
    background-size: cover, 12rem 12rem;
}
/*====================LAYOUT====================*/
main {
    display: flex;
    gap: 0.75rem;
    flex: 1;
}
main, header, nav {
    width: 100%;
    max-width: 1200px;
}
aside {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
aside.left, aside.right {flex: 1;}
aside.mid {
    flex: 2;
    order: 2;
}
aside.left {order: 1;}
aside.right {order: 3;}
section, footer, nav, .glass {
    padding: 0.1875rem;
    border: 3px double #007;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    background: linear-gradient(#cff, #fdf);
    box-shadow: 0.25rem 0.25rem #00f5;
}
article {
    border: 1px solid #007;
    background: linear-gradient(90deg, #ddf, #fff);
    padding: 0.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0.125rem 0.125rem #00f5;
}
.nav {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: 100%;
    gap: 0.125rem;
    .button {font-style: normal;}
}
header {
    padding: 1rem 0 0;
    user-select: none;
    line-height: 1.25;
    font-family: "PS2P", monospace;
    gap: 1rem;
    font-size: 6.5rem;
    text-align: center;
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px #00f, -1px -1px #00f, -1px 1px #00f, 1px -1px #00f, 0.05em 0.05em #00f, 0 0 0.05em #00f
}
footer {
    background: linear-gradient(90deg, #cff, #ddf, #fdf);
    width: calc(100% + 1.5rem);
    border-bottom: none;
    border-left: none;
    border-right: none;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0.25rem;
}
.footerButtons {
    gap: 0.125rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.footerNote {
    padding: 0.5rem 0.5rem;
    color: #000;
    background: #fff;
    border: 1px solid #000;
    box-shadow: inset 0.125rem 0.125rem #00f5;
    margin: 0.125rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
/*====================TEXT====================*/
p, ul {
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
}
section > p {
    padding: 0.1875rem 0.375rem 0.125rem;
}
ul {list-style: none;}
li::before {content: "- ";}
a {
    color: #00f;
    text-decoration: underline;
    cursor: pointer;
    font-style: italic;
}
a:hover {color: #70f;}
hr {
    border-top: 1.5px dashed #00f;
    margin: 0.25rem 0.25rem 0.5rem;
}
h1 {
    text-align: center;
    font-size: 2.5rem;
    padding: 0.5rem 0.25rem 0.25rem;
    font-family: "PS2P", monospace;
    font-weight: normal;
    word-spacing: -0.5em;
    color: white;
    text-shadow: 1px 1px #00f7, -1px -1px #00f7, -1px 1px #00f7, 1px -1px #00f7, 0.1875rem 0.1875rem #00f;
    margin-bottom: 0.5rem;
}
h2 {
    font-size: 1rem;
    font-weight: normal;
    background: linear-gradient(90deg, #000, #00f);
    border: 1px solid #007;
    color: #fff;
    padding: 0.25rem 0.375rem;
    position: relative;
    user-select: none;
}
h2::after {
    content: "";
    position: absolute;
    width: 4.75rem;
    height: 1.5rem;
    top: 0.125rem;
    right: 0.125rem;
    background: url("windowButton.png");
    background-size: cover;
}
h3 {
    font-size: 1rem;
    font-weight: normal;
    padding: 0.25rem 0.375rem 0.125rem;
    background: linear-gradient(90deg, #00f, #fff);
    color: #fff;
    border: 1px solid;
    border-image: linear-gradient(90deg, #007, #ddf) 1;
    margin: 0.25rem;
    box-shadow: 0.125rem 0.125rem #00f5;
}
h4 {
    font-size: 1rem;
    font-weight: bold;
    padding: 0.25rem 0.375rem 0.125rem;
    background: #00f2;
    font-style: italic;
    border: 1px dashed #00f;
    margin: 0.25rem;
    box-shadow: 0.125rem 0.125rem #00f5;
}
textarea {
    resize: none;
    padding: 0.625rem;
    font-family: 'MC', monospace;
    font-size: 1rem;
    background: #eef;
    border: 1px solid #007;
    box-shadow: inset 0.125rem 0.125rem #00f5;
    margin: 0.0625rem;
    color: #00f;
}
/*====================BUTTONS====================*/
button {all: unset;}
.button, button {
    font-size: 1rem;
    padding: 0.5rem;
    text-align: center;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
    border: 1px solid #00f;
    background: linear-gradient(135deg, #fff, #ccf);
    margin: 0.125rem;
    box-shadow: 0.125rem 0.125rem #00f5;
}
.button:hover, button:hover {
    background: #ccf;
    text-decoration: underline;
    color: #00f;
}
.button:active, button:active {
    background: #bbf;
    box-shadow: inset 0.125rem 0.125rem #00f5;
}
/*====================RESPONSIVE====================*/
@media (min-width: calc(1201px + 3rem)) {aside.mid p {text-align: justify;}}
@media (max-width: 1000px) {h1 {font-size: 1.75rem;}}
@media (max-width: 768px) {
    html {font-size: clamp(14px, 4vw, 18px);}
    main {flex-direction: column;}
    .nav {grid-template-columns: 1fr 1fr;}
    header {font-size: calc(max(100vw, 320px) * 0.13);}
    h1 {font-size: 2rem;}
    aside.mid {order: 1;}
    aside.left {order: 2;}
    aside.right {order: 3;}
}
/*====================SCROLLBARS====================*/
::-webkit-scrollbar {width: 1rem;}
::-webkit-scrollbar-track {
    background: #eef;
    cursor: default;
    border-left: 1px solid #00f;
    box-shadow: inset 0.125rem 0.125rem #00f3;
}
::-webkit-scrollbar-thumb {
    border-left: 1px solid #00f;
    box-shadow: 0 1px #00f, 0 -1px #00f, 0 0.1875rem #00f3;
    background: #ccf;
    cursor: default;
}
::-webkit-scrollbar-thumb:hover {background: #aaf;}
::-webkit-scrollbar-thumb:active {box-shadow: 0 1px #00f, 0 -1px #00f, inset 0.125rem 0.125rem #00f3;}