@font-face {
  src:url('https://file.garden/aRLO62dQMCKHp7YG/fonts/ZTNature-Medium.ttf');
  font-family:'nature';
}

:root {
  --main:#fef8e8;
  --sub:#dca21b;
  --three:#b25820;
  --accent:#206f95;
  --text:#552e2f;
}

::selection {
  background:var(--sub);
	color:var(--main);
  text-shadow:none;
}

.paste-info, .site-header, .site-footer {
  display:none !important;
}

.button, .button:hover {
  background:none;
  color:white;
}

.button.edit::before {
  content:"♪ edit";
  font-size:14px;
}

.button.edit {
  font-size:0;
}

::-webkit-scrollbar {
  width:0px;
  height:0px;
  background:transparent;
}

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

main { 
	width:600px;
	margin:auto;
	font-family:'nature';
	color:var(--main);
}

body {
  background-image:linear-gradient(to bottom, rgba(193, 145, 63, 0.452), rgba(10, 95, 179, 0.277)),
    url("https://i.postimg.cc/NFdbhJTQ/insomnia-bg.png");
  background-size:cover;
  background-repeat:no-repeat;
}

.text-container {
	width:580px;
	height:auto;
	padding:3%;
	background-color:var(--main);
  border:var(--sub) 3.5px solid;
  outline:var(--accent) 2px solid;
	color:var(--text);
}

.main {
  height:100%;
	font-family:'nature';
}

.top {
  width:100%;
  margin-bottom:6px;
  display:block;
}

.header {
  width:100%;
	margin-bottom:2px;
}

.yukika {
	width:100%;
}

.yukika img {
	width:100%;
  outline:var(--text) 2px solid;
}

.mid {
  width:100%;
  height:265px;
  display:flex;
}

.mleft {
  width:45%;
}

.mright {
  width:55%;
}

.box {
  width:100%;
  height:245px;
  margin-top:5px;
  padding:8px;
	background-color:var(--main);
  border:var(--sub) 3.5px solid;
  outline:var(--accent) 2px solid;
  overflow-x:auto;
  overflow-y:scroll;
  font-size:17px;
  word-spacing:5px;
	line-height:27px;
	color:var(--text);
  text-align:justify;
}

.box a {
  letter-spacing:normal;
  transition:0.3s;
  color:var(--accent);
}

.box a:hover {
  filter:blur(0.3px);
  transition:0.25s ease-in;
  letter-spacing:1.2px;
}

.record {
  width:auto;
  height:241px;
	scale:97%;
  margin-right:4px;
  animation:spin 2s linear infinite;
  animation:spin 2s linear infinite;
}

.bottom {
  width:100%;
  height:265px;
  display:flex;
}

.bleft {
  width:52%;
}

.bright {
  width:48%;
}

.imgcontainer {
  width:100%;
  margin-top:5px;
}

.yukika2 {
  height:245px;
	margin-left:12px;
  background-image:url('https://i.postimg.cc/W1fqcmx3/insomnia_2.gif');
  background-size:contain no-repeat;
	background-position:570px;
  outline:var(--text) 2px solid;
}

.footer {
  width:100%;
	padding-bottom:6px;
	text-align:right;
}

@keyframes spin {
  100% {transform:rotate(360deg);}
}

#lH {
  position:relative;
  bottom:50px;
	right:5px;
  width:auto;
  height:245px;
  z-index:1;
  font-size:10px;
  text-align:center;
}

#aH {
	width:100px;
	scale:380%;
  position:relative;
	rotate:180deg;
  top:150px;
  right:85px;
  z-index:2;
  opacity:0.01;
}

.h {
  background:rgba(220, 110, 20, 0.573);
  padding:1.2px 6px;
}

.g {
  background:rgba(20, 157, 220, 0.573);
  padding:1.2px 6px;
}

b {
	color:var(--three);
	font-weight:500;
}

a {
  letter-spacing:normal;
  transition:0.3s;
  color:var(--main);
}

a:hover {
  filter:blur(0.3px);
  transition:0.25s ease-in;
  letter-spacing:1.2px;
}

@media screen and (max-width:500px) {
  main {
    width:400px;
  }
	.text-container {
		width:390px;
		margin:0 auto;
		padding:0;
	}
  .main {
		width:100%;
		scale:90%;
  }
	.top {
		margin-bottom:6px;
	}
	.mid {
  	height:225px;
		margin-bottom:-32px;
	}
	.box {
  	height:175px;
  	font-size:11px;
		line-height:18px;
	}
  .silly img {
    width:85%;
    height:auto;
  }
	.record {
  	height:161px;
	}
	.bottom {
  	height:225px;
		margin-bottom:-32px;
	}
	.header {
		font-size:15px;
	}
	.footer {
		font-size:15px;
		padding-bottom:1px;
	}
	.yukika2 {
  	height:175px;
	}
}