/* ==================================================
   CHIBI'S DIARY
   DREAM HORROR PUBLIC DIARY

   BLACK / WHITE / RED
   ================================================== */


/* ==================================================
   RESET
   ================================================== */

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}


body.haunted-diary-body {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;

    background: #000;
    color: #fff;

    font-family:
        "Courier New",
        monospace;
}


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

.public-diary-page {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding:
        46px
        15px
        70px;

    background:
        transparent !important;
}


/* ==================================================
   ACTUAL IMAGE BACKGROUND

   diary-bg.jpg must be in the SAME FOLDER
   as diary.html / diary-public.css
   ================================================== */

.dream-scene {
    position: fixed;
    inset: 0;

    z-index: 0;

    overflow: hidden;
    pointer-events: none;

    background-image:

        linear-gradient(
            to bottom,
            rgba(0,0,0,0.05),
            rgba(0,0,0,0.15)
        ),

        url("diary-bg.jpg");

    background-position:
        center center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

    background-color:
        #000;
}


/* ==================================================
   VIGNETTE
   ================================================== */

.dream-vignette {
    position: absolute;
    inset: 0;

    z-index: 30;

    pointer-events: none;

    background:

        radial-gradient(
            circle at center,

            transparent
            35%,

            rgba(0,0,0,0.18)
            67%,

            rgba(0,0,0,0.72)
            100%
        );
}


/* ==================================================
   SUBTLE CRT / DREAM FILTER
   ================================================== */

.dream-scene::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 26;

    pointer-events: none;

    background:

        repeating-linear-gradient(
            0deg,

            transparent
            0,

            transparent
            3px,

            rgba(0,0,0,0.045)
            4px
        );
}


/* ==================================================
   RAIN
   ================================================== */

.dream-rain {
    position: absolute;
    inset: 0;

    z-index: 18;

    overflow: hidden;

    pointer-events: none;
}


.rain-drop {
    position: absolute;

    top: -80px;

    width: 1px;

    border-radius: 999px;

    background:

        linear-gradient(
            to bottom,

            transparent,

            rgba(255,255,255,0.76),

            transparent
        );

    box-shadow:

        0
        0
        2px
        rgba(255,255,255,0.22);

    animation-name:
        diaryRainFall;

    animation-timing-function:
        linear;

    animation-iteration-count:
        infinite;
}


/* ==================================================
   FALLING CARD SUITS
   ================================================== */

.falling-symbols {
    position: absolute;
    inset: 0;

    z-index: 16;

    overflow: hidden;

    pointer-events: none;
}


.fall-symbol {
    position: absolute;

    top: -50px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    line-height: 1;

    text-shadow:

        0
        0
        5px
        rgba(255,255,255,0.12),

        0
        0
        9px
        rgba(160,0,24,0.22);

    animation-name:
        diarySymbolFall;

    animation-timing-function:
        linear;

    animation-iteration-count:
        infinite;
}


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

.public-diary-window {
    position: relative;

    z-index: 5;

    width:
        min(
            850px,
            96vw
        );

    max-width: 96%;

    overflow: hidden;

    background:
        #000 !important;

    border:
        1px solid
        rgba(255,255,255,0.48);

    box-shadow:

        0
        0
        0
        1px
        #000,

        10px
        10px
        0
        rgba(0,0,0,0.72),

        0
        20px
        48px
        rgba(0,0,0,0.75);
}


/* ==================================================
   REMOVE OLD WINDOW DECOR
   ================================================== */

.public-diary-window::before {
    display:
        none !important;
}


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

.public-diary-bar {
    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap: 16px;

    padding:
        8px
        11px;

    min-height: 30px;

    background:
        #000 !important;

    color:
        #fff !important;

    border-bottom:
        1px solid
        rgba(255,255,255,0.34);

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    font-weight:
        normal;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

    text-shadow:
        none;
}


/* ==================================================
   NO CHECKERS
   ================================================== */

.public-diary-window
.diary-checkers {
    display:
        none !important;
}


/* ==================================================
   BOTTOM LINE
   ================================================== */

.diary-bottom-line {
    height: 1px;

    background:
        rgba(255,255,255,0.25);
}


/* ==================================================
   CONTENT
   ================================================== */

.public-diary-content {
    position: relative;

    padding:
        27px
        30px
        36px;

    background:
        #000 !important;

    color:
        #fff;
}


/* ==================================================
   DIRECTORY
   ================================================== */

.diary-directory {
    display: flex;

    align-items:
        center;

    margin:
        0
        0
        18px;

    padding:
        6px
        0
        8px;

    background:
        #000 !important;

    color:
        rgba(255,255,255,0.52);

    border: 0;

    border-bottom:
        1px dotted
        rgba(255,255,255,0.23);

    box-shadow:
        none;

    font-family:
        "Courier New",
        monospace;

    font-size:
        9px;

    letter-spacing:
        1px;
}


.diary-directory::before {
    display:
        none !important;
}


/* ==================================================
   MUSIC BUTTON
   ================================================== */

#diary-music-toggle,
.diary-music-toggle {
    margin:
        0
        0
        22px
        0 !important;

    padding:
        6px
        10px !important;

    background:
        #000 !important;

    color:
        #fff !important;

    border:
        1px solid
        rgba(255,255,255,0.50)
        !important;

    box-shadow:
        none !important;

    font-family:
        "Courier New",
        monospace
        !important;

    font-size:
        9px
        !important;

    letter-spacing:
        1px
        !important;

    cursor:
        pointer;
}


#diary-music-toggle:hover,
.diary-music-toggle:hover {
    background:
        #fff !important;

    color:
        #000 !important;
}


/* ==================================================
   HEADING
   ================================================== */

.diary-heading {
    position: relative;

    margin:
        0
        0
        20px;

    padding:
        18px
        4px
        21px;

    background:
        #000 !important;

    border: 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.18);

    box-shadow:
        none;

    text-align:
        left;
}


.diary-heading::before,
.diary-heading::after {
    display:
        none !important;
}


/* ==================================================
   FILE LABEL
   ================================================== */

.diary-file {
    margin:
        0
        0
        8px;

    color:
        rgba(255,255,255,0.43);

    font-family:
        "Courier New",
        monospace;

    font-size:
        9px;

    letter-spacing:
        2px;
}


/* ==================================================
   MAIN TITLE
   ================================================== */

.public-diary-content h1,
.diary-heading h1 {
    margin: 0;

    color:
        #fff !important;

    font-family:
        "Courier New",
        monospace;

    font-size:
        clamp(
            30px,
            6vw,
            47px
        );

    font-weight:
        normal;

    letter-spacing:
        5px;

    text-shadow:

        0
        0
        8px
        rgba(255,255,255,0.10);
}


/* ==================================================
   SUBTITLE
   ================================================== */

.diary-subtitle {
    margin:
        11px
        0
        0;

    color:
        rgba(255,255,255,0.62);

    font-family:
        "Courier New",
        monospace;

    font-size:
        10px;

    line-height:
        1.6;

    letter-spacing:
        1px;
}


/* ==================================================
   TYPING AREA
   ================================================== */

.diary-system-note {
    position: relative;

    display: block;

    min-height:
        34px;

    margin:
        16px
        0
        8px;

    padding:
        9px
        1px;

    background:
        #000 !important;

    border:
        0;

    box-shadow:
        none;

    color:
        #fff;

    font-family:
        "Courier New",
        monospace;

    font-size:
        12px;

    letter-spacing:
        3px;
}


/* ==================================================
   TYPING TEXT
   ================================================== */

.diary-system-note::before {
    content:
        "";

    animation:
        diaryThinking
        4s
        steps(1, end)
        infinite;
}


/* ==================================================
   BLINKING CURSOR
   ================================================== */

.diary-system-note::after {
    content:
        "_";

    display:
        inline-block;

    margin-left:
        5px;

    color:
        #fff;

    animation:
        diaryCursor
        0.9s
        steps(1, end)
        infinite;
}


/* ==================================================
   DIVIDER
   ================================================== */

.diary-divider {
    margin:
        11px
        0
        27px;

    color:
        rgba(255,255,255,0.40);

    text-align:
        left;

    font-family:
        Georgia,
        serif;

    font-size:
        11px;

    letter-spacing:
        5px;

    text-shadow:

        0
        0
        5px
        rgba(255,255,255,0.08);
}


/* ==================================================
   POSTS
   ================================================== */

#diary-posts {
    display:
        grid;

    gap:
        24px;
}


/* ==================================================
   LOADING
   ================================================== */

.public-diary-page
.diary-loading,

.public-diary-page
.empty-diary {
    margin: 0;

    padding:
        20px
        0;

    background:
        #000;

    color:
        rgba(255,255,255,0.62);

    text-align:
        left;

    font-family:
        "Courier New",
        monospace;

    font-size:
        10px;

    letter-spacing:
        2px;
}


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

.public-diary-page
.diary-post {
    position:
        relative;

    margin:
        0;

    overflow:
        hidden;

    background:
        #000 !important;

    color:
        #fff !important;

    border:
        1px solid
        rgba(255,255,255,0.30);

    box-shadow:
        none;
}


.public-diary-page
.diary-post::before,

.public-diary-page
.diary-post::after {
    display:
        none !important;
}


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

.public-diary-page
.post-header {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        8px
        10px;

    background:
        #000 !important;

    color:
        #fff !important;

    border-bottom:
        1px solid
        rgba(255,255,255,0.30);

    font-family:
        "Courier New",
        monospace;

    font-size:
        10px;

    letter-spacing:
        1px;
}


/* ==================================================
   POST META
   ================================================== */

.public-diary-page
.post-meta {
    padding:
        6px
        10px;

    background:
        #000 !important;

    color:
        rgba(255,255,255,0.43)
        !important;

    border-bottom:
        1px dotted
        rgba(255,255,255,0.18);

    font-family:
        "Courier New",
        monospace;

    font-size:
        9px;

    letter-spacing:
        1px;
}


/* ==================================================
   POST BODY
   ================================================== */

.public-diary-page
.post-body {
    padding:
        22px
        20px;

    background:
        #000;

    color:
        #fff !important;

    font-family:
        "Courier New",
        monospace;

    font-size:
        14px;

    line-height:
        1.8;
}


/* ==================================================
   POST TITLE
   ================================================== */

.public-diary-page
.post-title {
    margin:
        0
        0
        14px;

    color:
        #fff !important;

    font-family:
        "Courier New",
        monospace;

    font-size:
        19px;

    font-weight:
        normal;

    letter-spacing:
        2px;
}


/* ==================================================
   POST TEXT
   ================================================== */

.public-diary-page
.diary-text {
    margin:
        12px
        0
        0;

    color:
        rgba(255,255,255,0.88)
        !important;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;
}


/* ==================================================
   OLD PHOTO POSTS
   ================================================== */

.public-diary-page
.diary-photo {
    display:
        block;

    width:
        100%;

    max-height:
        700px;

    box-sizing:
        border-box;

    margin:
        10px
        auto
        15px;

    object-fit:
        contain;

    background:
        #000;

    border:
        1px solid
        rgba(255,255,255,0.28);

    box-shadow:
        none;
}


/* ==================================================
   OLD VIDEO POSTS
   ================================================== */

.public-diary-page
.diary-video {
    display:
        block;

    width:
        100%;

    max-height:
        650px;

    box-sizing:
        border-box;

    margin:
        10px
        auto
        15px;

    background:
        #000;

    border:
        1px solid
        rgba(255,255,255,0.28);

    box-shadow:
        none;
}


/* ==================================================
   MULTI-ATTACHMENT POSTS
   ================================================== */

.public-diary-page
.multi-attachment-post
.post-body-with-attachments {
    display:
        block !important;
}


.public-diary-page
.multi-attachment-post
.post-copy {
    margin-bottom:
        22px;
}


/* ==================================================
   ATTACHMENTS
   ================================================== */

.public-diary-page
.diary-attachments {
    margin-top:
        22px;

    padding-top:
        14px;

    border-top:
        1px dotted
        rgba(255,255,255,0.24);
}


.public-diary-page
.diary-attachments-heading {
    margin-bottom:
        12px;

    color:
        rgba(255,255,255,0.52);

    font-family:
        "Courier New",
        monospace;

    font-size:
        9px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}


/* ==================================================
   ATTACHMENT GRID
   ================================================== */

.public-diary-page
.diary-attachment-gallery {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        12px;

    align-items:
        start;
}


.public-diary-page
.diary-attachment-item {
    min-width:
        0;

    box-sizing:
        border-box;

    background:
        #000;

    color:
        #fff;

    border:
        1px solid
        rgba(255,255,255,0.24);

    box-shadow:
        none;
}


.public-diary-page
.diary-attachment-gallery
.diary-attachment-item:only-child {
    grid-column:
        1 / -1;
}


/* audio is always full width */

.public-diary-page
.diary-audio-player,

.public-diary-page
.diary-youtube-player,

.public-diary-page
.diary-apple-player {
    grid-column:
        1 / -1;
}


/* ==================================================
   IMAGE / GIF ATTACHMENTS
   ================================================== */

.public-diary-page
.diary-image-attachment {
    padding:
        6px;
}


.public-diary-page
.diary-attachment-image {
    display:
        block;

    width:
        100%;

    height:
        auto;

    max-height:
        620px;

    box-sizing:
        border-box;

    object-fit:
        contain;

    background:
        #000;

    border:
        1px solid
        rgba(255,255,255,0.18);
}


.public-diary-page
.diary-attachment-label {
    padding:
        6px
        3px
        2px;

    color:
        rgba(255,255,255,0.44);

    font-family:
        "Courier New",
        monospace;

    font-size:
        8px;

    line-height:
        1.35;

    letter-spacing:
        1px;

    overflow-wrap:
        anywhere;
}


/* ==================================================
   VIDEO ATTACHMENTS
   ================================================== */

.public-diary-page
.diary-video-attachment {
    grid-column:
        1 / -1;

    padding:
        6px;
}


.public-diary-page
.diary-attachment-video {
    display:
        block;

    width:
        100%;

    max-height:
        620px;

    box-sizing:
        border-box;

    background:
        #000;

    border:
        1px solid
        rgba(255,255,255,0.18);
}


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

.public-diary-page
.diary-audio-player,

.public-diary-page
.diary-youtube-player,

.public-diary-page
.diary-apple-player {
    position:
        relative;

    overflow:
        hidden;

    padding:
        0;

    background:

        linear-gradient(
            to bottom,
            #090909,
            #000
        );

    border:
        1px solid
        rgba(255,255,255,0.38);
}


.public-diary-page
.diary-audio-player::after,

.public-diary-page
.diary-youtube-player::after,

.public-diary-page
.diary-apple-player::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        repeating-linear-gradient(
            0deg,

            transparent
            0,

            transparent
            3px,

            rgba(255,255,255,0.018)
            4px
        );
}


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

.public-diary-page
.diary-mini-player-top {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        12px;

    padding:
        7px
        9px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.22);

    color:
        rgba(255,255,255,0.55);

    font-family:
        "Courier New",
        monospace;

    font-size:
        8px;

    letter-spacing:
        1px;
}


.public-diary-page
.diary-mini-player-file {
    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.public-diary-page
.diary-mini-player-type {
    flex:
        0 0 auto;

    color:
        #b30018;

    letter-spacing:
        2px;
}


/* ==================================================
   PLAYER DISPLAY
   ================================================== */

.public-diary-page
.diary-mini-player-display {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-height:
        42px;

    padding:
        10px
        11px
        8px;

    color:
        #fff;

    font-family:
        "Courier New",
        monospace;

    font-size:
        11px;

    letter-spacing:
        1px;
}


.public-diary-page
.diary-mini-player-note {
    flex:
        0 0 auto;

    color:
        #c7001b;

    font-family:
        Georgia,
        serif;

    font-size:
        17px;

    text-shadow:

        0
        0
        7px
        rgba(180,0,24,0.30);
}


.public-diary-page
.diary-mini-player-song {
    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* ==================================================
   PLAYER TIME
   ================================================== */

.public-diary-page
.diary-mini-player-time {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        0
        11px
        5px;

    color:
        rgba(255,255,255,0.40);

    font-family:
        "Courier New",
        monospace;

    font-size:
        8px;

    letter-spacing:
        1px;
}


/* ==================================================
   PLAYER PROGRESS
   ================================================== */

.public-diary-page
.diary-mini-player-progress {
    position:
        relative;

    z-index:
        1;

    display:
        block;

    width:
        calc(100% - 22px);

    height:
        12px;

    margin:
        0
        11px
        9px;

    padding:
        0;

    appearance:
        none;

    -webkit-appearance:
        none;

    background:
        transparent;

    cursor:
        pointer;
}


.public-diary-page
.diary-mini-player-progress::-webkit-slider-runnable-track {
    height:
        3px;

    background:
        rgba(255,255,255,0.25);

    border:
        0;
}


.public-diary-page
.diary-mini-player-progress::-webkit-slider-thumb {
    width:
        8px;

    height:
        11px;

    margin-top:
        -4px;

    appearance:
        none;

    -webkit-appearance:
        none;

    background:
        #fff;

    border:
        0;

    border-radius:
        0;
}


.public-diary-page
.diary-mini-player-progress::-moz-range-track {
    height:
        3px;

    background:
        rgba(255,255,255,0.25);

    border:
        0;
}


.public-diary-page
.diary-mini-player-progress::-moz-range-thumb {
    width:
        8px;

    height:
        11px;

    background:
        #fff;

    border:
        0;

    border-radius:
        0;
}


.public-diary-page
.diary-mini-player-progress:disabled {
    opacity:
        0.34;

    cursor:
        default;
}


/* ==================================================
   PLAYER CONTROLS
   ================================================== */

.public-diary-page
.diary-mini-player-controls {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px
        10px;

    border-top:
        1px dotted
        rgba(255,255,255,0.18);
}


.public-diary-page
.diary-mini-player-button {
    width:
        34px;

    min-width:
        34px;

    height:
        27px;

    padding:
        0;

    background:
        #000;

    color:
        #fff;

    border:
        1px solid
        rgba(255,255,255,0.50);

    border-radius:
        0;

    font-family:
        "Courier New",
        monospace;

    font-size:
        10px;

    cursor:
        pointer;
}


.public-diary-page
.diary-mini-player-button:hover:not(:disabled) {
    background:
        #fff;

    color:
        #000;
}


.public-diary-page
.diary-mini-player-button:disabled {
    opacity:
        0.35;

    cursor:
        default;
}


.public-diary-page
.diary-mini-player-volume-label {
    color:
        rgba(255,255,255,0.44);

    font-family:
        "Courier New",
        monospace;

    font-size:
        8px;

    letter-spacing:
        1px;
}


.public-diary-page
.diary-mini-player-volume {
    width:
        95px;

    height:
        12px;

    padding:
        0;

    appearance:
        none;

    -webkit-appearance:
        none;

    background:
        transparent;

    cursor:
        pointer;
}


.public-diary-page
.diary-mini-player-volume::-webkit-slider-runnable-track {
    height:
        3px;

    background:
        rgba(255,255,255,0.25);
}


.public-diary-page
.diary-mini-player-volume::-webkit-slider-thumb {
    width:
        7px;

    height:
        9px;

    margin-top:
        -3px;

    appearance:
        none;

    -webkit-appearance:
        none;

    background:
        #b30018;

    border:
        0;

    border-radius:
        0;
}


.public-diary-page
.diary-mini-player-volume::-moz-range-track {
    height:
        3px;

    background:
        rgba(255,255,255,0.25);
}


.public-diary-page
.diary-mini-player-volume::-moz-range-thumb {
    width:
        7px;

    height:
        9px;

    background:
        #b30018;

    border:
        0;

    border-radius:
        0;
}


.public-diary-page
.diary-mini-player-volume:disabled {
    opacity:
        0.35;

    cursor:
        default;
}


/* ==================================================
   YOUTUBE PLAYER
   ================================================== */

.public-diary-page
.diary-youtube-screen {
    position:
        relative;

    z-index:
        1;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    max-height:
        310px;

    overflow:
        hidden;

    background:
        #030303;

    border-top:
        1px dotted
        rgba(255,255,255,0.15);

    border-bottom:
        1px dotted
        rgba(255,255,255,0.15);
}


.public-diary-page
.diary-youtube-screen > div,

.public-diary-page
.diary-youtube-screen iframe {
    display:
        block;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        180px;

    border:
        0;
}


.public-diary-page
.diary-youtube-link {
    position:
        relative;

    z-index:
        1;

    display:
        block;

    padding:
        7px
        10px;

    color:
        rgba(255,255,255,0.48);

    border-top:
        1px dotted
        rgba(255,255,255,0.15);

    font-family:
        "Courier New",
        monospace;

    font-size:
        8px;

    letter-spacing:
        1px;

    text-decoration:
        none;
}


.public-diary-page
.diary-youtube-link:hover {
    color:
        #fff;
}


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

   Styling is ready now.
   Functional Apple Music link support
   gets connected in the JS pass.
   ================================================== */

.public-diary-page
.diary-apple-player {
    padding:
        0;
}


.public-diary-page
.diary-apple-embed {
    position:
        relative;

    z-index:
        1;

    display:
        block;

    width:
        100%;

    min-height:
        150px;

    border:
        0;

    background:
        #000;
}


.public-diary-page
.diary-apple-link {
    position:
        relative;

    z-index:
        1;

    display:
        block;

    padding:
        7px
        10px;

    color:
        rgba(255,255,255,0.48);

    border-top:
        1px dotted
        rgba(255,255,255,0.15);

    font-family:
        "Courier New",
        monospace;

    font-size:
        8px;

    letter-spacing:
        1px;

    text-decoration:
        none;
}


.public-diary-page
.diary-apple-link:hover {
    color:
        #fff;
}


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

.public-diary-page
.post-footer {
    padding:
        7px
        10px;

    background:
        #000 !important;

    color:
        rgba(255,255,255,0.35)
        !important;

    border-top:
        1px dotted
        rgba(255,255,255,0.15);

    text-align:
        right;

    font-family:
        "Courier New",
        monospace;

    font-size:
        8px;

    letter-spacing:
        2px;
}


/* ==================================================
   END OF FILE
   ================================================== */

.public-diary-page
.end-of-file {
    margin:
        38px
        0
        23px;

    padding:
        17px
        0
        7px;

    background:
        #000;

    color:
        rgba(255,255,255,0.46);

    border-top:
        1px dotted
        rgba(255,255,255,0.18);

    text-align:
        left;

    font-family:
        "Courier New",
        monospace;

    font-size:
        9px;

    letter-spacing:
        2px;
}


.end-broken-line {
    margin-bottom:
        8px;

    color:
        rgba(255,255,255,0.32);

    letter-spacing:
        3px;
}


.public-diary-page
.end-of-file p {
    margin:
        5px
        0;

    color:
        #fff;
}


/* ==================================================
   RETURN
   ================================================== */

.public-diary-page
.diary-return {
    display:
        inline-block;

    margin-top:
        13px;

    padding:
        7px
        10px;

    background:
        #000;

    color:
        #fff;

    border:
        1px solid
        rgba(255,255,255,0.48);

    box-shadow:
        none;

    font-family:
        "Courier New",
        monospace;

    font-size:
        9px;

    letter-spacing:
        1px;

    text-decoration:
        none;
}


.public-diary-page
.diary-return::before {
    display:
        none !important;
}


.public-diary-page
.diary-return:hover {
    background:
        #fff;

    color:
        #000;

    text-shadow:
        none;
}


/* ==================================================
   RAIN ANIMATION
   ================================================== */

@keyframes diaryRainFall {

    from {

        transform:
            translateY(
                -50px
            )
            rotate(
                5deg
            );

    }


    to {

        transform:
            translateY(
                115vh
            )
            rotate(
                5deg
            );

    }

}


/* ==================================================
   FALLING SYMBOL ANIMATION
   ================================================== */

@keyframes diarySymbolFall {

    from {

        transform:
            translateY(
                -50px
            )
            rotate(
                0deg
            );

    }


    to {

        transform:
            translateY(
                115vh
            )
            rotate(
                190deg
            );

    }

}


/* ==================================================
   "_ _ _ . . ." TYPING
   ================================================== */

@keyframes diaryThinking {

    0% {
        content:
            "_";
    }

    12% {
        content:
            "_ _";
    }

    24% {
        content:
            "_ _ _";
    }

    36% {
        content:
            "_ _ _ .";
    }

    48% {
        content:
            "_ _ _ . .";
    }

    60% {
        content:
            "_ _ _ . . .";
    }

    78% {
        content:
            "_ _ _ . . .";
    }

    90% {
        content:
            "_ _";
    }

    100% {
        content:
            "";
    }

}


/* ==================================================
   CURSOR
   ================================================== */

@keyframes diaryCursor {

    0%,
    49% {
        opacity:
            1;
    }


    50%,
    100% {
        opacity:
            0;
    }

}


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

@media (
    max-width:
    700px
) {

    .public-diary-page {
        padding:
            20px
            8px
            45px;

        background:
            transparent !important;
    }


    .dream-scene {
        background-position:
            center center;
    }


    .public-diary-window {
        width:
            100%;

        max-width:
            97%;
    }


    .public-diary-content {
        padding:
            21px
            16px
            28px;
    }


    .public-diary-bar {
        font-size:
            9px;
    }


    .public-diary-bar
    span:last-child {
        display:
            none;
    }


    .public-diary-content h1,
    .diary-heading h1 {
        font-size:
            30px;

        letter-spacing:
            3px;
    }


    .public-diary-page
    .post-body {
        padding:
            18px
            15px;

        font-size:
            13px;
    }


    .public-diary-page
    .diary-attachment-gallery {
        grid-template-columns:

            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            8px;
    }


    .public-diary-page
    .diary-audio-player,

    .public-diary-page
    .diary-youtube-player,

    .public-diary-page
    .diary-apple-player,

    .public-diary-page
    .diary-video-attachment {
        grid-column:
            1 / -1;
    }


    .public-diary-page
    .diary-mini-player-display {
        font-size:
            10px;
    }


    .public-diary-page
    .diary-mini-player-volume {
        width:
            72px;
    }

}


/* ==================================================
   SMALL PHONE
   ================================================== */

@media (
    max-width:
    430px
) {

    .public-diary-page
    .diary-attachment-gallery {
        grid-template-columns:
            1fr;
    }


    .public-diary-page
    .diary-attachment-item,

    .public-diary-page
    .diary-audio-player,

    .public-diary-page
    .diary-youtube-player,

    .public-diary-page
    .diary-apple-player,

    .public-diary-page
    .diary-video-attachment {
        grid-column:
            1;
    }


    .public-diary-page
    .diary-mini-player-controls {
        flex-wrap:
            wrap;
    }


    .public-diary-page
    .diary-mini-player-volume {
        flex:
            1 1 90px;

        width:
            auto;
    }


    .public-diary-page
    .diary-youtube-screen {
        max-height:
            none;
    }

}


/* ==================================================
   VERY SMALL
   ================================================== */

@media (
    max-width:
    400px
) {

    .public-diary-content h1,
    .diary-heading h1 {
        font-size:
            26px;

        letter-spacing:
            2px;
    }

}


/* ==================================================
   REDUCED MOTION
   ================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    .rain-drop,
    .fall-symbol,
    .diary-system-note::before,
    .diary-system-note::after {
        animation:
            none !important;
    }


    .diary-system-note::before {
        content:
            "_ _ _ . . .";
    }

}