body {
    background-color: #240d24;
    background-image: url("images/Ori-Water-Mill.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: 50%;
}

body * {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}

.main_container {
    margin-top: 100px;
    padding: 6px;

    max-width: 1000px;
    min-height: 600px;
    margin-left: auto;
    margin-right: auto;

    background-color: #eeeeee;
    border-radius: 15px;

    display: flex;
    flex-direction: column;
}

.main_container * {
    color: #eeeeee;
    background-color: #240d24;
    border-radius: 9px; /* border radius - padding (15px - 9px) */
}

/* the top bar */
.top_container {
    padding: 15px;
    max-height: 80px; /* same as pfp image size */

    flex: 0 1 auto;
    
    display: flex;
    justify-content: left;
}

/* profile image and name tag */
#nametag_img {
    width: 80px; 
    height: 80px;
    margin: 0px;
    align-self: center;
    border-radius: 100%; 

    flex: 0 1 auto;
}

.header_text {
    max-width: max-content;
    max-height: max-content;

    margin-left: 25px;

    font-size: 35px;
    font-weight: bold;

    align-self: center;

    flex: 0 1 auto;
}


/* nav bar related things */
#nav {
    margin-left: 15px;
    flex: 1 0 auto;

    /* flex to layout the icons */
    display: flex;
    justify-content: right;
    flex-direction: row;
}

/* top level item for each nav item */
#nav_box {
    margin: 20px;
    width: 40px;
    transition: transform 150ms ease-out;
    pointer-events: none;
}

#nav_box:hover {
    transform: translateY(-8px);
}

/* the link body */
#nav_link {
    pointer-events: all;
}

#nav_link:hover {
    padding-bottom: 8px;
}

#nav_link_selected * {
    opacity: 70%;
    filter: invert(30%) sepia(8%) saturate(1809%) hue-rotate(224deg) brightness(90%) contrast(93%);
}


/* image body, inside link */
#nav_img {
    background-color: transparent;

    width: 40px;
    height: 40px;

    margin-top: 0px;
    padding-top: 0px;
}


#nav_link:hover + div {
    display: block;
}

#nav_text {
    margin-top: 0px;
    margin-left: -30px;
    display: none;
    width: 100px;
    max-height: 20px;
    pointer-events: none;

    text-align: center;
} 




/* main body */
.bottom_container {
    background-color: transparent;

    margin-top: 6px;
    padding: 0px; 
    min-width: 100px;
    min-height: 100px;

    flex: 1 0 auto;

    display: flex;
}

.left_container {
    background-color: #240d24;
    margin: 0px;
    padding: 40px 40px;

    flex: 1 1 auto;
}
.left_container * {
    margin: 0px; 
    padding: 0px; 

    word-wrap: break-word; 
    word-break: break-word;
}

.right_container {
    background-color: #240d24;
    margin: 0px 0px 0px 6px;
    padding: 10px;

    min-width: 150px;

    text-align: center;
    flex-direction: column;

    display: flex;
}

/* don't round buttons to other pages */
.page_button {
    border-radius: 0px;
    border-width: 0px;
}


/* dropdown expandable text menu */
/* https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css */
.dropdown_arrow {
    width: 20px;
    transform: translateY(4px) rotate(-90deg);

    transition: transform 150ms;
}

.dropdown_div {
    display: block; 
    width: 100%;
    height: 0px;
    overflow: hidden;
    word-wrap: break-word;

    margin: 0px;
}

.dropdown_checkbox {
    display: none;
}

#dropdown_label {
    transition: padding-left 100ms;
}

.dropdown_checkbox:checked + label > img {
    transform: translateY(5px) rotate(0deg);
}

.dropdown_checkbox:hover + label {
    padding-left: 3px;
    cursor: pointer;
}