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-image: url("https://mametzwood.neocities.org/assets/backgrounds/tabletop.jpg");
    background-size: cover; 
			margin: 0px;
			word-wrap: break-word;
			font-size: 19px;
			line-height: 25px;
			word-spacing: 4px;
      font-family: Olivetti;
			/* ms pgothic is not compatible with safari or mobile devices*/
			color: black;
		}

		mark {
			background: lightgoldenrodyellow;
		}

		#wrapper-index {
			/* the notebook's cover */
		 background-image: url("https://mametzwood.neocities.org/assets/backgrounds/redbook.jpg");
      background-size: fit; 
      background-repeat: no repeat ; 
			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;
		}

		/* PAGES CSS */

		.paper {
			/*the CSS of both "pages" boxes. you can choose the look of ALL pages here */
			background: url(https://mametzwood.neocities.org/assets/backgrounds/papeer.jpg);
			z-index: 5;
			position: relative;
			display: inline-block;
			box-sizing: border-box;
			border: 1px solid black;
			height: 600px;
      font-family: SmithCorona;
      
		}

		.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: SmithCorona;
			font-size: 1.25rem;
			background: url(https://mametzwood.neocities.org/assets/backgrounds/papeer.jpg);
			border-color: black;
		}

		/* 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: Olivetti;
			border: none;
			cursor: help;
			font-size: 19px;
			transition-duration: 0.5s;
			top: 10px;
			border-radius: 10px 10px 0 0;
			border: 1px solid black;
		}

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

		.tab2-b {
			background: #E56E2E;
		}

		.tab3-b {
			background: #EAA72F;
		}

		.tab4-b {
			background: #51a885;
		}

		.tab5-b {
			background: #259AA1;
		}
.tab6-b {
			background: #722880;
		}
.tab7-b {
			background: #D72D51;
		}
		/* 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 black;
			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;
		}
    
@font-face {
src: url(https://dl.dropbox.com/scl/fi/ku8iwqhjzvraziqi62azm/zai_OlivettiLettera22Typewriter.ttf?rlkey=z0bhx6g8e41ym54akwsm4fc7d&);
font-family: Olivetti ;
} 
#Olivetti {
font-family: 'Olivetti';
  font-size: 1.5rem;
}
@font-face {
src: url(https://www.dropbox.com/scl/fi/v56ij4rf0efyzhlqwt6v2/NETWORK-D___.otf?rlkey=aummq5alof7r4wxkbxaaxoqd0&);
font-family: Network ;
} 
#Network {
font-family: 'Network';
  font-size: 1.25rem;
}
@font-face {
src: url(https://dl.dropbox.com/s/howypjfoyk68ekf/zai_Smith-CoronaGalaxieTypewriter.otf?st=tcqbeavb&);
font-family: Smithcorona;
}
 
#Smithcorona {
font-family: 'Smithcorona';
  font-size: 1rem;
}