:root {
    --defcur:   url('assets/cur/defcur.png') 4 4, pointer;
    --poicur:   url('assets/cur/poicur.png') 4 4, pointer;
}

html {
    width: 100vw;
    height: 100vh;
    
    cursor: var(--defcur);
    
    font-family: "Courier New", Courier, monospace;
    
    background:
        url('assets/patterns/circles.png'),
        radial-gradient(circle at top, #ffcccb, #F0F0E0);
}
body {
    margin: 0;
}
img {
    image-rendering: pixelated;
}
.flicker {
    filter: drop-shadow(0px 0px 0px #aaabdd);
    
    animation-name: flicker;
    animation-duration: 0.1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes flicker {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.9;
    }s
}
/************************************************/
/************************************************/
/************************************************/
#wrapper {
    margin: 10px auto;
    
    width: 100vw;
    height: 90vh;
    
    max-width: 800px;
    min-height: 800px;
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#ava {
    margin: auto;
}
#ava.small {
    width: 50px;
    height: 50px;
    
    background: url('assets/ava/inactive.png');
    background-size: contain;
}
#ava.medium {
    width: 100px;
    height: 100px;
    
    background: url('assets/ava/inactive.png');
    background-size: contain;
}
#ava.tall {
    width: 200px;
    height: 200px;
    
    background: url('assets/ava/inactive.png');
    background-size: contain;
}
/************************************************/
/************************************************/
/************************************************/
.navi {
    filter: drop-shadow(20px 20px 5px #2224);
    
    width: 200px;
    height: fit-content;
    
    border-radius: 10px;
}
.navi table:first-of-type {
    width: 100%;
    height: 300px;
    
    transform: translatey(10px);
    z-index: 1;
    
    background: radial-gradient(circle at top, #B5B1BE, #555272);
    
    border: 10px solid #BEAF80;
    border-radius: 10px;
    box-shadow: inset 0 0 20px #B5B1BE40,
        5px 5px #96835F,
        5px 10px #2224;
}
.navi table:last-of-type {
    width: 100%;
    height: 300px;
    
    background: radial-gradient(circle at top, #B5B1BE, #555272);
    
    border: 10px solid #96835F;
    border-radius: 10px;
    box-shadow: 5px 5px #764,
        inset 0 0 20px #B5B1BE40;
}
.navi table:last-of-type th.keys {
    cursor: var(--poicur);
    
    color: #555272;
    
    background: radial-gradient(circle at top, #ffcccb, #BEAF80);
    
    border: 2px solid #BEAF80;
    border-radius: 10px;
    box-shadow: inset 0 0 20px #cccbff40;
    box-sizing: border-box;
}
.navi table:last-of-type th.keys:hover {
    color: #222;
    
    background: radial-gradient(circle at top, #cccbff, #BEAF80);
    
    border: 2px solid #BEAF80;
    border-radius: 10px;
    box-shadow: inset 0 0 20px #ffcccb40;
    box-sizing: border-box;
}
.navi table .screen {
    margin: auto;
    box-sizing: border-box;
    
    width: 150px;
    
    color: #cccbff;
    text-shadow: 0 0 5px #cccbff;
    
    background: #222;
    
    border: 10px solid black;
    border-radius: 10px;
    box-shadow: inset 0 0 20px black;
}
.navi .screen #ava {
    filter: drop-shadow(0px 0px 0px #aaabdd);
    
    animation-name: sway;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes sway {
    0% {
        transform: rotatey(0deg) translatey(5px);
    filter: drop-shadow(0px 0px 0px #aaabdd);
    }
    25% {
        transform: rotatey(20deg) rotatex(10deg) rotatez(5deg) translatey(-5px);
    filter: drop-shadow(10px -5px 0px #aaabdd);
    }
    50% {
        transform: rotatey(0deg) translatey(5px);
    filter: drop-shadow(0px 0px 0px #aaabdd);
    }
    75% {
        transform: rotatey(-20deg) rotatex(-10deg) rotatez(-5deg) translatey(-5px);
    filter: drop-shadow(-10px 5px 0px #aaabdd);
    }
    100% {
        transform: rotatey(0deg) translatey(5px);
    filter: drop-shadow(0px 0px 0px #aaabdd);
    }
}

#note {
    padding: 5px;
    
    color: #288;
    text-shadow: 0 0 3px #288;
    
    background: #F8EBB6;
    
    border-radius: 5px;
    box-shadow:
        inset 0 0 5px #A08C6B,
        0px 1px 0 1px #F8EBB6,
        0px 2px 0 1px #A08C6B,
        0px 3px 0 1px #F8EBB6,
        0px 4px 0 1px #A08C6B,
        0px 5px 0 1px #F8EBB6,
        0px 6px 0 1px #A08C6B,
        0px 7px 0 1px #F8EBB6,
        0px 8px 0 1px #A08C6B,
        0px 9px 0 1px #F8EBB6,
        0px 10px 0 1px #A08C6B;
}
#note li:first-letter {
    color: #222;
    text-shadow: 0 0 3px #222;
}
/************************************************/
/************************************************/
/************************************************/
#wrapper .content {
    filter: drop-shadow(-20px 20px 5px #2224);
    
    min-width: calc(800px - 250px);
    width: calc(800px - 250px);
    height: 100%;
    
    background: radial-gradient(circle at top, #ffcccb30, #cccbff40, #55527280);
    backdrop-filter: blur(3px);
    
    border: none;
    border-radius: 10px;
    box-shadow:
        inset 0 0 0 5px #BEAF80,
        inset 0 45px 0 #fffa,
        inset 0 50px 0 #BEAF80;
}
#wrapper #title {
    height: 40px;
    
    margin: 5px;
    
    color: #222;
    text-shadow: 0 0 2px #222;
    text-align: center;
}

#wrapper #mindor {
    width: 100%;
    height: calc(100% - 55px);
    
    border: none;
    border-radius: 0 0 10px 10px;
}

/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
hr.tcb {
    margin: 0;
    
    height: 106px;
    
    background: url('assets/divide/tcb.png');
    background-position: right;
    
    border: none;
}
/************************************************/
/************************************************/
/************************************************/
#subpage {
    padding: 5px;
}
#subpage h1, #subpage h2, #subpage h3, #subpage h4, #subpage h5, #subpage h6, #subpage p {
    margin: 10px;
}
#subpage.about div {
    align-items: center;
}
#subpage.about p {
    padding: 10px;
    
    width: 100%;
    
    background: linear-gradient(to top, #fffa, transparent);
    
    border-radius: 10px;
    box-shadow: 0 0 0 1px #fffa;
}
#subpage.cliques .group {
    display: flex;
    flex-direction: row;
}
#subpage.cliques .group p {
    padding: 10px;
    
    width: 45%;
    
    background: linear-gradient(to top, #fffa, transparent);
    
    border-radius: 10px;
    box-shadow: 0 0 0 1px #fffa;
}
#subpage.journal table {
    margin: auto;
    width: 90%;
}
#subpage.journal table tr th {
    cursor: var(--poicur);
    
    color: #555272;
    
    background: radial-gradient(circle at top, #ffcccb, #BEAF80);
    
    border: 2px solid #BEAF80;
    border-radius: 10px;
    box-shadow: inset 0 0 20px #cccbff40;
    box-sizing: border-box;
}
#subpage.journal table tr th:hover {
    color: #222;
    
    background: radial-gradient(circle at top, #cccbff, #BEAF80);
    
    border: 2px solid #BEAF80;
    border-radius: 10px;
    box-shadow: inset 0 0 20px #ffcccb40;
    box-sizing: border-box;
}
#subpage.journal table tr th.null {
    cursor: var(--poicur);
    
    color: #555272;
    
    background: radial-gradient(circle at top, #9998cc, #BEAF80);
    
    border: 2px solid #BEAF80;
    border-radius: 10px;
    box-shadow: inset 0 0 20px #cccbff40;
    box-sizing: border-box;
}
#subpage.journal table tr th.null:hover {
    color: #222;
    
    background: radial-gradient(circle at top, #cccbff, #BEAF80);
    
    border: 2px solid #BEAF80;
    border-radius: 10px;
    box-shadow: inset 0 0 20px #ffcccb40;
    box-sizing: border-box;
} 
#subpage.journal .entry {
    margin: 5px;
    padding: 10px;
    
    width: 80%;
    
    background: linear-gradient(to top, #fffa, transparent);
    
    border-radius: 10px;
    box-shadow: 0 0 0 1px #fffa;
}
#subpage.journal .entry summary {
    padding: 10px;
    
    width: 80%;
    
    list-style: none;
    
    background: linear-gradient(to top, #cccbffaa, transparent);
    
    border-radius: 10px;
    box-shadow: 0 0 0 1px #cccbffaa;
}
#subpage.bookshelf .shelf p {
    font-size: 82px;
    line-height: 82px;
    
    background: repeating-linear-gradient(
        transparent 62px,
        saddlebrown 62px, wheat 82px,
        saddlebrown 82px, #222 100px,
        transparent 100px, transparent 162px
    );
}
#subpage.bookshelf .shelf img.book:hover {
    transform: scale(2);
}
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
/************************************************/
#statuscafe {
    margin: 20px;
    padding: 5px;
    
    height: 100px;
    
    color: #288;
    text-shadow: 0 0 3px #288;
    
    background: #F8EBB6;
    
    border-radius: 5px;
    box-shadow:
        inset 0 0 5px #A08C6B,
        0px 1px 0 1px #F8EBB6,
        0px 2px 0 1px #A08C6B,
        0px 3px 0 1px #F8EBB6,
        0px 4px 0 1px #A08C6B,
        0px 5px 0 1px #F8EBB6,
        0px 6px 0 1px #A08C6B,
        0px 7px 0 1px #F8EBB6,
        0px 8px 0 1px #A08C6B,
        0px 9px 0 1px #F8EBB6,
        0px 10px 0 1px #A08C6B;
}
#statuscafe-username {
    margin: 5px;
    box-shadow: inset 0 -2px 0 0 #288;
}