@font-face {
font-family:'lemons';
src: url("/font/Lemon Fruit.otf")
format('OpenType');
}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

*{
 cursor: url("/cursor/pencil.png"), auto !important;
}


a:link {
  color: #9c887c;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #9c887c;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #9c887c;
  background-color: transparent;
  text-decoration: none;
  font-style:italic;
}

#hrnav{
	width:160px;
	border-style:dashed;
	border-width:2px;
	border-color:rosybrown;
}

ul {
 list-style-position: inside;
 list-style-image:url("http://media.tumblr.com/tumblr_m2qn3eha1X1qb1380.gif");
 padding:10px;
}

::selection {
 color: white;
 background: #ebaf2f;
}

/* Scrollbar CSS by dakedres on Github*/

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: white;
}
::-webkit-scrollbar-thumb,::-webkit-scrollbar-button {
  width: 16px;
  height: 16px;
  background: silver;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;
  border: 1px solid;
  border-color: silver #000 #000 silver;
}
::-webkit-scrollbar-track {
  image-rendering: optimizeSpeed;
  image-rendering: pixelated;
  image-rendering: optimize-contrast;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAyIDIiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+CjxtZXRhZGF0YT5NYWRlIHdpdGggUGl4ZWxzIHRvIFN2ZyBodHRwczovL2NvZGVwZW4uaW8vc2hzaGF3L3Blbi9YYnh2Tmo8L21ldGFkYXRhPgo8cGF0aCBzdHJva2U9IiNjMGMwYzAiIGQ9Ik0wIDBoMU0xIDFoMSIgLz4KPC9zdmc+");
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 2px;
}

::-webkit-scrollbar-button {
  background-repeat: no-repeat;
  background-size: 16px;
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTcgNWgxTTYgNmgzTTUgN2g1TTQgOGg3IiAvPgo8L3N2Zz4=");
}

::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTQgNWg3TTUgNmg1TTYgN2gzTTcgOGgxIiAvPgo8L3N2Zz4=");
}

::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTggM2gxTTcgNGgyTTYgNWgzTTUgNmg0TTYgN2gzTTcgOGgyTTggOWgxIiAvPgo8L3N2Zz4=");
}

::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTYgM2gxTTYgNGgyTTYgNWgzTTYgNmg0TTYgN2gzTTYgOGgyTTYgOWgxIiAvPgo8L3N2Zz4=");
}

::-webkit-scrollbar-corner {
  background: silver;
}

body{
	font-family:'lemons';
	font-size:1.1em;
	line-height:1.5em;
	color:#756260;
	background-image:url("/img/pompompurin.png");
	background-size:cover;
	overflow-x: hidden;
}

.header{
 text-shadow: -2px 2px 0 #ffcf8c, 2px 2px 0 #ffcf8c,
2px -2px 0 #ffcf8c,-2px -2px 0 #ffcf8c;
 color:white;
 font-size:35px;
 font-style:italic;
 padding:5px 0 5px 0;
 position:relative;
 z-index:3;
}

.container{
  margin: 5vw auto;
  width:60rem;
  height:40rem;
}

.contentrow{
  height:100%;
  width:100%;
  display:flex;
  flex-direction:row;
  filter: drop-shadow(3px 3px 3px #00000022);
 
}
	 

.leftpage{
 background-image:url("https://i.pinimg.com/564x/0c/9b/20/0c9b202a8b98c237118b0ebf0af176ac.jpg");
 background-size:repeat;
 background-size: 165px;
 border-radius:15px;
 height:100%;
 width:30rem;
 position:relative;

}

.spine{
  background-image:url("/img/spirals.png");
  background-size:cover;
  filter: brightness(130%);
 filter: sepia(100%);
  height:39rem;
  width:6rem;
  z-index:1;
  position:absolute;
  margin-left:27.2rem;
  margin-right:27.2rem;
}

.rightpage{
 background-image:url("https://i.pinimg.com/564x/0c/9b/20/0c9b202a8b98c237118b0ebf0af176ac.jpg");
 background-size:repeat;
 background-size: 170px;
 border-radius:15px;
 height:100%;
 width:30rem;
 position:relative;	
}

.page{
	margin-top:1rem;
	padding:40px;
	height:38rem;
	border-radius:15px;
	width:28rem;
	background-image:url("/img/lined-paper.png"),url("https://i.pinimg.com/enabled_lo/564x/45/6a/c3/456ac315dfb0ac789f820d22c472f378.jpg");
	background-size:300px,450px 600px;
	background-repeat:repeat,no-repeat;
	background-color:white;
	 filter: drop-shadow(3px 3px 3px #00000022);

}
#one{
   float:right;
   margin-right:0.5rem;
   padding-right:60px;
   padding:20px;
}
#two{
   float:left;
   margin-left:0.5rem;
   padding:30px 10px 30px 50px;
   
}

.taped {
  background-image:url('/img/orangetape.png');
  background-repeat:no-repeat;
  display:block;
  position:absolute;
  height:50px;
  width:150px;
  background-size:contain;
  left:5rem;
  z-index:10;
  rotate: 7deg;
}

.pen{
    position: absolute;
    z-index: 30;
    transform: scaleX(3);
    pointer-events: none;
    width:10rem;
    height:30rem;
    translate: 56.7rem 11rem;
    rotate: -35deg;
}

.navsect{
	display:flex;
	flex-direction: column;
	padding:10px;
	height:100%;
}

.navlinks{
	width:60%;
	overflow-y:scroll;
	height:4.5rem;
}

.stickynote{
	background-image:url(/img/whitestickynote.png);
	background-repeat: no-repeat;
	background-size: 250px;
	rotate: -6deg;
	padding:40px;
	height:16rem;
	z-index:0;
}

.bottomhalf{
	display:flex;
	flex-direction: row;
	gap:20px;
	margin-top:20px;
}

.intro{
	z-index:2;
	rotate: 6deg;
	text-align: center;
	background-image:url("https://cho.mayulog.net/wp-content/uploads/me18b.png");
	height:15rem;
	padding:10px;
	
}

.footer{
 text-align:center;
 padding:10px;
 background-color:floralwhite;
 width:50%;
 margin:0 auto;
}

@media screen and (max-width: 850px){
	.container{
		width:25rem;
		margin:3rem auto;
	}
	
	.contentrow{
		display:flex;
		flex-direction: column;
		width:100%;
		height:fit-content;
		gap:10px;
	}
	
	.pen{
		display:none;
	}
	
	.spine{
		transform: rotate(90deg);
		margin-left:10rem;
		margin-top:26rem;
		height:27rem;
		
	}
	
	.leftpage{
		width:100%;
		padding:10px;
	}
	
	.rightpage{
		width:100%;
		padding:10px;
	}
	
	.page{
		width:95%;
	}
	
	#one,#two{
		float:inherit;
		margin:0 auto;
	}
	
	#one{
		padding:5px;
	}
	
	#two{
		padding:10px;
	}
	
	.bottomhalf{
		margin-left:-1rem;
		transform: scale(0.8);
		width:24rem;
	}
}