.tabcontent {
	justify-content: center;

	display: flex;
	flex-wrap: nowrap;
}

.navbar li{
	z-index: 10;
}

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: #640000e7;
	
}

#welcome {
	text-align: center;

	border-radius: 5px;
    border: 1px solid #2fbdff;

    background-color: #f0fafe;

    box-sizing: border-box;

    box-shadow: 3px 3px white inset, -1px -1px #d6d6d4 inset, 0.5px 0.5px #85d2f7, 5px 5px #dda0ddb2;
}

#maincontainer {
	margin-top: 20px;
	position: relative;
}

#wrapper-index {
	/* the notebook's cover */
	
    border: 1px solid #c71585;
    box-shadow: 3px 3px white inset;

    border-radius: 10px;

    background-color: #ffffbf;
    background-image: url(../graphics/dots.png);

	position: relative;
	
	margin: auto;
	margin-top: 0px;
	margin-bottom: 35px;
	width: 90%;
	padding: 20px 10px 15px 10px;

	font-family: "Pangolin", cursive;
	font-weight: 100;
	font-style: normal;

}

/*spiral*/
#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: "";
	background-image: url('https://files.catbox.moe/4v6k8c.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;

	top:50%;
	left:50%;
	height: 90%;
	width: 15%;



	position: absolute;

	transform: translateY(-50%) translateX(-50%);
	
	z-index: 10;
	
	pointer-events: none;
}

/* PAGES CSS */

.paper {
	width: 48%;

	background-image: url(../graphics/lattice.gif);
	background-size: 15px;
	background-color: white;

	z-index: 5;
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	border: 1px solid #7c431c;
	height: 560px;
}

.sectionTxt {
	overflow: auto;
	border: red 1px solid;
}

.sectionTxt p{
	margin: 15px;
}

.left {
	margin-right: 1%;
	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: 10px 15px 15px 15px;
	height: 100%;
	margin-right: 25px;
	overflow: auto;
}

.right {
	padding: 10px 15px 15px 25px;
	margin-left: 1%;
	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;	
}

/* tab buttons CSS stuff */

.tab {
	/* for the ones on the left */
	justify-content: center;

    display: flex;
	position: absolute;

	top:50%;
	left: 0px;

	width: 560px;

	transform: translateX(-50%) translateY(-50%) rotate(-90deg);

}

.tab2 {
	/* for the ones on the right */
	justify-content: center;

	display: flex;
	position: absolute;

	top:50%;
	right: 0%;

	width: 10%;

	transform: translateX(50%) translateY(-50%) rotate(90deg);

}

.tab button,
.tab2 button {
	/*this is the look of the TABS! */
	z-index: 1;
	position: relative;
	vertical-align: top;
	/* when changing fonts it might mess with the tabs and make them dissappear... change the width when that happens */

	margin: 0px 3%;
	padding: 10px 0px 30px 0px;

	font-family: "Borel", cursive;
    font-weight: 500;
    font-style: normal;

	font-size: 120%;
	transition-duration: 0.3s;
	top: 10px;
	border-radius: 10px 10px 0 0;
	border: 1px solid #7c431c;

	flex:1;

}

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

.tab2-b {
	background: #d1c4f4;
}

.tab3-b {
	background: #ffc2ad;
}

.tab4-b {
	background: #fdf89b;
}

.tab5-b {
	background: #ffb561;
}

/* 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 lightcoral;
	outline: none;
}

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

::-webkit-scrollbar-thumb:vertical {
	background: #fceded;
	border-radius: 10px;
	border: 1px solid #7c431c;
}

::-webkit-scrollbar-thumb:horizontal {
	background: #fceded;
	border-radius: 10px;
	border: 1px solid #7c431c;
}

::-webkit-scrollbar-track {
	background: transparent;
}