:root {
    --panel-material-dark: rgba(255, 255, 255, 0.5);
    --panel-material-dark-alt: rgba(255, 255, 255, 0.6);
    --panel-material-dark-hover: rgba(255, 255, 255, 0.75);
    --panel-material-light: rgba(0, 0, 0, 0.5);
    --panel-material-light-alt: rgba(0, 0, 0, 0.3);
    --panel-material-light-hover: rgba(0, 0, 0, 0.75);
    --text-dark: #000;
    --text-dark-alt: #444;
    --text-light: #FFF;
    --text-light-alt: #BBB;
}

@font-face {
    font-family: 'gg sans Normal Regular';
    font-style: normal;
    font-weight: normal;
    src: url('gg sans Regular.woff') format('woff');
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'gg sans Normal Regular', sans-serif;
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    height: 100%;
    overflow-x: hidden; 
    overflow-y: scroll;
}

body {
    display: flex;
    color: light-dark(var(--text-light), var(--text-dark));
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden; 
}



.container {
    align-items: stretch;
    gap: 20px;
    max-width: 500px;
    position: relative; 
    z-index: 1;
    width: 90%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.bg {
    color: lightskyblue;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;              
    pointer-events: none;     
}



.profile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 10px;
    gap: 50px;
    border-radius: 10px;
    width:100%;
    transition-duration: 0.5s;
    background: light-dark(var(--panel-material-light), var(--panel-material-dark));
}

.profile:hover {
    text-decoration: none;
    color: light-dark(var(--text-light), var(--text-dark));
    transition-duration: 0.5s;
    background: light-dark(var(--panel-material-light-hover), var(--panel-material-dark-hover));
}

.profile-head {
    width: 100%;
}

.profile-head img.avatar {
    width: 30%;
    border-radius: 50%;
    margin-bottom: 20px;
    background-size: cover;
    z-index: 2;
    position:absolute;
    padding: 5px;
    top: 80px;
    left: 20px;
    background: light-dark(var(--panel-material-light-alt), var(--panel-material-dark-alt));
}

.profile-head img.banner {
    background-size: cover;
    border-radius: 10px;
    width: 100%;
    z-index: 1;
}

.profile-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start; 
    padding: 20px;
    border-radius: 10px;
    width:100%;
    transition-duration: 0.5s;
}

.profile-body .username {
    font-size: 36px;
    text-align: left;
}
.profile-body .pronouns {
    font-size: 28px;
    color: light-dark(var(--text-light-alt), var(--text-dark-alt));
    text-align: left;
}
.profile-body .description {
    font-size: 24px;
    text-align: left;
    margin-top: 10px;
    color: light-dark(var(--text-light), var(--text-dark));
}




.connection-item {
    display: flex;
    width: 100%;
    text-align: left;
    padding: 15px;
    border-radius: 10px;
    font-size: 20px;
    color: light-dark(var(--text-light), var(--text-dark));
    text-decoration: none;
    cursor: pointer;
    margin-top: 10px;
    vertical-align: center;
    align-items: center;
    gap:10px;
    transition-duration: 0.5s;
    background: light-dark(var(--panel-material-light), var(--panel-material-dark));
}

.connection-item:hover {
    text-decoration: none;
    color: light-dark(var(--text-light), var(--text-dark));
    transition-duration: 0.5s;
    background: light-dark(var(--panel-material-light-hover), var(--panel-material-dark-hover));
}

.connection-name {
    font-weight: bold;
    font-size: 22px;
}   

.connection-description {
    font-size: 20px;
    color: light-dark(var(--text-light-alt), var(--text-dark-alt));
}



.message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 10px;
    gap: 50px;
    border-radius: 10px;
    width:100%;
    transition-duration: 0.5s;
    background: light-dark(var(--panel-material-light), var(--panel-material-dark));
}

.message:hover {
    background: light-dark(var(--panel-material-light-hover), var(--panel-material-dark-hover));
}