:root {
    --light-blue: #477bba;
    --lighter-blue: #97bceb;
    --lightest-blue: #c4ddfc;
    --dark-blue: #002d8e;
    --light-orange: #ffbb76;
    --dark-orange: #dd4000;
    --white: #fff;
    --gray: #e1e1e1;
  }

body {
    background-color: var(--gray);
    font-family: 'Arial', sans-serif;
}

p {
    margin: 0;
}

/* wrapper */

.wrapper {
    margin: 0 auto;
    max-width: 900px;
}

/* main grid */

.main {
    background-color: var(--white);
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 3fr;
    padding: 0 20px 40px;
}

@media screen and (max-width: 800px) {
    .main {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
}

.main_left, .main_right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* header */

.header_top {
    background-color: var(--dark-blue);
    height: 80px;
    padding: 20px;
}

.header_bottom {
    background-color: var(--light-blue);
    display: flex;
    flex-wrap: wrap;
    padding: 5px 20px;
}

.header_pipe {
    color: var(--dark-blue);
    margin: auto 10px;
}

.header_link {
    color: var(--white);
    text-decoration: none;
}

.header_link:hover {
    text-decoration: underline;
}

/* profile card */

.card_pic {
    max-width: 200px;
}

.card_group {
    display: flex;
    gap: 20px;
}

.card_info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
}

.card_quote {
    width: 88px;
}

.card_online {
    max-width: 100px;
}

/* contact section */

.contact {
    border: 2px solid var(--light-blue);
}

.contact_header {
    background-color: var(--light-blue);
    color: var(--white);
    font-size: 12px;
    padding: 2px 20px;
}

.contact_body {
    padding: 5px;
}

.contact_img {
    width: 180px;
}

.contact_email {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.contact_link {
    color: var(--dark-blue);
    text-decoration: none;
}

.contact_link:hover {
    text-decoration: underline;
}

.contact_buttons {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-top: 5px;
    width: 100%;
}

/* myspace url */

.url {
    border: 1px solid var(--light-blue);
    padding: 10px;
}

.url_text {
    word-break: break-all;
}

/* interests and details */

.interests, .details {
    border: 2px solid var(--light-blue);
    padding-bottom: 2px;
}

.interests_heading, .details_heading {
    background-color: var(--light-blue);
    color: var(--white);
    padding: 2px 20px;
}

.interests_box, .details_box {
    display: grid;
    gap: 2px;
    grid-template-columns: 110px 1fr;
    padding: 2px 2px 0;
}

.interests_name, .details_name {
    background-color: var(--lighter-blue);
    color: var(--dark-blue);
    font-weight: bold;
    padding: 5px;
}

.interests_lists, .details_lists {
    background-color: var(--lightest-blue);
    padding: 5px;
}

/* extended network */

.extended {
    border: 2px solid #000;
    font-size: 24px;
    padding: 40px;
    margin: 40px 0 0 0;
    text-align: center;
}

@media screen and (max-width: 800px) {
    .extended {
        display: none;
    }
}

/* resources */

.resources {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 10px 10px;
}

.resources_link {
    color: var(--dark-blue);
    font-weight: bold;
    text-decoration: none;
}

.resources_link:hover {
    text-decoration: underline;
}

/* blurbs */

.blurbs_heading {
    background-color: var(--light-orange);
    color: var(--dark-orange);
    font-weight: bold;
    padding: 2px 20px;
}

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

    .blurbs_heading {
        margin-top: 40px;
    }
}


.blurbs_about {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.blurbs_subheading {
    color: var(--dark-orange);
    font-weight: bold;
}

/* friend space */

.friends_heading {
    background-color: var(--light-orange);
    color: var(--dark-orange);
    font-weight: bold;
    padding: 2px 20px;
}

.friends_subheading {
    font-weight: bold;
    padding: 10px;
}

.friends_number {
    color: var(--dark-orange);
}

.friends_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.friends_pic {
    width: 110px;
}

/* chatbox */

.chatbox_heading {
    background-color: var(--light-orange);
    color: var(--dark-orange);
    font-weight: bold;
    padding: 2px 20px;
}

.chatbox_wrapper {
    margin: 10px;
}