/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* =========================================
   PERSONAL WEB / NEOCITIES SITE
   ========================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;

    background-color: #f8dce9;
    background-image:
        radial-gradient(#ffffff 1px, transparent 1px);
    background-size: 12px 12px;

    color: #513642;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 13px;
}

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

.site {
    width: 1000px;
    margin: 25px auto;
    background: #fffafc;
    border: 4px double #c65b86;
    box-shadow: 0 0 0 5px #f4b8cf,
                0 0 20px rgba(130, 50, 90, .25);
}

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

header {
    min-height: 150px;
    padding: 25px;
    position: relative;

    background:
        linear-gradient(rgba(255,255,255,.2),
                        rgba(255,255,255,.2)),
        #d8799e;

    border-bottom: 4px double #9c3e68;

    text-align: center;
}

.site-title {
    margin: 10px 0 0;

    color: white;

    font-family: Georgia, serif;
    font-size: 48px;
    font-style: italic;

    text-shadow:
        2px 2px #8f365f,
        0 0 5px white;
}

.site-subtitle {
    color: #fff;
    font-family: Georgia, serif;
    font-style: italic;
}

/* little decorative text */

.decor {
    color: white;
    font-size: 18px;
    letter-spacing: 8px;
}

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

.layout {
    display: flex;
    align-items: flex-start;
}

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

.sidebar {
    width: 185px;
    flex-shrink: 0;

    padding: 12px;

    background:
        repeating-linear-gradient(
            0deg,
            #f7e5ed,
            #f7e5ed 4px,
            #f3dce7 4px,
            #f3dce7 8px
        );

    border-right: 3px double #c65b86;
}

.nav-title {
    margin-bottom: 8px;

    padding: 7px;

    background: #c65b86;
    color: white;

    text-align: center;

    font-family: Georgia, serif;
    font-weight: bold;

    border: 2px outset #e99fbc;
}

.nav-section {
    margin-bottom: 15px;
}

.nav-button {
    display: block;

    margin: 5px 0;
    padding: 7px 9px;

    background: linear-gradient(
        #fff,
        #ead7df
    );

    border: 2px outset #d6a4b7;

    color: #633b4d;

    text-decoration: none;

    font-family: "Courier New", monospace;
    font-size: 12px;
    font-weight: bold;
}

.nav-button:hover {
    background: #f3a8c4;
    color: white;

    border-style: inset;
}

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

.content {
    flex: 1;
    padding: 18px;

    background:
        linear-gradient(
            rgba(255,255,255,.7),
            rgba(255,255,255,.7)
        ),
        #fff5f8;
}

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

.box {
    margin-bottom: 15px;

    border: 2px solid #c65b86;

    background: #fff;

    box-shadow: 3px 3px 0 #efb2c9;
}

.box-title {
    padding: 7px 10px;

    background: #e59ab8;

    color: white;

    font-family: Georgia, serif;
    font-size: 17px;
    font-weight: bold;

    border-bottom: 2px solid #c65b86;
}

.box-content {
    padding: 12px;
}

/* =========================================
   TWO COLUMN BOXES
   ========================================= */

.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* =========================================
   PROFILE
   ========================================= */

.profile {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 15px;
}

.profile img {
    width: 170px;
    height: 210px;

    object-fit: cover;

    border: 4px solid white;
    outline: 2px solid #c65b86;
}

.profile-info h2 {
    margin-top: 0;

    color: #bd4f7c;

    font-family: Georgia, serif;
    font-style: italic;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
}

.info-table td {
    padding: 5px;

    border-bottom: 1px dotted #d78ba6;
}

.info-table td:first-child {
    width: 100px;

    color: #a8436b;
    font-weight: bold;
}

/* =========================================
   INTEREST TAGS
   ========================================= */

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag {
    padding: 4px 8px;

    background: #f8c9da;

    border: 1px solid #ca7295;

    font-size: 11px;
}

/* =========================================
   FRIENDS
   ========================================= */

.friends {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.friend {
    width: 70px;

    text-align: center;

    font-size: 10px;
}

.friend img {
    width: 60px;
    height: 60px;

    object-fit: cover;

    border: 2px solid #c65b86;
}

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

.music-player {
    background: #34252c;
    color: white;

    padding: 12px;

    border: 3px double #e798b7;
}

.music-title {
    color: #f2a9c5;
    font-family: Georgia, serif;
    font-weight: bold;
}

.progress {
    height: 8px;

    margin-top: 10px;

    background: #71475a;
}

.progress-bar {
    width: 45%;
    height: 100%;

    background: #f3a3c2;
}

/* =========================================
   JOURNAL
   ========================================= */

.entry {
    padding: 8px;

    border-bottom: 1px dashed #d488a5;
}

.entry-date {
    color: #b64c76;
    font-family: "Courier New", monospace;
    font-weight: bold;
}

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

.site-button {
    max-width: 88px;
    margin: 4px;
    border: 1px solid #b96888;
}

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

footer {
    padding: 15px;

    background: #d8799e;

    color: white;

    text-align: center;

    font-size: 11px;
}

footer a {
    color: white;
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media screen and (max-width: 800px) {

    .site {
        width: 96%;
    }

    .layout {
        display: block;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 3px double #c65b86;
    }

    .nav-button {
        display: inline-block;
        width: auto;
    }

    .two-column {
        grid-template-columns: 1fr;
    }

    .profile {
        grid-template-columns: 1fr;
    }
}