:root {

    --dark-color: #39434b;

    --medium-color: #aebbc4;

    --light-color: #7d8e9b;

    --text-color: #283138;

}


* {

    box-sizing: border-box;

}


html {

    background: #7d8e9b;

}


body {

    margin: 0;

    padding: 7px;

    background: #7d8e9b;

    color: var(--text-color);

    font-family:
    "Zen Kaku Gothic Antique",
    sans-serif;

    font-size: 12px;

}


/* HEADER */

#header {

    width: 805px;

    height: 555px;

    overflow: hidden;

    border:
    1px solid
    var(--dark-color);

}


#header img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* TITLE */

h1 {

    width: 805px;

    margin: 0;

    font-size: 42px;

    font-weight: normal;

    letter-spacing: 10px;

    line-height: 1;

    color: #151b20;

}


/* CONTAINER */

.container {

    width: 805px;

    display: flex;

    border:
    1px solid
    var(--dark-color);

}


/* SIDEBAR */

.sidebar {

    width: 200px;

    padding: 10px;

    gap: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    font-size: 11px;

}


/* BOX */

.sidebarbox {

    width: 170px;

    padding: 10px;

    border:
    1px solid
    var(--dark-color);

    background:
    var(--medium-color);

    max-height: 250px;

    overflow: auto;

    text-align: center;

}


/* PROFILE */

#profilepic {

    width: 100px;

    height: 100px;

    margin:
    10px auto 15px;

    display: block;

    object-fit: cover;

    outline:
    1px solid
    var(--dark-color);

    outline-offset: 6px;

}


/* SIDEBAR IMAGES */

.sidebar img {

    max-width: 100%;

}


/* HEADINGS */

h3 {

    margin: 0;

    color: #20282e;

    font-size: 14px;

    letter-spacing: 2px;

    text-align: center;

}


/* MAIN */

.main {

    width: 405px;

    padding: 12px;

    border-left:
    1px solid
    var(--dark-color);

    border-right:
    1px solid
    var(--dark-color);

    text-align: justify;

    line-height: 1.35;

}


/* MAIN TITLES */

.main h2 {

    margin-top: 3px;

    font-size: 22px;

    font-weight: normal;

    letter-spacing: 7px;

    text-align: center;

}


/* PERSONALITY TITLE */

.type-title {

    margin: 10px 0;

    padding: 7px;

    border:
    1px dashed
    var(--dark-color);

    background:
    var(--medium-color);

    text-align: center;

    font-size: 17px;

    letter-spacing: 3px;

}


/* SECTION TITLES */

.section-title {

    margin-top: 15px;

    padding:
    2px 5px;

    border-bottom:
    1px dotted
    var(--dark-color);

    text-align: left;

    letter-spacing: 2px;

}


/* SUMMARY */

.summary {

    margin-top: 15px;

    padding: 10px;

    border:
    1px solid
    var(--dark-color);

    background:
    var(--medium-color);

    text-align: center;

}


/* TYPE BOX */

.typebox {

    width: 170px;

    padding: 8px;

    border:
    1px solid
    var(--dark-color);

    background:
    var(--medium-color);

    text-align: center;

}


.typebox img {

    width: 150px;

    max-height: 150px;

    object-fit: cover;

    border:
    1px solid
    var(--dark-color);

}


/* MUSIC */

.music {
    width: 170px;
    padding: 5px;
    border: none;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-size: 10px;
    overflow: hidden;
}

.music p {

    margin: 4px 0;

    white-space: nowrap;

}


/* FAVORITES */

.favorite-list {

    padding: 10px;

    border:
    1px dashed
    var(--dark-color);

    background:
    var(--medium-color);

    line-height: 1.8;

}


/* CALENDAR */

.calendar-container {

    width: 170px;

    padding: 8px;

    border:
    1px solid
    var(--dark-color);

    background:
    var(--medium-color);

    text-align: center;

}


.calendar-current-date {

    font-weight: bold;

    margin: 2px;

}


.calendar-dates {

    padding: 0;

    margin: 0;

    display: grid;

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

    list-style: none;

    font-size: 10px;

}


.calendar-dates li {

    padding: 2px;

}


/* LINKS */

a {

    color: #303c45;

}


.main a::before {

    content: "«";

}


.main a::after {

    content: "»";

}


/* LISTS */

ul {

    padding-left: 18px;

}


li::marker {

    color: #26333c;

}


/* FOOTER */

.footer {

    width: 805px;

    text-align: center;

    font-size: 10px;

    padding: 10px;

}