;
}
body {
background: #000202;
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 */
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 itor 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://doqmeat.neocities.org/!g/web/materials/spiral-test4.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://doqmeat.neocities.org/!g/bg/whiteline.jpg);
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 {
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 TAB pages. take TAB 2 for example: */
#tab2-p {
font-family: consolas;
font-size: 14px;
background: url(https://doqmeat.neocities.org/!g/bg/yellobg.png);
border-color: lightcoral;
}
/* tab buttons CSS stuff */
.tab {
/* for the ones on the right */
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 left */
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 */
.tab button.active,
.tab2 button.active {
top: 0px;
cursor: -webkit-grabbing;
cursor: grabbing;
box-shadow: 1px 1px 20px 1px grey;
}
/* so pages stay hidden */
.tabcontent {
display: 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;
}