@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');


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

html,
body {
    margin: 0;
    padding: 0;

    min-height: 100%;

    background: #f3aebd;
}


.diary-page {
    width: 100%;
    min-height: 100vh;

    box-sizing: border-box;

    position: relative;

    overflow-x: hidden;

    display: flex;

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

    padding: 55px 20px;

    font-family: "VT323", monospace;

    color: #25251f;

    background:

        radial-gradient(
            circle at 18% 20%,
            rgba(255, 255, 255, 0.35),
            transparent 18%
        ),

        radial-gradient(
            circle at 82% 72%,
            rgba(82, 107, 82, 0.16),
            transparent 23%
        ),

        linear-gradient(
            to bottom,
            #ffc1cd 0%,
            #f7abbc 45%,
            #d98e9f 100%
        );
}


/* OLD SCREEN LINES */

.diary-page::after {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background:

        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            rgba(63, 37, 45, 0.05) 4px
        );

    z-index: 20;
}


/* ==================================================
   FLOATING SYMBOLS
   ================================================== */

.float-symbol {
    position: fixed;

    color:
        rgba(68, 82, 63, 0.55);

    font-size: 28px;

    z-index: 1;

    animation:
        diary-float
        6s
        ease-in-out
        infinite;
}


.symbol-one {
    top: 14%;
    left: 8%;
}


.symbol-two {
    top: 64%;
    left: 5%;

    animation-delay: 1s;
}


.symbol-three {
    top: 25%;
    right: 7%;

    animation-delay: 2s;
}


.symbol-four {
    bottom: 12%;
    right: 9%;

    animation-delay: 3s;
}


@keyframes diary-float {

    0%,
    100% {

        transform:
            translateY(0);

        opacity:
            0.4;
    }


    50% {

        transform:
            translateY(-12px);

        opacity:
            0.9;
    }

}


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

.diary-window {
    width: 760px;
    max-width: 94%;

    position: relative;

    z-index: 5;

    background: #fff0e5;

    border: 2px solid #394637;

    box-shadow:
        9px 9px 0 #714f59,
        0 0 35px rgba(67, 74, 58, 0.15);
}


/* ==================================================
   TITLE BAR
   ================================================== */

.diary-bar {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 7px 11px;

    background: #526b52;

    color: #ffd2dc;

    border-bottom:
        2px solid #263526;

    font-size: 18px;

    letter-spacing: 2px;
}


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

.diary-checkers {
    height: 14px;

    background-color:
        #ffdae1;

    background-image:

        linear-gradient(
            45deg,
            #2d352c 25%,
            transparent 25%
        ),

        linear-gradient(
            -45deg,
            #2d352c 25%,
            transparent 25%
        ),

        linear-gradient(
            45deg,
            transparent 75%,
            #2d352c 75%
        ),

        linear-gradient(
            -45deg,
            transparent 75%,
            #2d352c 75%
        );

    background-size:
        14px 14px;

    background-position:
        0 0,
        0 7px,
        7px -7px,
        -7px 0;
}


.bottom-checkers {
    opacity: 0.7;
}


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

.diary-content {
    padding:
        34px 42px 38px;
}


.diary-file {
    margin: 0;

    color: #7a8b72;

    font-size: 15px;

    letter-spacing: 4px;
}


.diary-content h1 {
    margin: 5px 0 0;

    color: #344432;

    font-size: 48px;

    font-weight: normal;

    letter-spacing: 6px;

    text-shadow:
        2px 2px 0 #efb2bd;
}


.diary-divider {
    margin: 25px 0 30px;

    color: #b77b89;

    text-align: center;

    font-size: 17px;

    letter-spacing: 6px;
}


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

.diary-post {
    margin-bottom: 30px;

    border:
        1px solid #687663;

    background:
        rgba(255, 247, 234, 0.9);

    box-shadow:
        4px 4px 0 #d195a4;
}


.post-header {
    display: flex;

    justify-content:
        space-between;

    padding: 6px 9px;

    color: #ffe1e6;

    background: #596f57;

    border-bottom:
        1px solid #303d2f;

    font-size: 18px;

    letter-spacing: 2px;
}


.post-meta {
    padding: 5px 10px;

    color: #a06877;

    background: #f5d2d8;

    border-bottom:
        1px dashed #9d747c;

    font-size: 14px;

    letter-spacing: 2px;
}


.post-body {
    padding: 20px;

    color: #3d4137;

    font-size: 19px;

    line-height: 1.45;
}


.post-title {
    margin:
        0 0 14px;

    color: #8f5266;

    font-size: 28px;

    font-weight: normal;

    letter-spacing: 2px;
}


.diary-text {
    margin:
        13px 0 0;

    white-space: pre-wrap;

    overflow-wrap: anywhere;
}


.diary-photo {
    display: block;

    width: 100%;
    max-height: 700px;

    object-fit: contain;

    background: #181713;

    border:
        1px solid #667362;
}


.diary-video {
    display: block;

    width: 100%;
    max-height: 650px;

    background: #050605;

    border:
        1px solid #667362;
}


.post-footer {
    padding: 6px 10px;

    color: #899580;

    border-top:
        1px dotted #aab29f;

    text-align: right;

    font-size: 14px;

    letter-spacing: 3px;
}


.tiny-post .post-body {
    padding:
        13px 18px;

    color: #775363;

    font-size: 20px;
}


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

.diary-loading,
.empty-diary {
    padding:
        25px 10px;

    color: #936775;

    text-align: center;

    font-size: 19px;

    letter-spacing: 2px;
}


/* ==================================================
   END
   ================================================== */

.end-of-file {
    margin:
        39px 0 27px;

    color: #927080;

    text-align: center;

    font-size: 15px;

    letter-spacing: 4px;
}


.end-of-file span {
    color: #526b52;
}


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

.diary-return {
    color: #536b52;

    text-decoration: none;

    font-size: 18px;

    letter-spacing: 2px;
}


.diary-return:hover {
    color: #b55f78;

    text-shadow:
        0 0 5px
        rgba(181, 95, 120, 0.3);
}


/* ==================================================
   ADMIN
   ================================================== */

.admin-diary-page {
    background:

        radial-gradient(
            circle at center,
            rgba(82, 107, 82, 0.18),
            transparent 40%
        ),

        linear-gradient(
            to bottom,
            #e9a8b6,
            #c8798d
        );
}


.admin-window {
    width: 700px;
}


.admin-status {
    color: #976273;

    font-size: 18px;

    letter-spacing: 3px;
}


.hidden {
    display: none !important;
}


/* LOGIN REQUIRED */

.login-required {
    margin:
        30px 0;

    padding:
        25px;

    text-align: center;

    border:
        1px solid #687663;

    background:
        #f7dce0;

    color:
        #824f60;
}


.login-required a {
    color: #526b52;

    font-size: 21px;
}


/* ==================================================
   POST FORM
   ================================================== */

.diary-post-form {
    margin-top: 25px;

    padding: 20px;

    border:
        1px solid #687663;

    background:
        rgba(255, 247, 234, 0.92);

    box-shadow:
        4px 4px 0 #d195a4;
}


.diary-post-form label {
    display: block;

    margin:
        15px 0 5px;

    color: #526b52;

    font-size: 17px;

    letter-spacing: 2px;
}


.diary-post-form label:first-child {
    margin-top: 0;
}


.optional {
    color: #a77986;

    font-size: 13px;
}


.diary-post-form input,
.diary-post-form textarea,
.diary-post-form select {
    width: 100%;

    box-sizing: border-box;

    padding:
        9px 10px;

    font-family:
        "VT323",
        monospace;

    font-size: 18px;

    color: #353b31;

    background: #fff7ec;

    border:
        1px solid #71806b;

    outline: none;
}


.diary-post-form textarea {
    min-height: 170px;

    resize: vertical;
}


.diary-post-form input:focus,
.diary-post-form textarea:focus,
.diary-post-form select:focus {
    border-color: #b45e78;

    box-shadow:
        0 0 0 1px #e6a4b5;
}


.media-area {
    margin-top: 18px;

    padding: 13px;

    border:
        1px dashed #9b7780;

    background: #f3d6dc;
}


.media-hint {
    margin:
        7px 0 0;

    color: #9a6b78;

    font-size: 14px;
}


#publish-button {
    width: 100%;

    margin-top: 22px;

    padding: 10px;

    font-family:
        "VT323",
        monospace;

    font-size: 20px;

    letter-spacing: 3px;

    color: #ffe7ec;

    background: #526b52;

    border:
        2px solid #344433;

    cursor: pointer;
}


#publish-button:hover {
    background: #647d62;
}


#publish-button:disabled {
    opacity: 0.6;

    cursor: default;
}


.publish-status {
    min-height: 24px;

    margin-top: 12px;

    color: #a25d71;

    font-size: 18px;

    letter-spacing: 2px;
}


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

.admin-divider {
    margin:
        40px 0 20px;

    color: #9b6a78;

    text-align: center;

    letter-spacing: 4px;
}


.admin-post-row {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 12px;

    margin-bottom: 9px;

    padding:
        9px 11px;

    border:
        1px solid #7d8874;

    background:
        rgba(255, 244, 232, 0.8);
}


.admin-post-info {
    min-width: 0;

    display: flex;

    flex-direction: column;
}


.admin-post-info strong {
    color: #526b52;

    letter-spacing: 2px;
}


.admin-post-info span {
    max-width: 450px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: #87606c;
}


.delete-post {
    padding:
        5px 10px;

    font-family:
        "VT323",
        monospace;

    color: #ffe5e9;

    background: #874f60;

    border:
        1px solid #5e3541;

    cursor: pointer;
}


.delete-post:hover {
    background: #a25b70;
}


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

.admin-links {
    margin-top: 30px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;
}


.admin-links a {
    color: #526b52;

    text-decoration: none;

    font-size: 18px;
}


.logout-button {
    padding:
        5px 12px;

    font-family:
        "VT323",
        monospace;

    color: #6e4653;

    background: #efd0d7;

    border:
        1px solid #996e79;

    cursor: pointer;
}


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

@media (max-width: 650px) {

    .diary-page {
        padding:
            25px 8px;
    }


    .diary-window {
        max-width: 96%;
    }


    .diary-bar {
        font-size: 14px;
    }


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


    .diary-content {
        padding:
            26px 17px 30px;
    }


    .diary-content h1 {
        font-size: 37px;

        letter-spacing: 4px;
    }


    .admin-post-info span {
        max-width: 180px;
    }


    .admin-links {
        flex-direction: column;

        gap: 15px;

        align-items: flex-start;
    }

}