/* =========================================
   OLD WEB RESET
   ========================================= */

:root {
    --page-padding: clamp(8px, 1.2vw, 24px);
}

* {
    box-sizing: border-box;
}

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

body {
    min-height: 100vh;

    padding: var(--page-padding);

    font-family: Verdana, Arial, sans-serif;
    font-size: clamp(12px, calc(7px + 0.35vw), 17px);

    color: #222;
    background: #f7eef3;
}

.page {
    width: 100%;

    /*
       Makes the page reach the bottom of the viewport
       while preserving equal padding on every side.
    */
    min-height: calc(
        100vh - (var(--page-padding) * 2)
    );

    margin: 0;

    display: grid;

    grid-template-columns:
        clamp(180px, 18vw, 320px)
        minmax(400px, 1fr)
        clamp(180px, 18vw, 320px);

    grid-template-areas:
        "header header header"
        "sidebar intro updates"
        "sidebar main updates"
        "sidebar main extra"
        "sidebar friends friends"
        "footer footer footer";

    gap: clamp(3px, 0.4vw, 8px);
}


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

.window {
    position: relative;

    min-width: 0;

    padding: 8px;

    background: #fffafa;

    border: 1px solid #777;

    border-radius: 0;

    box-shadow: none;
}


/* remove fake resize corner */
.window::after {
    display: none;
}


/* remove fake window close buttons */
.window-close {
    display: none;
}


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

.header {
    min-height: 110px;

    display: flex;

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

    text-align: center;

    background: #f6dbea;

    border: 1px solid #777;
}

.header h1 {
    margin: 0 0 5px;

    font-family: "Courier New", monospace;
    font-size: 26px;

    letter-spacing: 4px;
}

.header p {
    margin: 0;

    font-family: "Courier New", monospace;
    font-size: 11px;

    letter-spacing: 2px;
}


/* =========================================
   HEADINGS
   ========================================= */

h1,
h2,
h3,
p {
    margin-top: 0;
}

h2 {
    margin-bottom: 8px;

    padding: 3px 4px;

    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;

    color: #8f245a;

    background: #f7dbe8;

    border-bottom: 1px dotted #c65c8b;
}

h3 {
    margin-bottom: 4px;

    font-size: 11px;

    color: #a12861;
}

p {
    line-height: 1.45;
}


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

a {
    color: #cc2472;
    text-decoration: underline;
}

a:visited {
    color: #8c4770;
}

a:hover {
    color: #ff0080;
    background: #fff0f7;
}


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

.sidebar ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.sidebar li {
    margin: 0;
}

.sidebar a {
    display: block;

    padding: 5px 4px;

    border-bottom: 1px dotted #ddd;

    text-decoration: none;
}

.sidebar a:hover {
    background: #f8dcea;
}


/* =========================================
   UPDATES
   ========================================= */

.updates-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.updates-list li {
    margin-bottom: 10px;
}

.updates-list time {
    display: block;

    margin-bottom: 2px;

    font-size: 9px;

    color: #777;
}


/* =========================================
   CARDS
   ========================================= */

.cards {
    display: grid;

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

    gap: 4px;
}

.card {
    padding: 5px;

    background: #fff;

    border: 1px solid #ccc;

    border-radius: 0;
}

.card-image {
    display: flex;

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

    height: 70px;

    margin-bottom: 5px;

    background: #f5ddec;

    border: 1px solid #ddd;

    border-radius: 0;

    font-size: 26px;
}

.card p {
    margin: 0;

    font-size: 10px;
}


/* =========================================
   WEB BUTTONS
   ========================================= */

.buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 3px;
}

.buttons a {
    width: 88px;
    height: 31px;

    display: flex;

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

    padding: 2px;

    background: #ffd4e7;

    border: 1px solid #8c3c64;

    color: #431b30;

    font-family: Arial, sans-serif;
    font-size: 9px;

    font-weight: bold;

    text-align: center;
    text-decoration: none;
}


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

.footer {
    padding: 6px;

    text-align: center;

    font-size: 9px;

    background: #fffafa;
}

.footer p {
    margin: 0;
}


/* =========================================
   GRID AREAS
   ========================================= */

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.updates {
    grid-area: updates;
}

.extra {
    grid-area: extra;
}

.intro {
    grid-area: intro;
}

.main-content {
    grid-area: main;
}

.web-friends {
    grid-area: friends;
}

.footer {
    grid-area: footer;
}