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



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

.TAB-CONTAINER > .TAB1 {
	width: 67%;
	border-bottom: none !important;
	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-CONTAINER > .TAB2 {
	width: 33.3%;
	border-bottom: none !important;
	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-CONTAINER {
	width: 100%;
	height: 175px;
	border-bottom: none;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
}

#STATUS-CONTAINER > #DOODADS {
	width: 33.3%;
	height: 100%;
	border-top: none;
	border-bottom: none;
	border-left: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#DOODADS > .MINI-BAR-CONTAINER {
	width: 100%;
	height: 50%;
	border-style: none;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.MINI-BAR-CONTAINER > .UP-DOWN-BAR {
	width: 30%;
	height: 100%;
	border-top: none;
	border-bottom: none;
	border-left: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.UP-DOWN-BAR-img {
	background-image: linear-gradient(#6A1E55, transparent);
	background-color: transparent;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	border-style: none !important;
	animation: Bigbar 5s ease-in-out infinite;
	transform: rotate(180deg);
}

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

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

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

.GAUGE2 {
	width: 45px;
	height: 45px;
	border-radius: 100%;
	padding: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	animation: spin2 2s ease infinite;
}

.GAUGE3 {
	width: 45px;
	height: 45px;
	border-radius: 100%;
	padding: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	animation: spin3 3s ease infinite;
}

.GAUGE-TICKER {
	height: 50%;
	border-top: none;
	border-bottom: none;	
	border-left: none;
}

@keyframes spin1 {
	0% { transform: rotate(-90deg); }
	25% { transform: rotate(-45deg); }
	50% { transform: rotate(-90deg); }
	75% { transform: rotate(-45deg); }
	100% { transform: rotate(-90deg); } 
}

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

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

#DOODADS > .X-BAR-CONTAINER {
	width: 100%;
	height: 50%;
	border-right: none;
	border-bottom: none;
	border-left: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.X-BAR-CONTAINER > .X-BAR-BOX1 {
	width: 100%;
	height: 50%;
	padding: 5px;
	border-top: none;
	border-right: none; 
	border-left: none;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	gap: 5px;
}

.X-BAR-BOX1 > .X-BAR1 {
	background-image: linear-gradient(to right, #6A1E55, transparent);
	background-color: transparent;
	background-repeat: no-repeat;
	width: 85%;
	height: 5%;
	border-radius: 50px;
	padding: 5px;
	animation: BarMove 3s ease-in-out infinite;
}

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

.X-BAR-CONTAINER > .X-BAR-BOX2 {
	width: 100%;
	height: 50%;
	padding: 5px;
	border-style: none;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	gap: 5px;
}

.X-BAR-BOX2 > .X-BAR2 {
	background-image: linear-gradient(to right, #6A1E55, transparent);
	background-color: transparent;
	background-size: 15%;
	background-repeat: no-repeat;
	width: 85%;
	height: 5%;
	border-radius: 50px;
	padding: 5px;
	animation: BarMove2 3s ease-in-out infinite;
}

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

.X-BAR-BOX1 > .STATICON {
	width: 24px;
}

.X-BAR-BOX2 > .STATICON {
	width: 24px;
}

#STATUS-CONTAINER > #STATUS-CAFE-BOX {
	width: 33.3%;
	height: 100%;
	border-top: none;
	border-bottom: none;
	padding: 5px;
	display: flex;
	flex-direction: column;
}

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

#statuscafe-username {
	width: 100%;
	height: 20%;
	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 {
	width: 100%;
	height: 80%;
	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%;
}

.TOOLS {
	width: 100%;
	border-radius: 5px;
	padding: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

.SMS {
	width: 100%;
	border-radius: 5px 5px 25px 25px;
	padding: 5px;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
}

.SMS > .DIVIDER {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#STATUS-CONTAINER > #NAV-BUTTONS {
    display: grid; /* sets the grid layout */
    width: 33.3%; /* range of average size i use */
	height: 100%;
	border-top: none;
	border-bottom: none;
	border-right: none;
    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;}

.NAV-BOOP {
	background: linear-gradient(#1A1A1D, transparent);
	background-repeat: no-repeat;
	background-size: 100% 0%;
	width: 100%;
	height: 100%;
	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;
}

.NAV-BOOP:hover {
	background-size: 100% 100% !important;
	background-repeat: no-repeat !important;
	box-shadow: 0px 0px 10px #6A1E55 !important;	
	text-shadow: 1px 1px 5px #6A1E55 !important;
	text-decoration: none !important;
	cursor: url('https://i.postimg.cc/ZK1Qdk6W/pointer-(filled).png'), pointer !important;
}

.NAV-BOOP:active {
	background: linear-gradient(rgb(13, 12, 12), #1A1A1D) !important;
	background-repeat: no-repeat !important;
	text-decoration: none !important;
	cursor: url('https://i.postimg.cc/ZK1Qdk6W/pointer-(filled).png'), pointer !important;
}

.NAV-BOOP-TOP-RIGHT {
	background-image: linear-gradient(#1A1A1D, transparent) !important;
	background-repeat: no-repeat !important;
	background-size: 100% 0% !important;
	width: 100%;
	height: 100%;
	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;
}

.NAV-BOOP-TOP-LEFT {
	background-image: linear-gradient(#1A1A1D, transparent) !important;
	background-repeat: no-repeat !important;
	background-size: 100% 0% !important;
	width: 100%;
	height: 100%;
	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;
}

.NAV-BOOP-BOT-RIGHT {
	background-image: linear-gradient(#1A1A1D, transparent) !important;
	background-repeat: no-repeat !important;
	background-size: 100% 0% !important;
	width: 100%;
	height: 100%;
	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 !important;
}

.NAV-BOOP-BOT-LEFT {
	background-image: linear-gradient(#1A1A1D, transparent) !important;
	background-repeat: no-repeat !important;
	background-size: 100% 0% !important;
	width: 100%;
	height: 100%;
	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 !important;
}

.NAV-BOOP-TOP-RIGHT:hover, .NAV-BOOP-TOP-LEFT:hover, .NAV-BOOP-BOT-RIGHT:hover, .NAV-BOOP-BOT-LEFT:hover {
	background-size: 100% 100% !important;
	background-repeat: no-repeat !important;
	box-shadow: 0px 0px 10px #6A1E55 !important;	
	text-shadow: 1px 1px 5px #6A1E55 !important;
	text-decoration: none !important;
	cursor: url('https://i.postimg.cc/ZK1Qdk6W/pointer-(filled).png'), pointer !important;
}

.NAV-BOOP-TOP-RIGHT:active, .NAV-BOOP-TOP-LEFT:active, .NAV-BOOP-BOT-RIGHT:active, .NAV-BOOP-BOT-LEFT:active {
	background: linear-gradient(rgb(13, 12, 12), #1A1A1D) !important;
	background-repeat: no-repeat !important;
	text-decoration: none !important;
	cursor: url('https://i.postimg.cc/ZK1Qdk6W/pointer-(filled).png'), pointer !important;
}

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

#cbox > .cbox {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 5px;
}

.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-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;
	font-family: "Bruno Ace SC" !important;
	font-size: 12px;
	text-decoration: underline 1px;
	text-decoration-style: dotted;
}

.open-button:hover {
	background-size: 100% 100%;
	box-shadow: 0px 0px 10px #6A1E55 !important;	
	text-shadow: 1px 1px 5px #6A1E55 !important;
	cursor: url('https://i.postimg.cc/ZK1Qdk6W/pointer-(filled).png'), pointer !important;
}

.open-button:active {
	background: linear-gradient(rgb(13, 12, 12), #1A1A1D);
	cursor: url('https://i.postimg.cc/ZK1Qdk6W/pointer-(filled).png'), pointer !important;
}

.chat-popup {
	background: rgb(13, 12, 12) !important;
	width: 280px;
	border-radius: 10px;
	display: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 9;
}

.form-container {
	max-width: 300px;
	border-radius: 10px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

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

.form-container > .msg-box {
	width: 100%;
	border-radius: 5px;
	padding: 5px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	font-family: "Bruno Ace SC" !important;	
}

.form-container .cancel {
	background: linear-gradient(#1A1A1D, transparent);
	background-repeat: no-repeat;
	background-size: 100% 0%;
	width: 10%;
	height: 5%;
	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: url('https://i.postimg.cc/ZK1Qdk6W/pointer-(filled).png'), pointer !important;
}

.cancel:active {
	background: linear-gradient(rgb(13, 12, 12), #1A1A1D);
	cursor: url('https://i.postimg.cc/ZK1Qdk6W/pointer-(filled).png'), 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;
	text-decoration: underline 1px;
	text-decoration-style: dotted;
}

/* === OTHER PAGES === */

#main2 {
	width: 100%;
	height: 100vh;
	min-height: 0;
	border-radius: 10px;
	padding: 5px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#main2 > #content2 {
	width: 100%;
	height: 100%;
	min-height: 0;
	border-radius: 5px;
	padding: 5px;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 5px;
}

#content2 > #display2 {
	width: 100%;
	height: 100%;
	min-height: 0;
	border-radius: 5px;
	display: flex;
	gap: 5px;
}

#display2 > #nav2 {
	width: 25%;
	
	border-style: none solid none none;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
}

#nav2 > .buttonn {
	background-image: linear-gradient(#1A1A1D, rgb(13, 12, 12));
	background-repeat: no-repeat;
	background-size: 100% 0%;
	width: 100%;
	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;
}

.buttonn:hover {
	background-size: 100% 100% !important;
	box-shadow: 0px 0px 10px #6A1E55 !important;	
	text-shadow: 1px 1px 5px #6A1E55 !important;
	cursor: url('https://i.postimg.cc/ZK1Qdk6W/pointer-(filled).png'), pointer !important;
}

.buttonn:active {
	background: linear-gradient(rgb(13, 12, 12), #1A1A1D) !important;
	cursor: url('https://i.postimg.cc/ZK1Qdk6W/pointer-(filled).png'), pointer !important;
}

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

/* === "YUME-JOSHI" PAGE === */

#content2 > .rowyume {
	width: 100%;
	
	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-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-radius: 5px;
}

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

.profiles2 {
	width: 100%;
	height: 100%;
	
	border-radius: 5px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.profiles2 > .characterimg {
	width: 100%;
	height: 90%;
	
	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:hover, .heart:active {
	cursor: url('https://i.postimg.cc/ZK1Qdk6W/pointer-(filled).png'), pointer !important;	
}

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


/* === "WRITING" PAGE === */

#iframe {
	width: 100%;
	height: 100%;
	min-height: 0;
	
	border-radius: 5px;
}

/* === WRITING INDEX === */

#writingindexmenu {
	width: 100%;
	height: 100%;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
}

.writingindexcontent {
	width: 100%;
	height: 100%;
	min-height: 0;
	
	border-radius: 5px;
	padding: 5px;
}

/* === "STATUS REPORT" MENU === */

#menuwrapper {
	width: 100%;
	height: 100%;
	min-height: 0;
	min-width: 0;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#menuwrapper > #statusreportmenu {
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 10px;
	display: flex;
	flex-direction: column;	
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
}

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

/* === LANDING === */

.landing-box {
	width: 100%;
	height: 500;
	border: 1px solid red;
}