html {
    cursor: url("/cursor.png"), auto;
}

a {
    text-decoration: none;
    color: #155bff;
    font-weight: 600;
    transition: all 0.2s;
    cursor: pointer;
}

a:hover {
    color: #00aeff;
}

body {
    background-color: #baf;
    background-image: url("../img/space-bg-2.gif");
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    perspective: 1px;
}

.body {
    width: 100vw;
    height: 100vh;
    /* background-color: #f00; */
    border-radius: 10px;
    transition: all 0.5s;
    /* margin-top: 50px; */
    z-index: 1;
    overflow-x: auto;
    padding: 2rem 0;
}

.header {
    height: 50px;
    /* background-color: #0f0; */
    text-align: center;
    font-size: 3rem;
    display: block;
}

.flex-tricolumn {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    /* width: 100%; */
    /* height: 465px; */
    /* background-color: #e2b; */
}

.flex-column {
    display: flex;
    flex-direction: column;
    justify-content: baseline;
    align-items: center;
    width: 200px;
    margin-top: 1rem;
    /* background-color: #0e0; */
}

.risen-column {
    transform: translateY(25px);
    /* height: 550px; */
}

.wide-column {
    width: 450px;
    /* background-color: #66f; */
}

#left-column {
    align-items: flex-end;
    gap: 1rem;
}

#right-column {
    align-items: flex-start;
}

.square {
    width: 150px;
    height: 150px;
    background-color: #0c9617;
}

.wide-box {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
}

#last-fm-tracker {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 1rem 1rem 7px 1rem;
    text-align: center;
    position: relative;
    color: #dfdeef;
}

#last-fm-tracker img {
    /* width: 150px;
    height: 150px; */
    border: solid 5px #000;
}

#artist {
    font-style: italic;
}

#title {
    font-weight: bold;
    color: #dfdeef;
}

#title-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    gap: 5px;
}

#listening-label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px;
    transform: translate(3%, -65%);
}

.profile-picture-container {
    min-width: 200px;
    min-height: 200px;
    background-color: #bcbcff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    outline: double 5px #000;
    outline-offset: -5px;
    background-image: url("../img/hexabump.png");
    margin-bottom: 10px;
}

.profile-picture {
    width: 120px;
    outline: 3px black solid;
    outline-offset: -3px;
    filter: hue-rotate(25deg);
}

.profile-label {
    margin-top: -2px;
    width: 150px;
    background-color: #d5e3ff;
    height: 3rem;
    font-size: 1.5rem;
    border: double 5px #000;
}

.title-text {
    color: red;
}

.left-long-container {
    width: 320px;
    height: 300px;
    align-self: flex-end;
    /* margin-left: -150px; */
    /* background-color: #66f; */
}

.switch-panel-content {
    overflow-y: auto;
    max-height: 350px;
}

.switch-panel-label {
    font-weight: bold;
}

.welcome-container {
    width: calc(400px - 2rem);
    /* height: 300px; */
    background-color: #245898;
    padding: 1rem;
    overflow-y: auto;
    position: relative;
}

.welcome-container>h1 {
    font-size: 3rem;
    text-align: center;
    padding-bottom: 10px;
}

#cat-1 {
    position: absolute;
    top: 70px;
    left: 50px;
    width: 40px;
    aspect-ratio: 1/1;
    image-rendering: pixelated;
}

#cat-2 {
    position: absolute;
    top: 70px;
    right: 50px;
    width: 40px;
    aspect-ratio: 1/1;
    image-rendering: pixelated;
}

.flex-row {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 400px;
    height: 250px;
    /* background-color: rgb(173, 34, 238); */
}

.guestbook-container {
    width: 150px;
    height: 225px;
    background-color: #0c9617;
    border-radius: 1px 10px 10px 1px;
}

.flex-row-footer {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 175px;
    background-color: rgb(34, 238, 102);
}

.links-container {
    width: 150px;
    padding: 10px 0 0 0;
    background-color: #0ff;
}

.navigation-list {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

}

.navigation-list a {
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    transition: all 0.2s;
}

.navigation-list a:hover {
    color: #1a4cff;
}

.unfinished {
    color: #ff0000 !important;
}

.card {
    --line-color: #170138;
    --line-width: 1px;
    background-color: #23164f;
    background-image: linear-gradient(90deg, var(--line-color) var(--line-width), transparent var(--line-width)),
        linear-gradient(180deg, var(--line-color) var(--line-width), transparent var(--line-width));
    background-size: 10px 10px;
    color: #dfdeef;
    border: double 5px var(--line-color);
    outline-offset: -5px;
    margin-bottom: 10px;
    padding: 5px;
}

.todo-done {
    text-decoration: line-through;
    color: #000;
}

strong {
    font-weight: bold;
}

li {
    margin-bottom: 0.5rem;
}

@media screen and (max-width: 800px) {
    .body {
        width: 500px;
        margin-top: 7vh;
    }

    .header {
        width: 60%;
    }

    .risen-column {
        transform: translateY(0);
    }

    .wide-column {
        order: -1;
    }

    .flex-tricolumn {
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 500px) {
    .body {
        width: 300px;
        margin-top: 7vh;
    }

    .header {
        width: 100%;
    }

    .flex-tricolumn {
        flex-direction: column;
        align-items: center;
    }

    .wide-column {
        order: -1;
    }

    .wide-column,
    .welcome-container {
        width: 100%;
    }

    .updates-todo-container {
        display: none;
    }

    .risen-column {
        height: 100%;
    }
}

.flipnote-card {
    --line-color: #170138;
    width: 150px;
    background-color: white;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    transition: all 0.2s;
    border: double 5px var(--line-color);
    outline-offset: -5px;
}

.flipnote-card:hover {
    cursor: pointer;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 15px rgb(255, 255, 255);
}

#flipnote-frog {
    width: 100%;
    aspect-ratio: 1/1;
    background-image: url("../img/105651.gif");
    background-size: 150%;
    background-repeat: no-repeat;
    background-position: center;
}

.buttons-n-blinkers {
    padding-top: 20px;
    z-index: 2;
}

#link-img,
#tingle-img {
    height: 90%;
    cursor: pointer;
}

.tv-outer {
    width: 150px;
    height: 100px;
    position: relative;
    bottom: -40px;
}

.tv-screen-content {
    width: calc(100% - 10px);
    height: calc(100% + 10px);
    margin-top: -5px;
    margin-left: 5px;
    cursor: pointer;
}

#ISS {
    height: 100px;
    transition: all 0.2s;
}

.ISS-orbit {
    position: absolute;
    width: 900px;
    height: 100px;
    /* border: solid white 2px; */
    bottom: calc(280px - 50px);
    right: -170px;
    z-index: 1;
    transform: rotate(-45deg);
}

.kitkat {
    position: absolute;
    height: 295px;
    width: 100px;
    top: 25%;
    right: 16px;
    transition: all 0.2s;
    transform: translateY(-50%);
    z-index: 1;
}

.kitkat:hover {
    cursor: pointer;
    transform: translate(-5px, -50%) scale(1.1);
}

h1.header {
    margin: 1rem 0;
}

.guest-book {
    width: 120%;
    height: 400px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.sleepCD {
    width: 100%;
    aspect-ratio: 1/1;
    background-image: url("../img/New_Sleep_CD_Edit_Smallest.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.sleepCD:hover {
    cursor: pointer;
    animation: spin 2s ease-in-out infinite;
}

.dasun {
    position: absolute;
    background-image: url("../img/da-sun.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    left: calc(15vw - 200px);
    top: calc(25vh - 200px);
    width: 400px;
    aspect-ratio: 1/1;
    pointer-events: none;
}

.damoon {
    position: absolute;
    background-image: url("../img/da-moon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    right: calc(15vw - 200px);
    bottom: calc(0vh - 200px);
    width: 300px;
    aspect-ratio: 1/1;
    pointer-events: none;
}

.globe {
    position: absolute;
    background-image: url("../img/Rotating_earth_animated_transparent_small.gif");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    right: calc(25vw - 200px);
    top: calc(65vh - 200px);
    width: 400px;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

/* .globe:hover {
    cursor: pointer;
    box-shadow: 0 0 40px #3157ff inset;
    transform: rotate(30deg) scale(1.1);
} */

.webring-info {
    text-align: center;
}

.webring-prev,
.webring-next {
    text-wrap: nowrap;
    padding: 20px 0;
}

#space-path {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500%;
    pointer-events: none;
}

#the-maze-link {
    filter: contrast(1.5) brightness(0.8);
}

.view-counter {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
}

.flex-horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 0.5rem;
}

#ditherer {
    background-color: red;
    width: 284px;
    height: 249px;
    border: solid 5px #6f00ff;
    position: relative;
}

#ditherer:hover {
    cursor: pointer;
    transform: rotate(-5deg) scale(1.3);
}

#ditherer img {
    /* image-rendering: pixelated; */
    width: 284px;
    height: 249px;
    position: absolute;
}

.phase-in-out-animation {
    animation: phase-in-out 4s infinite;
}

@keyframes phase-in-out {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#ditherer h1 {
    z-index: 10;
    position: absolute;
    color: #ffffff;
    font-size: 2rem;
}

#ditherer #title {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
}

#ditherer #wow {
    position: absolute;
    bottom: 43px;
    left: 25px;
}

#ditherer #cool {
    position: absolute;
    bottom: 16px;
    left: 3rem;
}

#ditherer #subtitle {
    position: absolute;
    top: 3rem;
    left: 2rem;
    font-size: 1.5rem;
}

.skip-clickevent {
    pointer-events: none !important;
    /* disables pointer events for the container */
}

.skip-clickevent>* {
    pointer-events: auto;
    /* re-enables pointer events for all direct children */
}

.z-90 {
    z-index: -90;
}

.z15 {
    z-index: 15;
}

.z-30 {
    z-index: -30;
}