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

* {
  box-sizing: border-box;
  }

/* =========================
HTML / BODY
========================= */

html {
background: #080608;
}

body {
min-height: 100vh;


margin: 0;
padding: 20px;

background-color: #080608;

background-image:
    linear-gradient(
        rgba(35, 5, 20, 0.65),
        rgba(35, 5, 20, 0.65)
    ),
    url("bg.jpg");

background-size: 500px 500px;
background-position: center;
background-repeat: repeat;

color: #eadce5;

font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

font-size: 13px;


}

/* =========================
SITE
========================= */

.site {
width: 900px;
max-width: 100%;


margin: auto;

border: 1px solid #7c405d;

background: #100b10;

box-shadow:
    0 0 20px rgba(180, 60, 120, 0.25);


}

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

.header {
padding: 25px;


text-align: center;

background:
    repeating-linear-gradient(
        45deg,
        #180d16,
        #180d16 5px,
        #21101d 5px,
        #21101d 10px
    );

border-bottom: 1px solid #7c405d;

}

.logo {
font-family: Georgia, serif;


font-size: 28px;

color: #ffb5d5;

text-shadow:
    0 0 5px #ff6fa8;


}

.subtitle {
margin-top: 8px;


font-size: 11px;

color: #a98999;


}

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

.nav {
padding: 8px;


text-align: center;

background: #170c14;

border-bottom: 1px solid #512c40;


}

.nav a {
margin: 0 8px;


color: #ff9fc5;

text-decoration: none;

font-weight: bold;


}

.nav a:hover {
color: white;

text-decoration: underline;


}

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

.layout {
display: grid;

grid-template-columns: 190px 1fr;

gap: 12px;

padding: 12px;


}

/* =========================
BOXES
========================= */

.box {
margin-bottom: 12px;

padding: 10px;

background: #160e15;

border: 1px solid #573347;


}

.box-title {
margin: -10px -10px 10px -10px;

padding: 5px;

background: #281322;

border-bottom: 1px solid #573347;

color: #ffafd0;

font-size: 11px;

font-weight: bold;

text-transform: uppercase;


}

/* =========================
SIDEBAR
========================= */

.me {
display: block;


width: 120px;
height: 120px;

margin: auto;

object-fit: cover;

border: 2px solid #6c3a51;


}

.sidebar p {
line-height: 1.5;
}

.online {
color: #ff76a8;


text-shadow:
    0 0 5px #ff76a8;


}

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

.content {
min-width: 0;
}

h1,
h2 {
margin-top: 0;


font-family: Georgia, serif;

color: #ffb5d5;


}

h1 {
font-size: 23px;
}

h2 {
font-size: 19px;
}

p {
line-height: 1.6;
}

a {
color: #ff9fc5;
}

a:hover {
color: white;
}

/* =========================
CENTERED PAGE CONTENT
========================= */

.page-content {
grid-column: 1 / -1;


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

margin: 0 auto;

text-align: center;


}

.page-content .box {
text-align: center;
}

.page-content p {
text-align: center;
}

/* =========================
BLOG SEARCH
========================= */

.blog-search {
margin-bottom: 12px;
}

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

#posts {
width: 100%;
}

/* =========================
INDIVIDUAL POST
========================= */

#posts .post {
    width: 100%;

    margin: 0 0 14px 0;
    padding: 15px;

    background: #160e15;
    border: 1px solid #573347;

    display: grid;

    /*
       Row 1 = main post content + image
       Row 2 = footer

       Column 1 = text
       Column 2 = image
    */

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

    grid-template-rows:
        auto
        auto;

    column-gap: 18px;
    row-gap: 12px;

    text-align: left;

    overflow: hidden;
}


/* =========================
POST MOOD
========================= */

#posts .post .post-mood {
    display: none;
}


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

#posts .post .post-content {
    grid-column: 1;
    grid-row: 1;

    min-width: 0;

    padding: 4px 5px 5px 3px;

    text-align: left;

    /*
       Keeps all text inside the left column.
       Nothing can flow underneath the image.
    */
    overflow-wrap: break-word;
}


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

#posts .post h2 {
    margin: 0 0 6px 0;

    color: #ffb5d5;

    font-family: Georgia, serif;

    font-size: 19px;

    line-height: 1.3;

    text-align: left;
}


/* =========================
POST DATE
========================= */

#posts .post .post-date {
    margin: 0 0 14px 0;

    color: #876f7b;

    font-size: 10px;

    line-height: 1.3;

    text-align: left;
}


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

#posts .post .post-text {
    margin: 0;

    color: #eadce5;

    font-size: 13px;

    line-height: 1.65;

    white-space: pre-wrap;

    text-align: left;

    /*
       Forces long text to remain
       inside the text column.
    */
    overflow-wrap: break-word;
    word-break: normal;
}


/* =========================
IMAGE COLUMN
========================= */

#posts .post .post-image-wrapper {
    grid-column: 2;
    grid-row: 1;

    width: 360px;
    height: 300px;

    padding: 6px;

    background: #0b080b;

    border: 1px solid #573347;

    display: flex;

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

    overflow: hidden;

    /*
       Keeps the image in its own
       dedicated column.
    */
    align-self: start;
}


/* =========================
POST IMAGE
========================= */

#posts .post .post-image-wrapper img,
#posts .post img {
    display: block;

    width: 50%;
    height: 50%;

    max-width: 50%;
    max-height: 50%;

    object-fit: contain;

    object-position: center;

    border: none;

    background: transparent;
}


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

#posts .post .post-footer {
    grid-column: 1 / -1;
    grid-row: 2;

    width: 100%;

    margin: 0;

    padding: 9px 3px 0 3px;

    border-top: 1px dotted #593546;

    color: #9f8190;

    font-size: 10px;

    line-height: 1.4;

    text-align: center;
}



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

.admin-page {
padding: 20px;
}

.admin-page label {
display: block;


margin-top: 10px;
margin-bottom: 4px;

color: #ffafd0;

font-size: 11px;

font-weight: bold;


}

.admin-page input,
.admin-page textarea {
width: 100%;


padding: 8px;

background: #0b080b;

border: 1px solid #573347;

color: #eadce5;

font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

outline: none;


}

.admin-page input:focus,
.admin-page textarea:focus {
border-color: #ff76a8;


box-shadow:
    0 0 5px rgba(255, 118, 168, 0.25);


}

.admin-page textarea {
resize: vertical;
}

.admin-page button {
margin-top: 12px;


padding: 7px 14px;

background: #281322;

border: 1px solid #7c405d;

color: #ffafd0;

cursor: pointer;

font-family: inherit;


}

.admin-page button:hover {
background: #3a192c;


color: white;


}

/* =========================
MOBILE BLOG POSTS
========================= */

#posts .post {
    display: block;

    padding: 12px;
}


/* =========================
MOBILE POST CONTENT
========================= */

#posts .post .post-content {
    padding: 0;

    width: 100%;
}


/* =========================
MOBILE POST IMAGE
========================= */

#posts .post .post-image-wrapper {
    width: 100%;

    height: 250px;

    margin-top: 15px;

    align-self: auto;
}


#posts .post img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


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

#posts .post .post-footer {
    margin-top: 15px;
}


 /* =========================
    PROFILE IMAGE GALLERY
 ========================= */

.profile-gallery {
    width: 100%;
    overflow: hidden;
}


/* =========================
   GALLERY GRID
========================= */

.gallery-grid {
    width: 100%;

    display: grid;

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

    gap: 6px;

    overflow: hidden;
}


/* =========================
   IMAGE SLOTS
========================= */

.gallery-image {
    width: 100%;
    height: 100px;

    min-width: 0;
    min-height: 0;

    padding: 3px;

    background: #0b080b;

    border: 1px solid #573347;

    display: flex;

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

    overflow: hidden;
}


/* =========================
   IMAGES
========================= */

.gallery-image img {
    display: block;

    width: 100%;
    height: 100%;

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

    object-fit: contain;

    object-position: center;
}


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

@media (max-width: 600px) {

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);

        gap: 5px;
    }

    .gallery-image {
        height: 70px;
    }

}