:root {
  --page-bg: #1d1d22;
  --carousel-bg: #7e8ca5;
  --carousel-gallery-bg: #5d6984;
  --info-bg: #384155;
  --info-box-bg: rgb(0 0 0 / 50%);
  --info-color: #fff;
  --info-color-link: #fff;
  --info-color-link-hover: #fff;
  
  --info-max-height: 700px;
  
  --font-family: consolas;
  
  --link-decoration: none;
}

body {
	background: var(--page-bg);
	margin:0;
	margin-top: 1rem;
	overflow: overlay;
	font-family:var(--font-family);
}

/* General Profile CSS */
#profile-wrapper {
	position:relative;
	max-width: 1200px;
	margin:auto;
}

#profile-wrapper > div {flex:1;}

#profile-wrapper button {background: transparent; border: 0;}	
#profile-wrapper input {appearance:none; display:none;}

/* Carousel CSS */
#carousel-wrapper {
	background:var(--carousel-bg);
	/*border-radius: 1rem 0 0 1rem;*/
	position:relative;
}

#character-wrapper {height:100%; text-align:center;}
#character-wrapper img { max-width:100%; margin:auto;}

#carousel-main {
	position:relative;
    height: calc(100% - 100px);
}

#carousel-gallery {
	overflow-x: overlay;
	overflow-y: hidden;
    width: 100%;
    position: absolute;
    justify-content: center;
	background: var(--carousel-gallery-bg);
}

#carousel-gallery img {height: 100px; cursor: pointer;}

.carousel-button {
	z-index: 666;
    margin: 0.5rem;
	cursor: pointer;
}

#carousel-previous {
	position: absolute;
	margin:auto;
	top:0; bottom:0; left:0;
}

#carousel-next {
	position: absolute;
	margin:auto;
	top:0; bottom:0; right:0;
}

/* Info Area CSS */
#info-wrapper {
	background:var(--info-bg);
    position: relative;
	color:var(--info-color);
	/*border-radius: 0 1rem 1rem 0;*/
}

#info-wrapper a {color:var(--info-color-link); text-decoration:var(--link-decoration);}
#info-wrapper a:hover {color:var(--info-color-link-hover);}

#info-scroll {
	max-height:var(--info-max-height);
    overflow: overlay;
}

#info-scroll > div {margin: 1rem;}

.info-box {
	padding: 1rem;
	border-radius: 0.5rem;
	background: var(--info-box-bg);
}

.info-box img {
	max-width: 100%;
    filter: invert(1);
}

/* Margin Adjustments */

.info-box p, .info-box ul {
	margin-block-start: 1rem;
	margin-block-end: 1rem;
}

/*Carousel*/
.main-image-1 {z-index:50; display:none;} #main-image-1:checked ~ #character-wrapper .main-image-1 {display: block;}
.main-image-2 {z-index:50; display:none;} #main-image-2:checked ~ #character-wrapper .main-image-2 {display: block;}
.main-image-3 {z-index:50; display:none;} #main-image-3:checked ~ #character-wrapper .main-image-3 {display: block;}
.main-image-4 {z-index:50; display:none;} #main-image-4:checked ~ #character-wrapper .main-image-4 {display: block;}

/*Scrollbar*/

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.5);
}

/*Misc Reusable Code*/

.no-select img {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
  -webkit-user-drag: none; 
  -khtml-user-drag: none; 
  -moz-user-drag: none; 
  -o-user-drag: none; 
  user-drag: none; 
}

.pixel-render img {image-rendering: optimizeSpeed;image-rendering: -moz-crisp-edges;image-rendering: -webkit-optimize-contrast;image-rendering: optimize-contrast;image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor;}

.text-center {text-align:center;}
.font-large {font-size:large;}

.flex {display:flex;}
.flex-gap {gap: 1em;}
.flex-1 {flex:1}

.mb-0_1 {margin-bottom:0.5rem;}
.list-square {list-style-type:square;}
.ws-pre-line {white-space: pre-line;}

/* Mobile */
@media (max-width: 850px) {
  #profile-wrapper {
	flex-flow: column;
  }
  
  /*#carousel-wrapper {border-radius: 1rem 1rem 0 0;}*/
  /*#info-wrapper {border-radius: 0 0 1rem 1rem;}*/
	
  body {
	margin-top: 0;
  }

	#info-scroll {
		max-height: unset;
		overflow: auto;
	}
}