#bgcolor {
	position: absolute;
	top: 210px;
	left: -96px;
	width: 550px;
}

#bgcolortwo {
	position: absolute;
	top: 293px;
	left: 561px;
	width: 675px;
}

/* Character Boxes */

.characterBox {
    background-image: url(/your_content/images/chatlist_bg.png);
    display: flex;
    margin: 20px;
    font-family: rony;
}

.character-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.character-row {
    display: flex;
    align-items: center;
}

.character-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    width: 100%;
}

.character-row:nth-child(odd) .character-bar {
    background-color: rgba(255, 255, 255, 0.5);  /* 50% opaque white */
}

.character-row:nth-child(even) .character-bar {
    background-color: rgba(255, 218, 184, 0.4);  /* 40% opaque orange */
}

.character-icon {
    width: auto;
}

.character-status {
    width: auto;
}

#fakeScrollbar {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #C0B5E7;
}

/* Character profile display */

#castBorderTwo {
    flex-direction: column;
    padding: 10px;
}

#profileTop {
    display: flex;
    flex-direction: row;
}

#profileImage {
    border: black solid 4px;
    clip-path: inset(0 0 100% 0);  /* Start fully hidden */
}

#profileImage.loading {
    /* Put the transition in this class so it only applies when loading into the class */
    transition: clip-path 1s steps(10, end);
    clip-path: inset(0 0 0% 0); /* Reveal from top to bottom */
}

#profileTopRight {
    margin-left: 10px;
    flex: 1;
    text-align: left;
}

#profileName {
    background-color: rgba(255, 255, 255, 0.5);  /* 50% opaque white */
    font-size: 54px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
}

#profileStats {
    font-size: 24px;
}

.profileStatRow {
    display: flex;
    gap: 1ch;
}

.profileStat {
    white-space: nowrap;
}

#profileText {
    background-color: rgba(255, 218, 184, 0.4);  /* 40% opaque orange */
    font-size: 20px;
    text-align: left;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 0;
}

/* Hide bottom logo and powered-by because they don't work well with the layout */

#bottom-logo, #powered-by {
    display: none;
}

@media only screen and (max-width: 675px) {

    #bgcolor {
        position: unset;
        width: 100%;  /* Cast list takes up whole screen */
		padding-bottom: 20px;
    }

    #bgcolortwo {
		height: auto;
		scale: 70%;
		left: 30%;
		transform: translateX(-50%);
		border: 4px solid black;
		width: 130%;
		top: 250px;
    }

    .characterBox {
        margin: unset;
    }

    /* Hide scrollbar to avoid confusion */
    #fakeScrollbar {
        display: none;
    }

    /* Bring them back on mobile */
    #bottom-logo, #powered-by {
        display: block;
    }

    /* Keep profile top bar close window to the far right */
    #profileBarText {
        margin-right: auto;
    }
	
	#bgcolortwo {
		visibility: hidden;
	}
}

@media only screen and (max-width: 380px) { 
	.character-status {
		display: none;
	}
}