html {
			/* feel free to delete this if you just want the normal cursor! */
			cursor: cell;
			scrollbar-color: #c5dca0 #add8e6;
			/*			scrollbar for firefox users*/
		}

		body {
			background: lightblue;
			margin: 0px;
			word-wrap: break-word;
			font-size: 19px;
			line-height: 25px;
			word-spacing: 4px;
			font-family: ms pgothic, arial;
			/* ms pgothic is not compatible with safari or mobile devices*/
			color: black;
		}

		mark {
			background: lightgoldenrodyellow;
		}

		#wrapper-index {
			/* the notebook's cover */
			background: lightgrey;
			position: relative;
			margin: auto;
			margin-top: 30px;
			margin-bottom: 35px;
			width: 1108px;
			padding: 20px 10px 15px 10px;
			border-radius: 20px;
			border: 1px solid black;
		}

		/*this is my ugly binder spiral! feel free to remove it or change it. it wont mess the rest of the code! */
		#tab1-wrapper:after,
		#tab2-wrapper:after,
		#tab3-wrapper:after,
		#tab4-wrapper:after,
		#tab5-wrapper:after,
		#tab6-wrapper:after,
		#tab7-wrapper:after,
		#tab8-wrapper:after {
			content: url(https://files.catbox.moe/4v6k8c.png);
			position: absolute;
			z-index: 10;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			top: 50%;
			left: 50%;
			pointer-events: none;
		}
.paper {
			/*the CSS of both "pages" boxes. you can choose the look of ALL pages here */
			background: url(https://files.catbox.moe/evxip4.png);
			z-index: 5;
			position: relative;
			display: inline-block;
			box-sizing: border-box;
			border: 1px solid lightblue;
			height: 600px;
		}

		.left {
			width: 490px;
			margin-left: 50px;
			margin-right: 10px;
			border-radius: 10px 0px 0px 10px;
			overflow: hidden;
		}

		.left-in {
			/*			the main purpose of this class if so the scrollbar of left pages arent obscured by the bind spiral */
			padding: 15px 10px 15px 25px;
			height: 100%;
			margin-right: 15px;
			overflow: auto;
		}

		.right {
			padding: 15px 25px;
			width: 490px;
			margin-left: 10px;
			border-radius: 0px 10px 10px 0px;
			overflow: auto;
		}

		/* you can also customize the look of SPECIFIC pages. take TAB 2 for example: */

		#tab2-p {
			font-family: consolas;
			font-size: 14px;
			background: url(https://files.catbox.moe/bdbuwr.png);
			border-color: lightcoral;
		}

		/* tab buttons CSS stuff */

		.tab {
			/* for the ones on the left */
			width: 590px;
			height: 50px;
			position: absolute;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			rotate: -90deg;
			top: -10px;
			left: -232px;
		}

		.tab2 {
			/* for the ones on the right */
			width: 590px;
			height: 50px;
			position: absolute;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			rotate: 90deg;
			top: 590px;
			right: -232px;
		}

		.tab button,
		.tab2 button {
			/*this is the look of the TABS! */
			z-index: 1;
			position: relative;
			vertical-align: top;
			width: 120px;
			margin: 0px 8px;
			padding: 10px 0px 30px 0px;
			font-family: newpenji, ms pgothic;
			border: none;
			cursor: help;
			font-size: 19px;
			transition-duration: 0.5s;
			top: 10px;
			border-radius: 10px 10px 0 0;
			border: 1px solid grey;
		}

		/* here you can change the color of each individual TAB button*/
		.tab1-b {
			background: #C5DCA0;
		}

		.tab2-b {
			background: #B6A7DC;
		}

		.tab3-b {
			background: #F9DAD0;
		}

		.tab4-b {
			background: #F5F2B8;
		}

		.tab5-b {
			background: #F1B46A;
		}

		/* hover effect of TAB*/
		.tab button:hover,
		.tab2 button:hover {
			top: 0px;
			cursor: -webkit-grab;
			cursor: grab;
		}

		/* selected TAB effect aka when its focused */
		.tab button.active,
		.tab2 button.active {
			top: 0px;
			cursor: -webkit-grabbing;
			cursor: grabbing;
			box-shadow: 1px 1px 20px 1px grey;
			outline: none;
		}

		/* custom scrollbar for chrome users, firefox users cant see this */
		::-webkit-scrollbar {
			width: 8px;
			height: 8px;
		}

		::-webkit-scrollbar-thumb:vertical {
			background: white;
			border: 1px solid black;
			border-radius: 10px;
		}

		::-webkit-scrollbar-thumb:horizontal {
			background: white;
			border: 1px solid black;
			border-radius: 10px;
		}

		::-webkit-scrollbar-track {
			border-radius: 10px;
			background: transparent;
		}