/* The Classic Teal Background */
body {
    background-color: rgb(163, 188, 214);
    background-image: linear-gradient(rgba(163, 188, 214,0.9), rgba(163, 188, 214,0.9)), url("HM.png");
}


/* The Main Window Container */
.window {
    width: 1000px;
    background: #c0c0c0;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, 1px 1px 0 0 #000, -1px -1px 0 0 #808080;
    padding: 3px;
    margin: 50px auto;
}

/* Title Bar */
.title-bar {
    background: linear-gradient(90deg, #000080, #1084d0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 2px 3px 3px;
    color: white;
    font-family: 'Pixelify Sans', monospace;
}

/* Icon Layout */
.window-body {
    padding: 15px;
    font-family: 'Pixelify Sans', monospace;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 50px;
}

.icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: black;
    font-size: 12px;
}

.icon img {
    width: 128px;
    height: 128px;
    margin-bottom: 5px;
}

.icon:hover span {
    background-color: #000080;
    color: white;
    outline: 1px dotted white;
}

/* The Scrollable "Well" */
.blog-content {
    background-color: #ffffff;
    /* Inset border: Top/Left are dark, Bottom/Right are light */
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    padding: 20px;
    max-height: 500px; /* Limits window height */
    overflow-y: scroll; /* Adds that classic scrollbar */
}

/* Retro Scrollbar Styling (Works in Chrome/Edge/Safari) */
.blog-content::-webkit-scrollbar {
    width: 16px;
}
.blog-content::-webkit-scrollbar-track {
    background: #dfdfdf;
    box-shadow: inset 1px 1px #808080;
}
.blog-content::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
}

/* Media Styling */
.media-frame {
    margin: 15px 0;
    padding: 3px;
    background: #c0c0c0;
    border: 1px solid #808080;
}

.retro-media {
    display: block;
    width: 100%; /* Scales to fit the window */
    height: auto;
}

/* Text Styling */
.post-date {
    font-size: 11px;
    color: #808080;
    margin-bottom: 5px;
}

h2 {
    font-size: 18px;
    margin-top: 0;
    color: #000080;
}

hr {
    border: 0;
    height: 2px;
    background: #808080;
    margin: 30px 0;
    border-bottom: 1px solid #ffffff;
}

.top-nav {
    margin-bottom: 20px;
    display: flex;
}

.back-button {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: #c0c0c0;
    text-decoration: none;
    color: black;
    font-size: 12px;
    /* The 3D "Raised" Border */
    box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080, 1px 1px 0 0 #000;
}

.back-button img {
    width: 16px;
    height: 16px;
}

/* The "Click" Effect */
.back-button:active {
    box-shadow: inset 1px 1px #000, inset -1px -1px #ffffff;
    padding: 5px 7px 3px 9px; /* Shifts text slightly down/right when clicked */
}

.back-button:hover {
    outline: 1px dotted #000;
}