body,html {
  margin:0;
  padding:0;}
  
body {background-color: white;}

p1 {display: block; margin-bottom: 5px;}

table {
	table-layout: fixed;
	margin: auto;
	border: solid 1px white;
	border-collapse: collapse;}
	
th, td {
	border: solid 1px white;
	padding: 3px;
	font-weight: normal;}
	
tbody, thead {
	font-size: 85%;
	text-align: left;}

#container {
	display: flex;
	left: 0px;
	width: 685px;
	height: 100vh;
	gap: 10px;}
	
	#sidebar {
		display: flex;
		flex-direction: column;
		width: 155px;
		height: 100%;
		font-size: 85%;
		padding-left: 10px;
		padding-right: 10px;
		overflow: hidden;
		border-right: 1px dashed black;
		background-color: white;}
		
		#nav {
			width: 220px;
			border: 1px solid white;
			color: white;
			background-color: rgb(0, 0, 0, 0.3);}
			
			#panel:hover, #welcome:hover {
				background-color: rgba(159, 182, 130, 0.7);}

	#main {
		display: flex;
		align-items: center;
		flex-direction: column;
		gap: 10px;
		width: 500px;
		height: 100%;
		z-index: 1;}
		
		#box {
			position: relative;
			width: 480px;
			height: 550px;
			border: 2px double white;
			background-color: rgb(173, 173, 173, 0.7);
			z-index: 1;}
			
			#welcome {
				position: absolute;
				bottom: 10px;
				left: 10px;
				width: 416px;
				height: 120px;
				padding-right: 20px;
				padding-left: 20px;
				color: white;
				border: 2px double white;
				text-shadow: 0px 0px 5px rgba(159, 182, 130, 1.0);
				background-color: rgb(0, 0, 0, 0.3);}
				
				#greeting {
					position: absolute;
					left: 20px;
					top: 0px;
					width: 300px;
					padding-right: 10px;
					border-right: 1px dashed white;}
					
				#navigation {
					position: absolute;
					top: 5px;
					left: 340px;}
				
			#log {
				position: absolute;
				top: 10px;
				right: 10px;
				width: 220px;
				height: 300px;
				z-index: 1;}
				
			#revbox {
				position: absolute;
				width: 440px;
				height: 375px;
				top: 20px;
				left: 20px;
				background-color: rgba(0, 0, 0, 0.3);}
				
				#rev {
					position: absolute;
					height: 375px;
					width: 208px;
					padding-left: 10px;
					font-size: 90%;
					text-align: justify;
					color: white;
					overflow: auto;}
					
				#revpic {
					float: right;
					width: 91px;
					padding-left: 10px;}
					
				#detbox {
					position: absolute;
					height: 165px;
					width: 79px;
					bottom: 10px;
					right: 120px;
					padding-left: 5px;
					padding-right: 5px;
					font-size: 85%;
					color: white;
					border-left: 1px dashed white;}
					
					#detdet {
						position: absolute;
						bottom: 0px;}
					
					#detail {
						font-size: 85%;}
										
				#currentpic {
					position: absolute;
					height: 185px;
					right: -10px;
					bottom: -10px;}
				
			#faves {
				position: absolute;
				width: 300px;
				right: -302px;
				bottom: 0px;
				overflow: hidden;}
				
				#tab, #tab1 {
					position: relative;
					left: -260px;
					display: block;
					width: 300px;
					height: 60px;
					overflow: auto;
					border-radius: 0px 10px 10px 0px;
					transition: all 0.5s ease-in-out;}
					
					#tab1 {
						padding-left: 10px;
						width: 290px;}
					
						#best {
							position: absolute;
							right: 10px;
							top: 0px;}
					
					#rinnman {
						position: relative;
						width: 300px;
						top: -50px;}
						
					#alice {
						position: relative;
						width: 300px;
						top: -130px;}
						
					#tsubasa {
						position: relative;
						width: 300px;
						top: -190px;}
						
					#berubara {
						position: relative;
						width: 300px;
						top: -145px;}
						
					#karasuno {
						position: relative;
						width: 300px;
						top: -40px;}
					
					#collectors {
						position: relative;
						width: 300px;
						top: -75px;}
					
					#tab:hover, #tab1:hover {
						transform: translate(260px);} 
			
		#box2 {
			width: 470px;
			padding-right: 10px;
			text-align: right;
			font-size: 85%;
			background-color: rgb(173, 173, 173);}
			
	#rin {
		position: absolute;
		height: 675px;
		bottom: 0px;
		left: -32px;}
		
	
	#mangabox {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 5px;
		overflow: auto;
		padding: 5px;
		position: absolute;
		width: 430px;
		height: 500px;
		top: 20px;
		left: 20px;
		background-color: rgba(0, 0, 0, 0.3);}
		
		#cover {
			display: block;
			height: 110px;
			filter: grayscale(1);}
			
			#cover:hover {
				filter: grayscale(0);}