/* Design based off of Mike Rayhawk's December 2006 Roblox Mockup; https://www.mikerayhawk.com/artwork/roblox/site3.jpg */

:root {
    --accent: #7c9bee;
    --accent-border: #5e75d2;
    --red-accent: #fc0107;
    --box-radius: 0px 0px 10px 10px;
}
body {
    margin:0 auto;
    max-width:900px;
    font-family:'Comic Sans MS';
    overflow:hidde;
}

.top-info {
    width:95%;
    background-color: var(--accent);
    border:2px solid var(--accent-border);
    height: 30px;
    margin:0 auto;
    color:white;
    display:flex;
    flex-direction: row;
    
    & p{
        margin:3px auto 0 0;

        & a{
            font-size:small;
            font-weight:bold;
        }
    }
}

.top-nav {

    & .banner-image {
        text-align:center;
        max-height:250px;

        & #full-banner {
            width:95.668%;
        }

        & #logo-warped {
            width:60%;
            position:relative;
            bottom:172px;
            cursor:pointer;
        }
    }
}

.main-content {

    & .description-box {
        border: 3px solid var(--accent);
        width: 810px;
        height: 400px;
        position: relative;
        bottom: 200px;
        left: 30px;
        border-radius: var(--box-radius);
        margin-top:15px;
    }

    & .char-info {
        border: 3px solid var(--accent);
        width: 210px;
        height: 400px;
        position: relative;
        bottom: 200px;
        left: 30px;
        border-radius: var(--box-radius);
    }

    & .char-avatar {
        z-index:2;
        position:relative;
        width:90%;
        transition:filter 0.2s ease-in-out;
        
        &:hover {
            filter:brightness(0.7);
        }
    }

    & .char-profile {
        position: relative;
        top: 170px;
        text-align: center;
        font-weight:lighter;
     /* display: flex;
        flex-direction: column; */
    }

    & .char-socials {
        margin-top:15px;
        
        & img {
            height:32px;
        }
    }

    & .char-bio{
        height:170px;
        text-align:center;
        line-break:anywhere;
        overflow:hidden;
        z-index:4;

        & h5 {padding:0px 10px 0px 10px;}
        & h3{height:10px;}
    }
}

.player {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.player > div:first-child {
    flex: 0 0 auto;
    min-width: 0;
}

.player > div:nth-child(2) {
    flex: 1;
    margin: 0 15px;
}

.player > div:nth-child(3) {
    flex: 0 0 auto;
    margin-right: 10px;
}

.player > div:last-child {
    flex: 0 0 auto;
}

#seek {
    height:5px;
    width: 100%;
    border:1px solid white;
    align-self:center;
}

#fill {
    height:5px;
    background-color: white;
}
.time{margin-right:10px;}
.controls {
    display:flex;

    & button {
        background: none;
        border:none;
        padding:1px;
        cursor: pointer;

    & svg{height:20px;display:flex;color:white;}
    }
}

.chud-squares {
    display:flex;
    position:relative;
    bottom:50px;
}

#damaAva {
    /* position:relative;
    left:51px; */
}

#seek,
.time,
.controls {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.player.active #seek,
.player.active .time,
.player.active .controls {
  opacity: 1;
  pointer-events: all;
}

/* Fade-in for text updates */
#now-title,
#now-artist {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.top-nav h3 {
    position: relative;
    bottom: 103px;
    text-align: center;
    -webkit-text-stroke: 6px var(--accent-border);
    color: white;
    paint-order: stroke fill;
}