*,*::before,*::after {box-sizing: border-box;}

body {margin: 0; padding: 10px; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 14px; color: black; -webkit-font-smoothing: antialiased; background-color: lightgray;}

a {text-transform: capitalize; color: #444daf; overflow-wrap:anywhere; word-break: break-word;}

    .displayname {text-transform: initial; font-weight: 900; text-decoration: none;}

label, span {text-transform: capitalize; font-weight: 600;}

    .online_status {display: flex; align-items: center; gap: 2px; justify-self: center;}
    .online_status::before {content: ""; font-family: "bootstrap-icons"; display: block; color: #ff4500; background-image: url(../images/icons/online_status.gif); background-repeat: no-repeat; width: 14px; height: 14px; background-repeat: no-repeat; background-position: center; background-size: contain;}
    .online_status::after {content: "Online Now!"; color: #008000; font-weight: 900 !important; font-size: small;}

img {width: 100%; height: auto;}

button, .mail-addressbook-send, .button-like {cursor: pointer; text-transform: capitalize; font-size: inherit;}

.mail-addressbook-send, .button-like{background-color:buttonface;margin:0em 0em 0em 0em;padding-block:1px;padding-inline:6px;border-width:1px;border-style:outset;border-color:buttonborder;text-align:center;display:inline-block;text-shadow:none;text-indent:0px;line-height:normal;word-spacing:normal;letter-spacing:normal;color:buttontext;text-rendering:auto;text-decoration:none;border-radius:3px;}

ul {margin: 0; padding: 0; list-style-type: none;}

table {width: 100%; border-collapse: collapse; background-color: white; border-width: 2px; border-style: solid;}
table tr th {text-align: left; text-transform: capitalize; padding: 4px 2px 4px 8px; background-color: #639ace; color: white;}
table tr td {vertical-align: top;}


header {width: 1024px; height: 300px; margin: 0 auto; padding: 20px; background-color: #0e1079; background-image: url(../images/headers/header_index.png); background-repeat: no-repeat; background-size: 15%; background-position: 95% 35%; border-top-left-radius: 20px; border-top-right-radius: 20px; display: flex; flex-direction: column; position: relative;}

    .header_img {width:80%; height:175px; margin: 0 0 10px 20px; }
    .header_img img { width: 80%; height: 175px; margin: 0 0 10px 20px; object-fit: cover;}

    .header_slogan {text-align: right; margin-right: 100px; margin-top: 40px; font-size: 1rem; text-transform: lowercase; color: white; text-shadow: 5px 3px 0px midnightblue;}

nav {width: calc(1024px - 40px); height: 45px; padding: 0 25px 0 25px; background-color: #236dcc; border-top-left-radius: 10px; border-top-right-radius: 10px; display: flex; align-items: center; position: absolute; top: 10px;}

    #nav_links {width: 100%; display: flex;}
    #nav_links li:not(:nth-last-child(-n+3)) a::after {content: '|'; display: inline-flex; color: black; margin: 0 7px;}
    #nav_links li:nth-last-child(2) {margin-left: auto;}
    #nav_links li:nth-last-child(2) a::after { content: '|'; display: inline-flex; color: black; margin: 0 7px;}
    #nav_links li a {text-transform: capitalize; color: #f5f5f5;}

.content {width: 1024px; min-height: 500px; margin: 0 auto; padding: 20px 10px 20px 30px; background-color: white; display: flex; gap: 15px;}

    aside {min-width: 375px; max-width: 375px; display: flex; flex-direction: column; gap: 25px;}

    main {width: 100%; display: flex; flex-direction: column; gap: 35px;}

footer {width: 1024px; height: 100px; margin: 0 auto; padding: 0 25px 0 25px; background-color: #2c68c6; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; display: flex; align-items: center; justify-content: center;}

    ul#footer_links {display: flex; flex-direction: row; align-items: center; gap: 10px;}
    ul#footer_links li a {color: lightgray;}


#errors, .error{color:#900;}
#success{color:#090;}

.responses {width:1024px;margin:0 auto;text-align:center;background-color:#fff;}

.mx-auto {margin-left:auto;margin-right:auto;}
.text-center {text-align:center;}

#home_img td p, .aside_img p {text-transform: capitalize; letter-spacing: 2px; font-size: small;}

#userbox_mood li:nth-child(2) {display: flex; align-items: center; gap: 4px;}

ul#quote {margin-bottom: 15px;}

ul#userbox_mood{margin-bottom: 15px; display: flex; flex-direction: column;}
ul#userbox_mood div {margin-top: -5px; display: flex; align-items: center; gap: 4px;} 

#userbox_mood img,
#selected-image {width: 25px !important; height: auto;}

ul#userbox_quote {margin-bottom: 15px;}

#user_quote {margin: 0; border: 1px solid; min-height: 80px; max-height: 80px; min-width: 180px; max-width: 180px; background-color: rgba(255, 255, 255, 40%);  overflow: hidden; white-space: pre-wrap; word-wrap: break-word; padding: 4px;}

#user_quote:empty::before {content: attr(data-placeholder); color: #363636; pointer-events: none;}