@font-face {
    font-family: mainText;
    src: url(https://files.catbox.moe/eq2v8o.otf);
}
* {
    color: var(--blue);
    font-size: 16px;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    user-select: none;
    font-family: 'mainText' , Verdana, Geneva, Tahoma, sans-serif;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    overscroll-behavior: none;
    -webkit-text-size-adjust: none;
    font-size: 16px;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
}
body, html, :root {
    background-image: linear-gradient(-45deg, var(--lighter-cyan), rgba(var(--lighter-magenta-value), 0.7), var(--lighter-blue)), url("https://dnl2000.neocities.org/images/checkers.png"), linear-gradient(var(--lighter-magenta));
    background-size: auto, 200px;
    height: 100%;
    width: 100%;
    transform-origin: top left;
    background-color: var(--black);
    background-attachment: fixed;
    animation: gridScroll 20s linear infinite;
}
@keyframes gridScroll {
    0% {
        background-position: center, 0px 0px;
    }
    100% {
        background-position: center, 200px 200px;
    }
}
.cols {
    grid-gap: 10px;
    grid-template-columns: 0fr 1fr;
}
section, header {
    background-image: linear-gradient(var(--lighter-cyan), var(--lightest-magenta));
    border: var(--window-border);
    box-shadow: 5px 5px var(--shadow);
    flex-direction: column;
    padding: 3px;
    display: flex;
}
header::before {
    content: "Navigation";
    height: 22px;
}
header {
    margin-bottom: 10px;
}
h2:hover, header:hover:before {
    cursor: move;
}
h2, header::before {
    background-image: linear-gradient(to left, blue, black);
    color: white;
    line-height: 20px;
    padding: 3px;
    font-weight: normal;
    padding-left: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--darker-blue);
}
h2::after, header::after {
    background-color: transparent;
    height: 18px;
    width: 20px;
    border: 1px solid var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 3px;
    font-size: 14px;
    padding-top: 2px;
    content: "X";
}
header::after {
    position: absolute;
    transform: translate(867px, 4px);
    color: var(--white);
}
.status, dl, nav {
    background-image: linear-gradient(to right, var(--lightest-blue), var(--white));
    margin-bottom: 0px;
    border: 1px solid var(--darker-blue);
    box-shadow: inset 3px 3px var(--shadow);
    padding: 5px 10px;
    margin-top: 3px;
}
nav{
    padding-top: 15px;
    padding-bottom: 10px;
}
.status-username, nav a {
    margin-bottom: 5px;
    font-weight: bolder;
    text-decoration: none;
    border: 1px dashed var(--blue);
    font-style: italic;
    background-color: rgba(var(--blue-value),0.1);
    color: var(--blue);
    line-height: 23px;
    text-decoration: none;
    box-shadow: 2px 2px var(--shadow);
    padding: 2px 7px 0px 7px;
    margin-top: 5px
}
.status-content {
    margin: 0px 3px;
    line-height: 23px;
    text-decoration: none;
}
p, .email {
    display: none;
}
dd, dt {
    margin-inline-start: 0px;
    margin: 8px;
    line-height: 23px;
}
b {
    font-weight: bolder;
}
dt {
    border-image: linear-gradient(to right, navy, var(--lighter-blue)) 1;
    border-width: 1px;
    border-style: solid;
    color: var(--white);
    font-weight: normal;
    background-image: linear-gradient(to right, var(--blue), transparent);
    box-shadow: 2px 2px var(--shadow);
    margin: 5px;
    padding: 2px 7px 0px 7px;
    margin-top: 10px;
}
.profile-picture {
    height: 279px;
    width: 279px;
    max-width: 279px;
    margin-top: 3px;
    border: var(--main-border);
}
.profile-picture:hover {
    filter: contrast(150%);
}
.profile-picture:active {
    filter: contrast(300%);
}
dt:hover {
    border-image: none;
    background-image: none;
    border: 1px solid var(--darker-blue);
    background-color: var(--blue);
}
.status-username:hover, nav a:hover {
    background-color: rgba(var(--blue-value),0.2);
    border-style: solid;
}
dt:active, .status-username:active, nav a:active {
    box-shadow: inset 3px 3px var(--shadow);
}
nav a {
    padding: 5px 5px;
}
.status p {
    display: block;
}
/*SCROLLBAR======================================================================================================================================================================*/
::-webkit-scrollbar {
    width: 15px;
}
::-webkit-scrollbar-track {
    background: var(--white);
    border: var(--main-border);
    box-shadow: inset 2px 2px var(--shadow);
}
::-webkit-scrollbar-thumb {
    background: var(--lighter-blue);
    border: var(--main-border);
    box-shadow: 0px 2px var(--shadow);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--light-blue);
}
::-webkit-scrollbar-thumb:active {
    box-shadow: inset 2px 2px var(--shadow);
}