/* OVERLOAD TERMINAL */

@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&family=Oxanium:wght@200..800&display=swap');

/* === GENERAL === */

/* Fonts */

h1, h2, h3, h4, h5 { font-family: "Bruno Ace SC" !important;}

a {
	background: linear-gradient(#A64D79, #A64D79);
	background-repeat: no-repeat;
	background-size: 0%;
	border: 1px solid transparent;
	border-radius: 5px;
	transition: background-size 0.25s ease-out, color 0.25s ease-out;
	text-decoration: underline 1px;
	text-decoration-style: dotted;
}

a:hover {
	background-size: 100%;
	color: rgb(13, 12, 12);
}

li {
	list-style: none;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
}

        /* Set the list image as background image*/
li::before {
	content: '';
    display: inline-block;
    margin: 0;
	width: 24px;
	height: 24px;
	background-image: url(
"https://i.postimg.cc/KYD5mLfM/arrow.png");
}

p { margin: 10px;}

* {
	margin: 0;
	padding: 0;
	color: #A64D79;
	font-family: 'Oxanium';
	letter-spacing: 2px;
	box-sizing: border-box;
}

html {
	background: rgb(13, 12, 12); /* i only added this because sometimes when you click on a broken hyperlink, the entire site FLASHES white. so, hopefully this is easier on the eyes? */
}

body {
	background: rgb(13, 12, 12);
	cursor: url(https://i.postimg.cc/0QvwQgXg/cursor-simple.png), auto !important;
}

#center {
	width: 100%;
	min-height: 100vh;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#wrapper {
	width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
}

/* === INDEX PAGE === */

#main {
	background: rgb(13, 12, 12);
	width: 100%;
	border: 1px solid #6A1E55;
	border-radius: 10px;
	padding: 5px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#header {
	width: 100%;
	height: 25px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	gap: 5px;
}

.title {
	background: rgb(13, 12, 12);
	width: 100%;
	border: 1px solid #6A1E55;
	border-radius: 5px 25px 5px 5px;
	padding: 10px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	text-align: left;
	font-family: "Bruno Ace SC";
	font-size: 12px;
	text-decoration: underline 1px #6A1E55;
	text-decoration-style: dotted;
}


#header > .icon-box {
	background: linear-gradient(#1A1A1D, transparent);
	background-repeat: no-repeat;
	background-size: 100% 0%;
	border: 1px #6A1E55;
	border-style: solid;
	border-radius: 5px;
	padding: 5px 5px 5px 6px;
	font-size: 10px;
	color: #A64D79 !important;
	text-decoration: none !important;
	transition: background-size 1s ease, text-shadow 0.25s ease-in, box-shadow 0.25s ease-in;
}

#header > .icon-box:hover {
	background-size: 100% 100%;
	box-shadow: 0px 0px 10px #6A1E55 !important;	
	text-shadow: 1px 1px 5px #6A1E55 !important;
	cursor: pointer !important;
}

#header > .icon-box:active {
	background: linear-gradient(to bottom, rgb(13, 12, 12), #1A1A1D);
	cursor: pointer !important;
}

#window {
	width: 100%;
	margin: auto;
	display: flex;
	flex-direction: column;
}

.tab-bar {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 5px;
}

.tab-bar > .tab1 {
	background: rgb(13, 12, 12);
	width: 67%;
	border: 1px #6A1E55;
	border-style: solid solid none solid;
	border-radius: 5px 25px 0 0;
	padding: 5px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: underline 1px #6A1E55;
	text-decoration-style: dotted;
	font-family: "Bruno Ace SC" !important;
}

.tab-bar > .tab2 {
	background: rgb(13, 12, 12);
	width: 33.3%;
	border: 1px #6A1E55;
	border-style: solid solid none solid;
	border-radius: 5px 25px 0 0;
	padding: 5px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: underline 1px #6A1E55;
	text-decoration-style: dotted;
	font-family: "Bruno Ace SC" !important;
}

#status {
	width: 100%;
	height: 175px;
	border: 1px solid #6A1E55;
	border-style: solid solid none solid;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
}

#status > #bio {
	width: 33.3%;
	height: 100%;
	border: 1px #6A1E55;
	border-style: none solid none none; 
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#bio > .mini-bio {
	width: 100%;
	height: 50%;
	border: 1px #6A1E55;
	border-style: none;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.mini-bio > .bar {
	width: 30%;
	height: 100%;
	border: 1px #6A1E55;
	border-style: none solid none none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.barimg {
	background-image: linear-gradient(#6A1E55, transparent);
	background-color: transparent;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	animation: howlsmovingbar 5s ease-in-out infinite;
	transform: rotate(180deg);
}

@keyframes howlsmovingbar {
  0%   {background-size: 100% 0%;}
  25%  {background-size: 100% 50%;}
  50%  {background-size: 100% 0%;}
  75%  {background-size: 100% 100%;}
  100% {background-size: 100% 0%;}
}

#gauges {
	width: 70%;
	height: 100%;
	border: 1px #6A1E55;
	border-style: none;
	padding: 5px;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	gap: 5px;
}

/* gauges */

.gauge1 {
	width: 45px;
	height: 45px;
	border: 1px solid #6A1E55;
	border-radius: 100%;
	padding: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	animation: spin1 0.5s ease infinite;
}

.gauge2 {
	width: 45px;
	height: 45px;
	border: 1px solid #6A1E55;
	border-radius: 100%;
	padding: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	animation: spin2 0.5s ease infinite;
}

.gauge3 {
	width: 45px;
	height: 45px;
	border: 1px solid #6A1E55;
	border-radius: 100%;
	padding: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	animation: spin3 0.5s ease infinite;
}

.tick {
	height: 50%;
	border-right: 1px solid #6A1E55;
}

@keyframes spin1 {
	0% { transform: rotate(25deg); }
	25% { transform: rotate(30deg); }
	50% { transform: rotate(25deg); }
	75% { transform: rotate(40deg); }
	100% { transform: rotate(25deg); } 
}

@keyframes spin2 {
	0% { transform: rotate(90deg); }
	25% { transform: rotate(100deg); }
	50% { transform: rotate(90deg); }
	75% { transform: rotate(110deg); }
	100% { transform: rotate(90deg); } 
}

@keyframes spin3 {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(5deg); }
	50% { transform: rotate(0deg); }
	75% { transform: rotate(10deg); }
	100% { transform: rotate(0deg); } 
}

.blinkies {
	max-width: 100%;
}


#bio > .stats {
	width: 100%;
	height: 50%;
	border: 1px #6A1E55;
	border-style: solid none none none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.stats > .statbar1 {
	width: 100%;
	height: 50%;
	padding: 5px;
	border: 1px #6A1E55;
	border-style: none none solid none;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	gap: 5px;
}

.statbar1 > .bar1 {
	background-image: linear-gradient(to right, #6A1E55, rgb(13, 12, 12));
	background-color: transparent;
	background-repeat: no-repeat;
	width: 85%;
	height: 5%;
	border: 1px solid #6A1E55;
	border-radius: 50px;
	padding: 5px;
	animation-name: BarMove;
	animation-duration: 2.5s;
	animation-iteration-count: infinite;
}

.stats > .statbar2 {
	width: 100%;
	height: 50%;
	padding: 5px;
	border: 1px #6A1E55;
	border-style: none;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	gap: 5px;
}

.statbar2 > .bar2 {
	background-image: linear-gradient(to right, #6A1E55, rgb(13, 12, 12));
	background-color: transparent;
	background-size: 15%;
	background-repeat: no-repeat;
	width: 85%;
	height: 5%;
	border: 1px solid #6A1E55;
	border-radius: 50px;
	padding: 5px;
	animation-name: BarMove;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

@keyframes BarMove {
  0%   {background-size: 0%;}
  25%  {background-size: 100%;}
  50%  {background-size: 0%;}
  75%  {background-size: 100%;}
  100% {background-size: 0%;}
}

.statbar1 > .staticons {
	width: 24px;
}

.statbar2 > .staticons {
	width: 24px;
}

#status > #updates {
	width: 33.3%;
	height: 100%;
	border: 1px #6A1E55;
	border-style: none solid none solid;
	padding: 5px;
	display: flex;
	flex-direction: column;
}

#updates > #statuscafe {
    background: none;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

#statuscafe-username {
	background: rgb(13, 12, 12);
	width: 100%;
	height: 20%;
	border: 1px solid #6A1E55;
	border-radius: 25px 25px 5px 5px;
	padding: 5px;
    margin: 0 auto 0 auto;
	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 85%;
	font-family: "Bruno Ace SC" !important;
}

#statuscafe-content {
	background: rgb(13, 12, 12);
	width: 100%;
	height: 80%;
	border: 1px solid #6A1E55;
	border-radius: 5px 5px 25px 25px;
	padding: 10px;
    margin: 0 auto 0 auto;
	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 85%;
}

/* --- */

#content {
	width: 100%;
	border: 1px solid #6A1E55;
	border-radius: 0 0 5px 5px;
	padding: 5px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#systemtime {
	width: 100%;
	border: 1px solid #6A1E55;
	border-radius: 5px;
	padding: 5px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	font-family: "Bruno Ace SC";
	font-size: 12px !important;
}

#running-out-of-names-for-divs {
	width: 100%;
	height: 615px;
	border: 1px solid #6A1E55;
	border-radius: 5px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 5px;
}

#running-out-of-names-for-divs > .table-of-contents {
	width: 20%;
	height: 100%;
	border: 1px #6A1E55;
	border-style: none solid none none;
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.table-of-contents > .contentsheader {
	width: 100%;
	border: 1px solid #6A1E55;
	border-radius: 5px 25px 5px 5px;
	padding: 5px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-family: "Bruno Ace SC";
	font-size: 12px !important;
	text-decoration: underline 1px #6A1E55;
	text-decoration-style: dotted;
}

.table-of-contents > .links {
	width: 100%;
	border: 1px solid #6A1E55;
	border-radius: 5px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.table-of-contents > .temp {
	width: 100%;
	border: 1px solid #6A1E55;
	border-radius: 5px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
	overflow: auto;
}


#running-out-of-names-for-divs > .messages {
	width: 80%;
	height: 100%;
	border: 1px #6A1E55;
	border-style: none none none solid;
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	overflow: auto;
	text-align: justify !important;
}

.messages > .txtmessage {
	width: 100%;
	border: 1px solid #6A1E55;
	border-radius: 25px 25px 5px 25px;
	padding: 10px;
}

.messages > .messageend {
	width: 100%;
	padding: 5px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-decoration: underline 1px #6A1E55;
	text-decoration-style: dotted;
	font-family: "Bruno Ace SC" !important;
}

.line-header {
	width: 95%;
	border-bottom: 1px dotted #6A1E55;
}

#footer {
	width: 100%;
	border: 1px solid #6A1E55;
	border-radius: 5px 5px 25px 25px;
	padding: 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-family: "Bruno Ace SC" !important;
	text-decoration: underline 1px #6A1E55;
	text-decoration-style: dotted;
}

#status > #button-grid {
    display: grid; /* sets the grid layout */
    width: 33.3%; /* range of average size i use */
	height: 100%;
	border: 1px solid #6A1E55;
	border-style: none none none solid;
    grid-template-areas:
    "1 2 3"
	"4 5 6"
	"7 8 9";
    grid-template-columns: 4fr 4fr 4fr; /* vertical widths*/
    grid-template-rows: 2fr 2fr 2fr; /*horizontal width and heights. each value representing a row in the grid, from top to bottom*/
    gap: 10px; /*for the gap in between the rows and columns*/
    align-items: center;
    justify-items: center;
    margin: auto;
    padding: 15px;
}

#1 {grid-area: 1;}
#2 {grid-area: 2;}
#3 {grid-area: 3;}
#4 {grid-area: 4;}
#5 {grid-area: 5;}
#6 {grid-area: 6;}
#7 {grid-area: 7;}
#8 {grid-area: 8;}
#9 {grid-area: 9;}

.boop {
	background: linear-gradient(#1A1A1D, transparent);
	background-repeat: no-repeat;
	background-size: 100% 0%;
	width: 100%;
	height: 100%;
	border: 1px solid #6A1E55;
	border-radius: 10px;
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	color: #A64D79 !important;
	text-decoration: none !important;
	transition: background-size 1s ease, text-shadow 0.25s ease-in, box-shadow 0.25s ease-in;
}

.boop:hover {
	background-size: 100% 100%;
	box-shadow: 0px 0px 10px #6A1E55 !important;	
	text-shadow: 1px 1px 5px #6A1E55 !important;
	cursor: pointer !important;
}

.boop:active {
	background: linear-gradient(rgb(13, 12, 12), #1A1A1D);
	cursor: pointer !important;
}

.corner1 {
	background-image: linear-gradient(#1A1A1D, transparent);
	background-repeat: no-repeat;
	background-size: 100% 0%;
	width: 100%;
	height: 100%;
	border: 1px solid #6A1E55;
	border-radius: 25px 10px 10px 10px;
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	color: #A64D79 !important;
	text-decoration: none !important;
	transition: background-size 1s ease, text-shadow 0.25s ease-in, box-shadow 0.25s ease-in;
}

.corner2 {
	background-image: linear-gradient(#1A1A1D, transparent);
	background-repeat: no-repeat;
	background-size: 100% 0%;
	width: 100%;
	height: 100%;
	border: 1px solid #6A1E55;
	border-radius: 10px 25px 10px 10px;
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	color: #A64D79 !important;
	text-decoration: none !important;
	transition: background-size 1s ease, text-shadow 0.25s ease-in, box-shadow 0.25s ease-in;
}

.corner3 {
	background-image: linear-gradient(#1A1A1D, transparent);
	background-repeat: no-repeat;
	background-size: 100% 0%;
	width: 100%;
	height: 100%;
	border: 1px solid #6A1E55;
	border-radius: 10px 10px 10px 25px;
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	color: #A64D79 !important;
	text-decoration: none !important;
	transition: background-size 1s ease, text-shadow 0.25s ease-in, box-shadow 0.25s ease-in;
}

.corner4 {
	background-image: linear-gradient(#1A1A1D, transparent);
	background-repeat: no-repeat;
	background-size: 100% 0%;
	width: 100%;
	height: 100%;
	border: 1px solid #6A1E55;
	border-radius: 10px 10px 25px 10px;
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	color: #A64D79 !important;
	text-decoration: none !important;
	transition: background-size 1s ease, text-shadow 0.25s ease-in, box-shadow 0.25s ease-in;
}

.corner1:hover, .corner2:hover, .corner3:hover, .corner4:hover {
	background-size: 100% 100%;
	box-shadow: 0px 0px 10px #6A1E55 !important;	
	text-shadow: 1px 1px 5px #6A1E55 !important;
	cursor: pointer !important;
}

.corner1:active, .corner2:active, .corner3:active, .corner4:active {
	background: linear-gradient(to bottom, rgb(13, 12, 12), #1A1A1D);
	cursor: pointer !important;
}

/* Cbox Zone */


/* Cbox CSS */

#cbox {
	width: 100%;
	height: 100%;
	padding: 5px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

#cbox > .cbox {
	background: rgb(13, 12, 12);
	width: 100%;
	height: 100%;
	border: 1px solid #6A1E55;
	border-radius: 5px;
}

/* Cont. W3Schools Pop-up CSS */

/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
	background-color: rgb(13, 12, 12);
	background-image: linear-gradient(#1A1A1D, transparent);
	background-repeat: no-repeat;
	background-size: 100% 0%;
	width: 280px;
	padding: 10px;
	border: 1px solid #6A1E55;
	border-radius: 10px;
	position: fixed;
	bottom: 10px;
	right: 10px;
	transition: background-size 1s ease, text-shadow 0.25s ease-in, box-shadow 0.25s ease-in;
}

.open-button:hover {
	background-size: 100% 100%;
	box-shadow: 0px 0px 10px #6A1E55 !important;	
	text-shadow: 1px 1px 5px #6A1E55 !important;
	cursor: pointer !important;
}

.open-button:active {
	background: linear-gradient(rgb(13, 12, 12), #1A1A1D);
	cursor: pointer !important;
}

/* The popup chat - hidden by default */
.chat-popup {
	width: 280px;
	display: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 9;
}

/* Add styles to the form container */
.form-container {
	background: rgb(13, 12, 12);
	max-width: 300px;
	border: 1px solid #6A1E55;
	border-radius: 10px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.form-container .header {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.form-container > .msg-box {
	background: rgb(13, 12, 12);
	width: 100%;
	border: 1px solid #6A1E55;
	border-radius: 5px;
	padding: 5px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	font-family: "Bruno Ace SC" !important;	
}

/* Add a red background color to the cancel button */
.form-container .cancel {
	background: linear-gradient(#1A1A1D, transparent);
	background-repeat: no-repeat;
	background-size: 100% 0%;
	width: 10%;
	height: 5%;
	border: 1px solid #6A1E55;
	border-radius: 5px;
	padding: 3px 5px 3px 7px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: background-size 1s ease, text-shadow 0.25s ease-in, box-shadow 0.25s ease-in;
}

.cancel:hover {
	background-size: 100% 100%;
	box-shadow: 0px 0px 10px #6A1E55 !important;	
	text-shadow: 1px 1px 5px #6A1E55 !important;
	cursor: pointer !important;
}

.cancel:active {
	background: linear-gradient(rgb(13, 12, 12), #1A1A1D);
	cursor: pointer !important;
}

.msg-box .txt-box-img {
	width: 100%;
}

.chat-box-txt {
	font-size: 12px;
	text-align: center;
	font-family: "Bruno Ace SC" !important;
	font-weight: bold;
}

/* Scrollbar Settings */

/* Width */
::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
	background: transparent; 
	border: transparent;
	border-radius: 15px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
	background: rgb(13, 12, 12);
	border: 1px solid #6A1E55;
	border-radius: 5px;
}

/* === YUMEJOSHI PAGE === */

#mainyume {
	width: 100%;
	height: 95vh;
	min-height: 0;
	border: 1px solid #6A1E55;
	border-radius: 10px;
	padding: 5px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#mainyume > #contentyume {
	width: 100%;
	height: 100%;
	min-height: 0;
	border: 1px solid #6A1E55;
	border-radius: 5px;
	padding: 5px;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 5px;
}

#contentyume > #displayyume {
	width: 100%;
	height: 100%;
	min-height: 0;
	border: 1px solid #6A1E55;
	border-radius: 5px;
	display: flex;
	gap: 5px;
}

#displayyume > #navyume {
	width: 25%;
	border: 1px solid #6A1E55;
	border-style: none solid none none;
	padding: 10px;
}

#navyume > .buttonyume {
	background-image: linear-gradient(#1A1A1D, rgb(13, 12, 12));
	background-repeat: no-repeat;
	background-size: 100% 0%;
	width: 100%;
	border: 1px solid #6A1E55;
	border-radius: 10px;
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	color: #A64D79 !important;
	text-decoration: none !important;
	transition: background-size 1s ease, text-shadow 0.25s ease-in, box-shadow 0.25s ease-in !important;
}

.buttonyume:hover {
	background-size: 100% 100% !important;
	box-shadow: 0px 0px 10px #6A1E55 !important;	
	text-shadow: 1px 1px 5px #6A1E55 !important;
	cursor: pointer !important;
}

.buttonyume:active {
	background: linear-gradient(rgb(13, 12, 12), #1A1A1D) !important;
	cursor: pointer !important;
}

#displayyume > #profilesyume {
	width: 75%;
	height: 100%;
	min-height: 0;
	border: 1px solid #6A1E55;
	border-style: none none none solid;
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	overflow: auto;
}

#profilesyume > .rowyume {
	width: 100%;
	border: 1px solid #6A1E55;
	border-radius: 5px;
	padding: 5px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
}

.rowyume > .frameyume {
	width: 25%;
	min-width: 0;
	height: 100%;
	border: 1px solid #6A1E55;
	border-radius: 5px;
	padding: 5px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
}

.frameyume > .photos {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	border: 1px solid #6A1E55;
	border-radius: 5px;
}

.frameyume > .nameyume {
	width: 100%;
	border: 1px solid #6A1E55;
	border-radius: 5px 5px 10px 10px;
	padding: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 12px;
}

.profilesyume {
	width: 100%;
	height: 100%;
	border: 1px solid #6A1E55;
	border-radius: 5px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.profilesyume > .characterimg {
	width: 100%;
	height: 90%;
	border: 1px solid #6A1E55;
	border-radius: 5px;
}

.characterimg > .photo {
	width: 100%;
	height: 100%;
	border-radius: 5px;
}

/* text (yume-joshi) */

.heart {
	font-family: "Bruno Ace SC" !important;
	font-size: 12px !important;
}

.heart::after {
	content: " ♡";
}