@charset "UTF-8";

/* =====================================================
   MIDNIGHT SAMURAI
   NUJABES-INSPIRED COLOUR PALETTE
   cream / sage / olive / brown / espresso
   ===================================================== */

* {
    box-sizing: border-box;
}

html {
    background: #171812;
}

body {
    margin: 0;

    color: #302c22;

    background:
        radial-gradient(
            circle at 50% 0%,
            #69745b 0%,
            #3d4335 28%,
            #24271f 55%,
            #11120f 100%
        );

    font-family:
        "MS PGothic",
        "MS Gothic",
        Tahoma,
        Arial,
        sans-serif;

    font-size: 13px;
    line-height: 1.5;
}

/* =====================================================
   OLD PAPER / FILM GRAIN
   ===================================================== */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: 9999;

    opacity: .18;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.04) 0px,
            rgba(255,255,255,.04) 1px,
            transparent 1px,
            transparent 4px
        );
}

/* =====================================================
   TOP BAR
   ===================================================== */

.topline {
    width: 100%;

    padding: 6px;

    text-align: center;

    color: #ded8c4;

    background: #27291f;

    border-bottom: 1px solid #8b8c68;

    font-size: 10px;
    letter-spacing: 2px;
}

/* =====================================================
   PAGE WRAPPER
   ===================================================== */

.wrapper {
    width: min(1180px, 96%);
    margin: 12px auto 30px;
}

/* =====================================================
   HEADER
   ===================================================== */

.site-header {

    min-height: 125px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 20px 25px;

    background:
        linear-gradient(
            135deg,
            #ebe5d2,
            #d6d0b8
        );

    border: 2px solid #514b38;

    box-shadow:
        4px 4px 0 #171812,
        inset 0 0 20px rgba(70,65,40,.15);
}

.logo h1 {

    margin: 3px 0;

    color: #403a2b;

    font-size: 32px;

    letter-spacing: 5px;

    text-shadow:
        2px 2px #b3b29a;
}

.logo p {
    margin: 0;

    color: #66664e;
}

.jp {

    color: #647052;

    font-size: 12px;

    letter-spacing: 4px;
}

.header-status {

    width: 125px;

    padding: 10px;

    text-align: center;

    color: #615c47;

    background: #f1ecda;

    border: 1px solid #77765b;

    box-shadow:
        inset 0 0 8px rgba(80,70,40,.12);

    font-size: 10px;
}

.online {
    color: #586b45;
}

/* =====================================================
   NAVIGATION
   ===================================================== */

nav {

    display: flex;
    flex-wrap: wrap;

    gap: 4px;

    margin-top: 6px;
}

nav a {

    padding: 7px 18px;

    color: #e7e2cf;

    background:
        linear-gradient(
            #59634c,
            #343a2d
        );

    border: 1px solid #949575;

    box-shadow:
        2px 2px 0 #171812;

    text-decoration: none;

    font-size: 10px;

    letter-spacing: 1px;
}

nav a:hover {

    color: #fff;

    background:
        linear-gradient(
            #788465,
            #4a563e
        );

    border-color: #d0cda9;
}

/* =====================================================
   TICKER
   ===================================================== */

.ticker {

    margin: 6px 0;

    padding: 5px 10px;

    overflow: hidden;
    white-space: nowrap;

    color: #d5d0b8;

    background: #302f24;

    border-top: 1px solid #797957;
    border-bottom: 1px solid #797957;

    font-size: 10px;
}

/* =====================================================
   LAYOUT
   ===================================================== */

.layout {

    display: grid;

    grid-template-columns:
        190px
        minmax(0, 1fr)
        190px;

    gap: 8px;
}

.two-column {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        230px;

    gap: 8px;
}

/* =====================================================
   GENERAL WINDOWS
   ===================================================== */

.window,
.hero-window,
.quote-box {

    margin-bottom: 8px;

    background:
        linear-gradient(
            135deg,
            #e7e1cd,
            #d5d0ba
        );

    border: 2px solid #544d39;

    box-shadow:
        3px 3px 0 #161711,
        inset 0 0 20px rgba(80,70,40,.08);
}

/* =====================================================
   WINDOW TITLE
   ===================================================== */

.window-title {

    padding: 5px 7px;

    color: #eee8d5;

    background:
        linear-gradient(
            90deg,
            #59654b,
            #414936
        );

    border-bottom: 2px solid #3c3a2b;

    font-size: 10px;

    letter-spacing: 1px;

    text-shadow:
        1px 1px #34372b;
}

.window-title span {

    float: right;

    color: #c6c6a7;
}

.window-content {

    padding: 10px;
}

.window h2,
.window h3 {

    color: #403c2d;

    text-shadow:
        1px 1px #f2eddb;
}

.center {
    text-align: center;
}

/* =====================================================
   HERO
   ===================================================== */

.hero-title {

    padding: 7px;

    color: #ece7d3;

    background: #494f3b;

    border-bottom: 2px solid #34372b;

    font-size: 10px;

    letter-spacing: 2px;
}

.hero {

    min-height: 390px;

    position: relative;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at center bottom,
            #7d8061,
            #454a38 45%,
            #24261e 85%
        );
}

.hero img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .75;

    filter:
        sepia(.2)
        saturate(.75)
        contrast(1.05);
}

.hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            transparent 35%,
            rgba(22,22,16,.82) 100%
        );
}

.hero-text {

    position: relative;

    z-index: 2;

    width: 90%;

    padding: 15px;

    color: #e7e2cf;

    background:
        rgba(35,35,27,.88);

    border: 1px solid #98946e;

    text-align: center;

    box-shadow:
        0 0 15px rgba(20,20,10,.4);
}

.hero-text h2 {

    margin: 0;

    color: #eee9d7;

    letter-spacing: 3px;
}

.hero-text p {
    color: #d1cdb9;
}

.jp-text {

    color: #aeb293 !important;

    letter-spacing: 5px;
}

.hero-fallback {

    position: absolute;

    z-index: 1;

    width: 180px;
    height: 240px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: #858a69;

    border: 1px solid #777a5b;

    font-size: 80px;
}

.hero-fallback small {
    font-size: 9px;
}

/* =====================================================
   PROFILE
   ===================================================== */

.avatar {

    width: 120px;
    height: 120px;

    object-fit: cover;

    border: 2px solid #57513b;

    padding: 3px;

    background: #eee8d5;
}

.profile {

    display: flex;

    gap: 20px;

    padding: 18px;
}

.profile-picture {

    position: relative;

    width: 125px;
    min-width: 125px;
}

.profile-placeholder {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #d8d2bb;

    color: #6d7655;

    font-size: 50px;
}

/* =====================================================
   MEDIA
   ===================================================== */

.media-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 8px;

    padding: 10px;
}

.media-card {

    text-align: center;

    color: #4b4634;
}

.media-card img {

    width: 100%;

    aspect-ratio: 1;

    object-fit: cover;

    border: 2px solid #554d38;

    padding: 3px;

    background: #eee8d5;

    box-shadow:
        2px 2px 0 #79755a;
}

.media-card b,
.media-card small {

    display: block;
}

.media-card b {

    margin-top: 4px;

    color: #4c4936;

    font-size: 10px;
}

.media-card small {

    color: #747258;

    font-size: 10px;
}

/* =====================================================
   MUSIC PLAYER
   ===================================================== */

.player-screen {

    padding: 12px;

    background:
        #393c2c;

    color: #ded9c3;

    border-top: 1px solid #8d8b68;
}

.album-small {

    width: 100%;

    aspect-ratio: 1;

    border: 2px solid #96936d;

    background: #161810;
}

.album-small img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.song-info {

    margin: 8px 0;
}

.song-info b,
.song-info small {

    display: block;
}

.song-info b {
    color: #eee8d4;
}

.song-info small {
    color: #aeb394;
}

.fake-progress,
.large-progress {

    height: 7px;

    background: #151710;

    border: 1px solid #888663;
}

.fake-progress span,
.large-progress span {

    display: block;

    width: 38%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #89936d,
            #c2bd91
        );
}

.player-time {

    color: #aaa98a;

    margin: 5px 0;

    font-size: 9px;
}

.player-buttons {

    display: flex;

    justify-content: center;

    gap: 4px;
}

.player-buttons button {

    min-width: 32px;

    color: #e2ddc8;

    background:
        linear-gradient(
            #60684f,
            #373d2f
        );

    border: 1px solid #a29e76;

    cursor: pointer;
}

.player-buttons button:hover {

    background:
        linear-gradient(
            #7a8565,
            #4c563e
        );
}

.big-player {

    display: grid;

    grid-template-columns:
        250px 1fr;

    gap: 20px;

    padding: 20px;
}

.big-player > img {

    width: 250px;
    height: 250px;

    object-fit: cover;

    border: 3px solid #4f4935;

    padding: 5px;

    background: #f0ead7;

    box-shadow:
        4px 4px 0 #8d896b;
}

.big-player-info {

    align-self: center;
}

.big-player-info h2 {

    color: #403d2d;

    font-size: 28px;

    letter-spacing: 3px;
}

.big-player-info h3 {

    color: #707653;
}

.large-progress {

    margin-top: 30px;
}

.big-play {

    font-size: 18px;
}

/* =====================================================
   ALBUM GRID
   ===================================================== */

.album-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 10px;

    padding: 12px;
}

.album {

    text-align: center;

    color: #494532;
}

.album img {

    width: 100%;

    aspect-ratio: 1;

    object-fit: cover;

    border: 2px solid #514a35;

    padding: 3px;

    background: #f0ead8;

    box-shadow:
        2px 2px 0 #888365;
}

.album b,
.album small {

    display: block;
}

.album b {

    color: #4b4734;

    font-size: 10px;
}

.album small {

    color: #777458;
}

/* =====================================================
   TRACK LIST
   ===================================================== */

.track {

    display: grid;

    grid-template-columns:
        40px 1fr 30px;

    padding: 10px;

    color: #454231;

    border-bottom:
        1px dotted #989474;
}

.track:hover {

    background:
        rgba(100,105,70,.12);
}

.track > span:first-child {
    color: #747957;
}

.track b,
.track small {
    display: block;
}

.track b {
    color: #4a4634;
}

.track small {
    color: #77745c;
}

/* =====================================================
   LINKS
   ===================================================== */

.link-list a {

    display: block;

    padding: 5px 10px;

    color: #586548;

    text-decoration: none;

    border-bottom:
        1px dotted #999574;
}

.link-list a:hover {

    color: #302f22;

    background:
        rgba(110,115,75,.12);
}

.link-directory a {

    display: grid;

    grid-template-columns:
        40px 1fr 20px;

    gap: 10px;

    align-items: center;

    margin: 6px 10px;

    padding: 12px;

    color: #4b4935;

    text-decoration: none;

    background:
        #e9e3d0;

    border: 1px solid #787456;
}

.link-directory a:hover {

    background: #d9d4bd;

    border-color: #555a42;
}

.link-directory b,
.link-directory small {

    display: block;
}

.link-directory small {

    color: #77755d;
}

/* =====================================================
   SOCIAL BUTTONS
   ===================================================== */

.social-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 5px;

    padding: 10px;
}

.social-grid a {

    padding: 10px;

    text-align: center;

    color: #e9e3d0;

    text-decoration: none;

    background:
        linear-gradient(
            #697457,
            #414a35
        );

    border: 1px solid #9c9a73;

    box-shadow:
        2px 2px 0 #5b563e;
}

.social-grid a:hover {

    background:
        linear-gradient(
            #87916d,
            #586548
        );
}

/* =====================================================
   BUTTON WALL
   ===================================================== */

.button-wall {

    display: flex;

    flex-wrap: wrap;

    gap: 4px;

    padding: 8px;
}

.fake-button {

    min-width: 75px;

    padding: 5px;

    text-align: center;

    color: #e8e2cf;

    background:
        linear-gradient(
            #687255,
            #3d4532
        );

    border: 1px solid #aaa780;

    box-shadow:
        inset 1px 1px rgba(255,255,255,.2),
        2px 2px #383729;

    font-size: 9px;
}

.fake-button:hover {

    color: white;

    background:
        linear-gradient(
            #89946d,
            #596548
        );
}

.large .fake-button {

    min-width: 110px;
}

/* =====================================================
   COUNTER
   ===================================================== */

.counter {

    display: inline-block;

    padding: 4px 8px;

    color: #b7c099;

    background: #25281e;

    border:
        2px inset #767957;

    font-family: monospace;

    letter-spacing: 4px;
}

/* =====================================================
   STATUS
   ===================================================== */

.status-box p {

    margin: 4px 0;

    color: #55503b;
}

.status-box b {

    color: #747956;
}

/* =====================================================
   RANKINGS
   ===================================================== */

.ranking p {

    display: flex;

    justify-content: space-between;

    margin: 0;

    padding: 5px;

    color: #514d3a;

    border-bottom:
        1px dotted #979373;
}

.ranking span {

    color: #78805b;
}

/* =====================================================
   DIARY
   ===================================================== */

.diary-entry h3 {

    color: #626c4d;

    font-size: 13px;
}

.diary-entry a,
.small-link {

    color: #67734e;

    text-decoration: none;
}

.diary-entry a:hover,
.small-link:hover {

    color: #302e22;

    text-decoration: underline;
}

hr {

    border: 0;

    border-top:
        1px dotted #8f8c6d;
}

/* =====================================================
   QUOTE
   ===================================================== */

.quote-box {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    padding: 15px;

    color: #6c7453;

    text-align: center;
}

.quote-box span {

    color: #898d68;

    font-size: 25px;
}

.quote-box p {

    margin: 0;

    letter-spacing: 2px;
}

/* =====================================================
   INTERESTS
   ===================================================== */

.interest-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 5px;

    padding: 10px;
}

.interest-grid div {

    padding: 12px 5px;

    text-align: center;

    color: #5d6046;

    background: #e4deca;

    border: 1px solid #898668;
}

/* =====================================================
   MOOD BARS
   ===================================================== */

.bar {

    height: 7px;

    margin-bottom: 10px;

    background: #292b20;

    border: 1px solid #7d805f;
}

.bar span {

    display: block;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #697453,
            #a4a77a
        );
}

/* =====================================================
   MOOD BOX
   ===================================================== */

.mood-box {

    padding: 20px;

    text-align: center;

    color: #737a58;

    background: #d9d3bd;

    font-size: 45px;
}

.mood-box p {

    font-size: 12px;

    line-height: 2;

    color: #595b43;
}

/* =====================================================
   STICKERS
   ===================================================== */

.sticker-box {

    position: relative;

    margin: 20px 5px;

    padding: 20px;

    text-align: center;

    transform: rotate(-2deg);

    color: #6e7655;

    background: #ded8c2;

    border: 2px dashed #7e805e;

    box-shadow:
        3px 3px 0 #22231b;
}

.sticker-box img {

    max-width: 100px;
}

/* =====================================================
   MINI PHOTO
   ===================================================== */

.mini-photo {

    max-width: 90%;
    max-height: 180px;

    border: 2px solid #554f39;

    padding: 4px;

    background: #f0ead7;

    box-shadow:
        3px 3px 0 #777358;
}

/* =====================================================
   WEBRING
   ===================================================== */

.webring {

    padding: 25px;

    text-align: center;

    color: #55513c;
}

.webring a {

    color: #65704e;
}

/* =====================================================
   88x31 BUTTON
   ===================================================== */

.fake-88 {

    width: 88px;
    height: 31px;

    margin: 15px auto;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #eee8d4;

    background:
        linear-gradient(
            135deg,
            #697355,
            #343b2c
        );

    border: 1px solid #aaa57b;

    font-size: 7px;

    line-height: 1.1;

    text-align: center;

    box-shadow:
        2px 2px 0 #4a4934;
}

/* =====================================================
   FOOTER
   ===================================================== */

footer {

    padding: 20px;

    text-align: center;

    color: #aaa88a;

    border-top:
        1px solid #68684e;
}

footer a {

    color: #858d66;

    text-decoration: none;
}

footer a:hover {

    color: #d7d3bb;
}

.tiny {

    color: #77765b;

    font-size: 10px;
}

/* =====================================================
   MOBILE
   ===================================================== */

@media(max-width: 850px) {

    .layout {

        grid-template-columns:
            170px 1fr;
    }

    .right-column {

        grid-column: 1 / -1;

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 8px;
    }
}

@media(max-width: 650px) {

    .wrapper {

        width: 98%;
    }

    .site-header {

        flex-direction: column;

        text-align: center;

        gap: 15px;
    }

    .logo h1 {

        font-size: 22px;
    }

    .layout,
    .two-column {

        display: block;
    }

    .left-column,
    .right-column {

        display: block;
    }

    .hero {

        min-height: 330px;
    }

    .media-grid,
    .album-grid {

        grid-template-columns:
            1fr 1fr;
    }

    .interest-grid {

        grid-template-columns:
            1fr 1fr;
    }

    .big-player {

        display: block;
    }

    .big-player > img {

        display: block;

        width: 70%;

        max-width: 250px;

        margin: auto;
    }

    .big-player-info {

        text-align: center;
    }

    .profile {

        display: block;

        text-align: center;
    }

    .profile-picture {
      
      /* =========================================
   NUJABES FALLING PETALS
   ========================================= */

.falling-petals {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    pointer-events: none;

    z-index: 9998;
}

.falling-petals img {
    position: absolute;

    top: -30px;

    width: 13px;
    height: auto;

    image-rendering: pixelated;

    opacity: 0;

    animation:
        petalFall 10s linear infinite,
        petalSpin 3s ease-in-out infinite alternate;
}


/* DIFFERENT POSITIONS */

.falling-petals img:nth-child(1) {
    left: 3%;
    animation-delay: 0s;
    animation-duration: 11s, 3s;
}

.falling-petals img:nth-child(2) {
    left: 11%;
    width: 9px;
    animation-delay: 3s;
    animation-duration: 8s, 4s;
}

.falling-petals img:nth-child(3) {
    left: 19%;
    width: 15px;
    animation-delay: 6s;
    animation-duration: 13s, 3s;
}

.falling-petals img:nth-child(4) {
    left: 27%;
    animation-delay: 1s;
    animation-duration: 9s, 4s;
}

.falling-petals img:nth-child(5) {
    left: 36%;
    width: 10px;
    animation-delay: 5s;
    animation-duration: 12s, 3s;
}

.falling-petals img:nth-child(6) {
    left: 45%;
    width: 14px;
    animation-delay: 8s;
    animation-duration: 10s, 4s;
}

.falling-petals img:nth-child(7) {
    left: 53%;
    width: 9px;
    animation-delay: 2s;
    animation-duration: 14s, 3s;
}

.falling-petals img:nth-child(8) {
    left: 61%;
    width: 13px;
    animation-delay: 7s;
    animation-duration: 9s, 4s;
}

.falling-petals img:nth-child(9) {
    left: 70%;
    width: 16px;
    animation-delay: 4s;
    animation-duration: 12s, 3s;
}

.falling-petals img:nth-child(10) {
    left: 78%;
    width: 9px;
    animation-delay: 10s;
    animation-duration: 11s, 4s;
}

.falling-petals img:nth-child(11) {
    left: 87%;
    width: 14px;
    animation-delay: 1.5s;
    animation-duration: 13s, 3s;
}

.falling-petals img:nth-child(12) {
    left: 95%;
    width: 10px;
    animation-delay: 6s;
    animation-duration: 10s, 4s;
}


/* =========================================
   FALLING
   ========================================= */

@keyframes petalFall {

    0% {
        transform:
            translate(-30px, -40px)
            rotate(0deg);

        opacity: 0;
    }

    10% {
        opacity: .8;
    }

    50% {
        opacity: .65;
    }

    90% {
        opacity: .3;
    }

    100% {
        transform:
            translate(130px, 110vh)
            rotate(360deg);

        opacity: 0;
    }
}


/* =========================================
   GENTLE FLUTTER
   ========================================= */

@keyframes petalSpin {

    0% {
        margin-left: -25px;
        transform: rotate(-30deg);
    }

    50% {
        margin-left: 25px;
        transform: rotate(50deg);
    }

    100% {
        margin-left: -10px;
        transform: rotate(110deg);
    }
}


/* MOBILE - FEWER PETALS */

@media (max-width: 650px) {

    .falling-petals img:nth-child(n+9) {
        display: none;
    }

}

        margin: auto;
    }
}