@font-face {
    font-family: BGirl;
    src: url(https://file.garden/aBMHISKj5T3zDZol/Fonts/212%20Baby%20Girl.otf);
}

@font-face {
    font-family: sugar;
    src: url(https://file.garden/aBMHISKj5T3zDZol/Fonts/Sugar%20Crush.otf);
}

::selection {
    color: deeppink;
    background:transparent;
    text-decoration: underline;
}

html {
			/* feel free to delete this if you just want the normal cursor! */
			cursor: url(https://ani.cursors-4u.net/others/oth-9/oth846.cur), auto !important;
			scrollbar-color: #c5dca0 #add8e6;
			/*			scrollbar for firefox users*/
		}

		body {
			background: lightblue;
			margin: 0px;
			word-wrap: break-word;
			font-size: 15px;
			line-height: 25px;
			word-spacing: 4px;
			font-family: BGirl;
			/* 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;
		}

		/* PAGES CSS */

		.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: BGirl;
			font-size: 14px;
			background: url(https://files.catbox.moe/evxip4.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: sugar;
			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;
		}

u {
    color: deeppink;
    text-decoration: 1px dashed;
}

.link-button {
      position: fixed;
      top: 16px;
      left: 16px;
      background: linear-gradient(135deg, #5a67d8, #38b2ac);
      color: white;
      padding: 12px 24px;
      border-radius: 12px;
      font-weight: 500;
      font-size: 1rem;
      text-decoration: none;
      box-shadow: 0 4px 8px rgba(56, 178, 172, 0.3);
      transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
      user-select: none;
      z-index: 1000;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      white-space: nowrap;
    }
	
	.link-button:hover,
    .link-button:focus-visible {
      background: linear-gradient(135deg, #38b2ac, #5a67d8);
      box-shadow: 0 6px 12px rgba(56, 178, 172, 0.5);
      outline: none;
      transform: translateY(-2px);
    }
    .link-button:focus-visible {
      outline: 3px solid #81e6d9;
      outline-offset: 2px;
    }