:root{
  --a: #808080;
  --visited: #0099FA;
  --hover: #ddd;
	--tab2: #EBADB0;
	--tab3: #EBEBAB;
	--tab4: #CEEFC4;
	--tab5: #CEEFED;
	--tab6: #ACECEE;
	--tab7: #ADACEE;
	--tab8: #CDCDCD;
  --stickynote: rgba(201, 231, 248, 0.85);
  --border: #EDF0FC;

	cursor: url(https://ani.cursors-4u.net/others/oth-9/oth852.cur), auto !important;
}

@font-face {
  font-family: 'Chicago';
  src: url(https://mrsazden.neocities.org/fonts/Chicago.ttf);
}

@font-face {
  font-family: 'TiPro';
  src: url(https://mrsazden.neocities.org/fonts/TiPro.woff);
}

a:link {
  color: var(--a);
  text-decoration: none;
}

a:visited {
  color: var(--visited);
  text-decoration: none;
}

a:hover {
  color: var(--hover);
  text-decoration: none;
}

h1,h2,p,a {
	position: relative;
}

h1 {
	font-family: 'Chicago';
  text-align: center;
	font-size: 20pt;
	text-shadow: 2px 2px 0px #c0c0c0;
}

h2 {
  background: url('https://i.postimg.cc/vTVBv4tz/n2598ui-RV81qhwjx8540.gif');
  font-family: 'Chicago';
    font-size: 15pt;
  border: 1.5px solid white;
  outline: 1.5px dashed #A9DCFE;
  border-radius: 10px;
  padding: 3px;
  padding-left: 10px;
}

p, a {
	font-family: 'TiPro';
	font-size: 8pt;
	line-height: 1.2;
}

body {
  background: url(https://i.postimg.cc/Z5qCFbqN/32.gif); /* main background */
  margin: 0px;
  word-wrap: break-word;
  color: black;
  font-family: 'Chicago';
}

#wrapper-index {
  background: url(https://i.postimg.cc/vHv4Yfkf/plaidbg4.png); /* the notebook's cover */
  border-radius: 25px;
  border: 1px solid white;
  position: relative;
  margin: auto;
    margin-top: 30px;
    margin-bottom: 35px;
  width: 1108px; height: 615px;
  padding: 20px 10px 15px 10px;
}

.paper { /* the CSS of both "pages" boxes. you can choose the look of ALL pages here */
	background: url(https://i.postimg.cc/nVNfmHS3/1-bb.gif);
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	border: 1px solid var(--border);
	height: 600px;
}

.left {
	width: 490px;
	margin-left: 50px;
	margin-right: 5px;
	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: 5px;
	border-radius: 0px 10px 10px 0px;
	overflow: auto;
}

img.sticker{ /* styling of all stickers */
	/*border: 1px dashed red;*/
	filter: drop-shadow(1px 0px 0px white) drop-shadow(0px 1px 0px white) drop-shadow(-1px 0px 0px white) drop-shadow(0px -1px 0px white);
}


#tab2-p { /* you can also customize the look of SPECIFIC pages */
	background: url(https://i.postimg.cc/ZnGH5scL/backg39.jpg);
	border-color: var(--tab2);
}

#tab3-p {
	background: url(https://i.postimg.cc/3Rb9Px0V/backg40.jpg);
	border-color: var(--tab3);
}

#tab4-p {
	background: url(https://i.postimg.cc/Y2syPb10/033-2.gif);
	border-color: var(--tab4);
}

#tab5-p {
	background: url(https://i.postimg.cc/JzwYr0YW/034-2.gif);
	border-color: var(--tab5);
}

#tab6-p {
	background: url(https://i.postimg.cc/wBgWNPdf/backg42.jpg);
	border-color: var(--tab6);
}

#tab7-p {
	background: url(https://i.postimg.cc/PrvFnY44/backg43.jpg);
	border-color: var(--tab7);
}

#tab8-p {
	background: url(https://i.postimg.cc/RCWzq3d3/backg38.jpg);
	border-color: var(--tab8);
}

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

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

.tabL button,
.tabR button { /* this is the look of both L & R 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 */
  width: 120px;
  margin: 0px 8px;
  padding: 10px 0px 30px 0px;
  font-family: inherit; /* inherits body font */
  border: none;
  transition-duration: 0.2s;
  top: 10px;
  border-radius: 5px 5px 0 0;
  border: 1px solid grey;
}

/* here you can change the color of each individual TAB button*/
/*.tab1-b {background: #845ec2;}
.tab2-b {background: #d65db1;}
.tab3-b {background: #ff6f91;}
.tab4-b {background: #ff9671;}
.tab5-b {background: #ffc75f;}
.tab6-b {background: #f9f871;}
.tab7-b { background: #008f7a;}
.tab8-b {background: #0089ba;}*/

.tab1-b {background: white;} /*home tab*/
.tab2-b {background: var(--tab2);}
.tab3-b {background: var(--tab3);}
.tab4-b {background: var(--tab4);}
.tab5-b {background: var(--tab5);}
.tab6-b {background: var(--tab6);}
.tab7-b {background: var(--tab7);}
.tab8-b {background: var(--tab8);}

.tabL button:hover,
.tabR button:hover { /* hover effect of tab*/
  top: 1px;
  cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur817.cur), auto !important;
}

.tabL button.active,
.tabR button.active { /* selected tab aka focused */
  font-weight: bolder;
  transition-timing-function: linear;
  box-shadow: 1px 1px 50px 1px white;
  outline: none;
}

/* binder 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: 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;
}*/

.stickynote {
/*border: 1px dashed red;*/
  position: relative;
    top: -100px;
	  left: 28%;

  z-index: 998; /* specifically under the washi tape by 1 */
  transform: rotate(4deg);
  width: 175px;
  max-height: 155px;
  margin: -10px 10px 10px;
  padding: 10px;
  font-family: arial;
  background: var(--stickynote);
  box-shadow: -2px 2px 2px rgba(0,0,0,0.3);
  overflow-y: auto;
  overflow-x: hidden;
}

/*.box2 {
  background: var(--stickynote);
  box-shadow: 3px 3px 5px #666;
  box-sizing: border-box;
  margin: 35px auto;
  margin-right: auto;
  margin-right: -1px;
  padding: 10px 10px 0px 10px;
  position: relative;
  height: 14em;
  width: 80%;
}	*/

.washi { /* washi tape decor */
/*border: 1px dashed red;*/
  background: url(https://gothprincess.neocities.org/imgs/tapegreen.png);
    background-repeat: no-repeat;
    background-position: center;
  position: absolute;
    z-index: 999; /*makes the tape be on top */
    transform: rotate(4deg);
    left: 25%;
    bottom: 18%;
    
   width: 200px;
    height: 55px;
  margin: 0 10px;

}

.center{
  display: block;
  margin: 0 auto;
}