*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
    background-color: black;
    overflow: hidden;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background-color: black;
}

#desktop-scale-root {
    position: fixed;
    left: 0;
    top: 0;

    width: 1280px;
    height: 720px;

    overflow: hidden;

    user-select: none;

    background-image: url("../../assets/graphics/images/wallpaper.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    image-rendering: auto;
}

button,
input {
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5 {
    cursor: default;
}

.mobile-wip {
    display: none;
}

.applications {
    display: grid;
    grid-template-columns: auto auto;
    width: 187px;
    padding-left: 5px;
}

.applications button {
    border: none;
    border-radius: 3px;
    color: white;

    height: 90px;

    margin: 10px 4px 0 4px;
}

.applications img {
    width: 50px;
    height: 50px;
}

.applications a {
    filter: drop-shadow(rgb(0,0,0) 0px 0px 3px);
    display: inline-block;
}

.highlighted {
    background-color: rgba(66, 112, 159, 0.5);
    outline: 1px solid rgb(66, 112, 159);

}

.none {
    background: none;
    border: none;
}

.none:hover  {
    background-color: rgba(212, 212, 212, 0.5);
    outline: 1px solid rgb(212, 212, 212);
}

.bottom-half {
    display: grid;
    grid-template-columns: auto auto;

    position: fixed;
    right: 15px;
    bottom: 55px;
    z-index: 1000;
}

.watermark {
    color: rgba(255,255,255,0.5);
    text-align: right;

    filter: drop-shadow(black 0 0 2px) drop-shadow(black 0 0 2px);
}

.watermark h2,
.watermark p {
    margin-block: 0;
    font-size: 10px;
}

footer {
    z-index: 999;
    position: fixed;

    left: 0;
    right: 0;
    bottom: -2px;

    width: 100%;
    height: 45px;

    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);

    background-color: rgba(29,24,22,0.3);
    border: 1px solid white;
    border-left: none;
    border-right: none;
    outline: 1px solid black;
    text-align: center;
    display: flex;

    cursor: default;
}

.taskbar-header {
    justify-content: space-between;
    color: white;
}

.home {
    padding-inline: 10px;
}

.home button {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 25px;

    border: 2px solid #354D61;
    background-image: radial-gradient(at top left, rgb(203, 213, 223), rgb(53, 104, 138) 59%, rgb(5, 84, 129) 61%, rgb(13, 227, 253));
    filter: drop-shadow(rgba(255,255,255,0.8) 0px 0px 3px);
}

.home img {
    margin-left: -14px; margin-top: -2px; filter: drop-shadow(black 0 0 1px)
}

.time-div {
    padding-inline: 25px 20px;
    padding-top: 7px;
    font-size: 12px;
}

.my-card-taskbar,
.my-blog-taskbar,
.my-prof-taskbar,
.my-bann-taskbar,
.my-warn-taskbar {
    background: var(--taskbar-icon) no-repeat center, linear-gradient(170deg, rgba(251,250,249,0.4) 0%, rgb(251,250,249,0.3) 10%, rgb(251,250,249,0) 40%, rgb(251,250,249,0) 60%, rgb(251,250,249,0.2) 80%, rgba(251,250,249,0.3) 100%);
    background-size: 35px, auto;
}

.my-card-taskbar-focused,
.my-blog-taskbar-focused,
.my-prof-taskbar-focused,
.my-bann-taskbar-focused,
.my-warn-taskbar-focused,
.my-card-taskbar:hover,
.my-blog-taskbar:hover,
.my-prof-taskbar:hover,
.my-bann-taskbar:hover,
.my-warn-taskbar:hover {
    background: var(--taskbar-icon) no-repeat center, linear-gradient(170deg, rgba(251,250,249,1) 0%, rgb(251,250,249,0.9) 10%, rgb(251,250,249,0.4) 40%, rgb(251,250,249,0.4) 60%, rgb(251,250,249,0.5) 80%, rgba(251,250,249,0.8) 100%);
    background-size: 35px, auto;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.my-card-taskbar,
.my-card-taskbar-focused {
    --taskbar-icon: url("../../assets/graphics/icons/my-card.ico");
}

.my-blog-taskbar,
.my-blog-taskbar-focused {
    --taskbar-icon: url("../../assets/graphics/icons/my-blog.ico");
}

.my-prof-taskbar,
.my-prof-taskbar-focused {
    --taskbar-icon: url("../../assets/graphics/icons/my-profile.ico");
}

.my-bann-taskbar,
.my-bann-taskbar-focused {
    --taskbar-icon: url("../../assets/graphics/icons/my-bann.ico");
}

.my-warn-taskbar,
.my-warn-taskbar-focused {
    --taskbar-icon: url("../../assets/graphics/icons/warning.ico");
}

footer input {
    height: 100%;
    width: 57px;
    color: transparent;

    border: 0;
    outline: 1px solid rgba(255,255,255,0.5);

    border-radius: 3px;
}

.window-outside {
    left: 220px;
    top: 173px;

    z-index: 10;
    position: absolute;
    font-size: 10px;

    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: rgba(0,0,0,0.6) 0 0 10px;

    background-image: linear-gradient(to bottom, rgba(124,109,103,0.3) 0%, rgba(251,250,249,0.7) 40%, rgba(29,24,22,0.3) 43%);
    border: 1px solid #ffffff;
    text-align: center;
    border-radius: 5px;
}

.window-header {
    cursor: move;
    z-index: 9;

    padding-inline: 10px;
    padding-bottom: 4px;

    color: #fff;

    display: flex;
    justify-content: space-between;
}

.window-hd-ident img {
    margin-top: 3px;
    margin-right: 4px;
    margin-left: -6px;
    text-align: left;
    float: left;
}

.window-hd-ident p {
    margin-top: -2px;
    text-align: right;
    float: left;
}

.window-main {
    margin-inline: 4px;
    margin-bottom: 4px;
    background-color: transparent;
    border: 1px solid black;
    border-radius: 2px;
    outline: 1px solid white;
}

.window-header p {
    padding-top: 6px;
    margin-block: 0;
    color: black;
    filter: drop-shadow(rgb(255,255,255) 0px 0px 7px) drop-shadow(rgb(255,255,255) 0px 0px 7px);
    text-shadow: white 0 0 7px;
}

.window-header button {
    height: 15px;
    color: white;

    text-shadow: 0 0 3px rgba(0,0,0,0.5);
    background-color: transparent;
    border: 1px solid black;

    outline: 1px solid white;
    filter: drop-shadow(rgba(255,255,255,0.8) 0px 2px 7px);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: top;
}

.window-minimize {
    transition-duration: 150ms;
    width: 20px;
    border-radius: 0 0 0 3px;

    transform: translateX(9%);
}

.window-minimize strong {
    font-size: 20px;
    line-height: 15px;
    transform: translateY(-1px);
}

.window-exit {
    transition-duration: 150ms;
    width: 35px;

    border-radius: 0 0 3px 0;
}

.err {
    border-radius: 0 0 3px 3px;
}

#my-warn-0 {
    left: 160px;
    top: 143px;
}

.window-exit strong {
    font-size: 11px;
    line-height: 15px;
}

.window-header div button strong {
    display: flex;
    align-items: center;
    justify-content: center;

    float: none;
    margin: 0;

    width: 100%;
    height: 100%;

    font-weight: 100;
    -webkit-text-stroke: 2px black;
    paint-order: stroke fill;
}

.outside-focused {
    background-image: linear-gradient(to bottom, rgba(124,109,103,0.4) 0%, rgba(251,250,249,0.8) 40%, rgba(29,24,22,0.4) 43%);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    box-shadow: rgba(0,0,0,1) 0 0 10px;
}

.outside-focused .window-exit {
    background-image: linear-gradient(to bottom, rgb(255 174 150) 0%, rgb(255,124,100) 40%, rgb(200,24,0) 50%, rgb(255,124,100) 90%);
}

.outside-focused .window-minimize {
    background-image: linear-gradient(to bottom, rgba(124,109,103,0.4) 0%, rgba(251,250,249,0.4) 40%, rgba(29,24,22,0.4) 50%, rgba(251,250,249,0.4) 90%);
}

.window-exit:hover {
    outline: 1px solid rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.5);
    filter: drop-shadow(rgba(255,100,100,1) 0px 1px 7px);
    background-image: linear-gradient(to bottom, rgb(255, 150, 150) 0%, rgb(255,100,100) 40%, rgb(200,0,0) 50%, rgb(255,124,100) 90%);
}

.window-minimize:hover {
    outline: 1px solid rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.5);
    filter: drop-shadow(rgb(150 240 255) 0px 1px 7px) drop-shadow(rgba(150, 240, 255, 0.5) 0px 1px 7px);
    background-image: linear-gradient(to bottom, rgba(182, 217, 238,1) 0%, rgb(117, 230, 241) 40%, rgba(24, 117, 167,1) 50%, rgba(13, 242, 243,1) 90%);
}

.fade-out {
    opacity: 1;
    animation: fade-out 100ms linear forwards;
}

.min-fade-out {
    opacity: 1;
    animation: minimize 250ms linear forwards, fade-out 150ms linear forwards;
}

.fade-in {
    opacity: 0;
    animation: fade-in 250ms linear forwards;
}

.max-fade-in {
    opacity: 0;
    animation: maximize 200ms linear forwards;
}

@keyframes fade-out {
    0% { opacity: 1}
    100% {opacity: 0}
}

@keyframes fade-in {
    0% {opacity: 0; transform: rotate3d(-1, 0, 0, 45deg) scale3d(0.9, 1, 1)}
    100% {opacity: 1; transform: rotate3d(0, 0, 0, 0) scale3d(1, 1, 1)}
}

@keyframes minimize {
    0% { transform: translateX(0) translateY(0) }
    100% { transform: translateX(-300px) translateY(700px) }
}

@keyframes maximize {
    0% { opacity: 0; transform: translateX(-300px) translateY(700px) }
    100% { opacity: 1; transform: translateX(0) translateY(0) }
}

/*
CONTENT FOR WINDOWS
DO NOT TOUCH!
*/

/* Warning Window */
.warn-screen {
    width: 300px;
    height: 80px;
    font-size: 10px;
    background-color: rgb(220, 220, 220);
    border-radius: 2px;
}

.warn-content {
    border-radius: 2px;
    background-color: white;
    padding: 6px 0 0 8px;
    text-align: left;
    display: grid;
    grid-template-columns: auto auto;
}

.warn-content p {
    margin-top: 6px;
    margin-left: 5px;
    cursor: default;
}

.warn-content img {
    margin-top: 4px;
}

.warn-screen button {
    transition-duration: 150ms;

    position: absolute;
    right: 13px;
    top: 79px;

    padding-inline: 20px 20px;

    background-image: linear-gradient(to bottom, rgb(240,240,240) 0%, rgb(250,250,250) 40%, rgb(220,220,220) 50%, rgb(210,210,210) 90%);
    border: 1px solid white;
    outline: 1px solid rgb(140,140,140);
    border-radius: 3px;

    font-size: 12px;
}

.warn-screen button:hover {
    border: 1px solid #5BDDFF;
    outline: 1px solid #3C7FB1;
}

.warn-screen button:active {
    background-image: linear-gradient(to bottom, rgb(234, 246, 253) 0%, rgb(234, 246, 253) 40%, rgb(189, 230, 253) 50%, rgb(119, 216, 250) 90%);
}

/* Card Window */
.card-screen {
    background-color: #A6A09B;

    height: 100%;
    width: 100%;

    padding-block: 1px;
    border-radius: 2px;
}

.card-content {
    text-align: center;
    font-size: 10px;
    background-image: linear-gradient(to bottom, rgb(170, 159, 156) 0%, rgb(125, 119, 115) 60%);
    background-repeat: no-repeat;
    border: 1px solid #53504D;
    border-radius: 5px;

    margin: 6px 8px 0 8px;
}

.yuyuko-text {
    color: #FF6467;
    filter: drop-shadow(darkred 0 0 2px);
    font-weight: bold;
}

.dev-text {
    color: #ABA09C;
    filter: drop-shadow(black 0 0 2px);
    font-weight: lighter;
}

h3 {
    color: #D8D2D0;
    filter: drop-shadow(black 0 0 2px);
    text-decoration: underline;
}

.link-bar {
    margin: 0 40px 6px 40px;
    padding-block: 5px;
    border: 1px solid #3D3A38;
    border-radius: 5px;
    background-color: #44413E;
}

.link-bar button {
    transition-duration: 100ms;

    height: 24px;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    color: #7C6D67;
}

.link-bar button:hover {
    background-color: #4A4443;
}

.link-bar a {
    color: #7C6D67;
}

/* Discord popup */
.disc-popup {
    font-family: "Source Code Pro", monospace;
    visibility: hidden;
    width: 70px;
    background-color: #1D1816;
    color: #ABA09C;
    text-align: center;
    border-radius: 6px;
    border: 1px solid #FF6467;
    padding: 5px 0;
    position: absolute;
    margin-top: -36px;
    margin-left: -52px;

    box-shadow: black 0 0 5px;

    user-select: text;
}

.disc-popup::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #FF6467 transparent transparent transparent;
}

.show {
    visibility: visible;
}

/* Journal Window */
.blog-button-row {
    text-align: left;
    background-image: linear-gradient(to bottom, rgb(255 255 255) 20%, rgb(241, 244, 250) 30%, rgb(241, 244, 250) 50%, rgb(215, 221, 239) 60%);
    border-radius: 2px 2px 0 0;
    border-bottom: 1px solid #555555;

    padding-block: 1px;
}

.blog-button-row button {
    margin: 1px 0 1px 2px;
    background-color: transparent;
    border: none;
    border-radius: 2px;

    font-size: 12px;
}

.blog-button-row button:hover {
    outline: 2px solid #999999;
    background-color: rgba(85, 85, 85, 0.08);
}

.blog-button-row button:active {
    outline: 2px solid #515358;
    background-color: rgba(85, 85, 85, 0.3);
}

.blog-button-row a {
    color: black;
    text-decoration: none;
}

.blog-screen {
    text-align: left;

    background-color: white;
    width: 500px;
    height: 300px;

    border-radius: 0 0 2px 2px;

    overflow-y: overlay;
}

.blog-links {
    display: initial;
}

.blog-content {
    padding: 8px 8px 8px 8px;
}

.blog-link {
    transition-duration: 150ms;
    display: block;
    text-decoration: none;
    color: inherit;
    background-color: white;
    padding: 10px;
    margin-bottom: 6px;

    outline: 1px dashed transparent;
}

.blog-link:hover {
    outline: 1px dashed #adadad;
    background-color: #f5f5f5;
}

.blog-title {
    font-size: 20px;
    font-weight: bold;
}

.blog-desc {
    padding-block: 6px;
    font-size: 12px;
}

.blog-timestamp {
    font-weight: lighter;
    color: gray;
}

/* 5 billion css stuff */
.blog-contents > div {
    display: none;
}

.blog-button {
    transition-duration: 150ms;

    padding-inline: 20px 20px;
    margin-bottom: 6px;

    background-image: linear-gradient(to bottom, rgb(240,240,240) 0%, rgb(250,250,250) 40%, rgb(220,220,220) 50%, rgb(210,210,210) 90%);
    border: 1px solid white;
    outline: 1px solid rgb(140,140,140);
    border-radius: 3px;

    font-size: 12px;
}

.blog-button:hover {
    border: 1px solid #5BDDFF;
    outline: 1px solid #3C7FB1;
}

.blog-button:active {
    background-image: linear-gradient(to bottom, rgb(234, 246, 253) 0%, rgb(234, 246, 253) 40%, rgb(189, 230, 253) 50%, rgb(119, 216, 250) 90%);
}

/* Profile Window */
.prof-screen {
    text-align: left;

    background-color: white;

    width: 640px;
    height: 500px;

    border-radius: 2px;

    cursor: auto;
    user-select: text;

    overflow-y: overlay;
}

.prof-screen a {
    color: #2457c0;
    text-decoration: none;
    font-weight: bold;
}

.prof-header {
    background-color: #003399;
    padding: 1px 0 15px 10px;
    color: white;
}

.profile-section {
    padding-left: 20px;
    width: 100%;
}

.profile-info > p {
    margin-block: 0;
}

.about-section {
    padding-left: 15px;
    margin-right: 20px;
    width: 100%;
}

.about-section h2 {
    cursor: auto;
    padding-left: 5px;
}

.about-section ul {
    cursor: auto;
    padding-left: 10px;
}

.profile-section h2 {
    background-color: #639BCC;
    color: white;
}

.profile-section ul {
    background-color: #D4E7FD;
}

.profile-subsection > div {
    border: 1px solid #547390;
    margin-block: 13px;
}

.profile-subsection h2 {
    padding-left: 5px;
    margin-block: 0;
    border-bottom: 1px solid #547390;
}

.profile-subsection ul {
    margin: 2px;
    padding-left: 20px;
}

.prof-screen li {
    padding-block: 1px;
}

.about-section {
    color: #EC8748;
}

.about-section p,
.about-section ul {
    color: black;
}

.profile-blog {
    font-weight: bold;
}

.profile-blog > a {
    padding-left: 0;
}

.about-title {
    background-color: #FFC89C;
}

/* Banner Window */
.bann-screen {
    text-align: center;

    background-color: white;
    padding-top: 5px;
    width: 170px;
    height: 79px;

    border-radius: 2px;
}

.bann-screen div {
    position: relative;
    top: 3px;

    background-color: rgb(220, 220, 220);
    padding-top: 37px;
    border-radius: 0 0 2px 2px;
}

.bann-screen button {
    transition-duration: 150ms;

    position: absolute;

    width: 66px;
    height: 19px;
    right: 50px;
    top: 11px;

    background-image: linear-gradient(to bottom, rgb(240,240,240) 0%, rgb(250,250,250) 40%, rgb(220,220,220) 50%, rgb(210,210,210) 90%);
    border: 1px solid white;
    outline: 1px solid rgb(140,140,140);
    border-radius: 3px;

    font-size: 12px;
}

.bann-screen button:hover {
    border: 1px solid #5BDDFF;
    outline: 1px solid #3C7FB1;
}

.bann-screen button:active {
    background-image: linear-gradient(to bottom, rgb(234, 246, 253) 0%, rgb(234, 246, 253) 40%, rgb(189, 230, 253) 50%, rgb(119, 216, 250) 90%);
}

/*
CONTENT FOR MOBILE
MAYBE TOUCH?
 */

@media (hover: none), (pointer: coarse), (max-width: 767px), (max-height: 500px) {
    html,
    body {
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: white !important;
        color: black !important;
    }

    #desktop-scale-root,
    footer,
    .taskbar-header,
    .applications,
    .main-page {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .mobile-wip {
        display: block !important;
        visibility: visible !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 999999 !important;

        width: 100vw !important;
        height: 100vh !important;

        background: #e8e0d1 !important;
        color: black !important;
        text-align: center !important;
        font-family: Arial, Helvetica, sans-serif !important;
    }

    .mobile-wip h1 {
        margin: 40vh 0 0 0 !important;
        padding-bottom: 24px !important;
        font-size: 32px !important;
        font-weight: bold !important;
        color: #6f2734 !important;
    }

    .mobile-wip h3 {
        margin: 0 !important;
        padding: 0 !important;
        color: #4a5059 !important;
        filter: none !important;
        text-decoration: none !important;
        font-size: 16px !important;
    }
}