@font-face { font-family: MochiyPop; src: url(https://files.catbox.moe/u54pww.ttf);	}
	
	::selection {
	color: black;
	background: rgba(196, 155, 170, 0.5);
	}
	
	body {
	background-image: url(https://files.catbox.moe/o8ym5h.png), url(https://files.catbox.moe/3sj9jt.jpg);
	background-size: 10% auto, 50%;
	background-repeat: no-repeat, repeat;
	background-position: 96% 8%, 25% center;
	font-family: ms gothic, monospace;
	font-size: 105%;
	color:  #3e3f41 ;
	padding: 15px;
	cursor: url('cursor.webp'), auto;
	}
	
	.parent {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	}
	
	.container {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  background-color: transparent;
  width: 1000px;
  transform: translateX(-50%);
  margin: 0 auto;
  display: grid;
  grid-template-rows: 1fr 5fr 0.5fr;
  grid-template-columns: 1fr 3fr 1fr;
  grid-gap: 10px;
  grid-template-areas :
  'header header header'
  'leftside main rightside'
  'footer footer footer';
  border-radius: 10px;
  border: 30px solid #e0b8b8;
  border-image: url(img/lace_1.png) 60 round;
}

.layer {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 1000px;
  transform: translateX(-50%);
  height: 1399.4px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: repeat(10, 1fr);
  grid-template-columns: repeat(7, 1fr);
  pointer-events: none
}

.item1 {
  background-image: url(https://files.catbox.moe/iprswz.png), url(https://files.catbox.moe/2szqkm.jpg), url(https://files.catbox.moe/gbnyzl.png), url(https://files.catbox.moe/d6ulq0.jpg), url(https://files.catbox.moe/2ubtuj.png);
  background-size: 10% auto, 100% auto, contain, 100% auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: calc(100% + 10px) calc(100% + 15px), center calc(100% + 40px), 25% center, 0 -40px, top left;
  grid-row: 1 / 2;
  grid-column: 1 / 4;
  grid-area: header;
  padding: 0;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  height: 200px;
}

#header {
  height: 70px;
  padding-left: 10px;
  background-image: url();
}

#header a {
	text-decoration: none;
	color: #bcd8ff;
	text-align: right;
}

#header a:hover {
  font-style: italic;
}

#menu {
  text-align: right;
  height: 50px;
  color: white;
  padding-right: 10px;
}

#menu_text {
  background: linear-gradient(to right, transparent, transparent, rgba(225, 162, 163, 0.5));
  border-radius: 1px;
  padding-right: 5px;
 }

#menu a {
  text-decoration: none;
  color: white;
}

#menu a:hover {
  text-decoration: underline;
}

.leftside {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  grid-area: leftside;
  padding: 15px;
  width: 150px;
  background-image: url(https://files.catbox.moe/2jggo5.jpg);
  background-repeat: repeat;
  background-size: 100% auto;
  border-radius: 5px 5px 0 0;
}

.main {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  grid-area: main;
  padding: 15px;
  overflow-y: auto;
  width: 585px;
  background-image: url(https://files.catbox.moe/quuipk.jpg);
  background-size: 20% auto;
  repeat: repeat;
  border-radius: 5px 5px 0 0;
}

#background {
  background-image: url(https://files.catbox.moe/z9xakc.jpg);
  background-size: 50% auto;
  background-repeat: repeat;
  width: 580px;
  margin: 0 auto;
  border: 5px groove #ffd4d4;
  border-radius: 10px;
}

#navig {
	background-image: url(https://files.catbox.moe/2lt8xm.png), url(https://files.catbox.moe/442drg.jpg);
	background-size: 110px, 105% auto;
	background-repeat: no-repeat, repeat;
	background-position: 63% -3%, center;
	width: 155px;
	margin: 0 auto;
	padding: 2px;
	padding-top: 7px;
}

#navig a {
text-decoration: none;
color: #5b87d4;
}

#navig a:hover {
text-decoration: underline;
}

#nav_button {
	display: flex;
	background-color: white;
	width: 80%;
	height: 20px;
	margin: 0 auto;
	margin-bottom: 10px;
	padding: 10px;
	text-align: left;
	border-radius: 3px;
	border: 1.9px pink dashed;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

#nav_title {
	width: 90%;
	margin: 0 auto;
	font-family: MochiyPop, serif;
	font-weight: 400;
	font-style: normal;
	color: pink;
	-webkit-text-stroke: 1px #71756f;
	backdrop-filter: blur(1px);
}

#nav_top {
	width: 90%;
	margin: 0 auto;
	font-family: MochiyPop, serif;
	font-weight: 400;
	font-style: normal;
	color: pink;
	-webkit-text-stroke: 1px #71756f;
}

#background2 {
  background-image: linear-gradient(to right, #DFCDCD, #eda6dd);
  background-repeat: repeat;
  width: 580px;
  margin: 0 auto;
  margin-top: 15px;
  border: 5px groove #ffd4d4;
  border-radius: 10px;
}

#intro {
  height: 300px;
  padding: 15px;
  background-color: #f2e6e6;
  margin: 15px;
  border: 2px dotted #e1a2a3;
  border-radius: 10px;
  text-align: center;
  text-indent: 20px;
  line-height: 1.2;
}

#log {
  max-height: 100px;
  padding: 15px;
  background-image: url(https://files.catbox.moe/zbec4d.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 25% 40%;
  margin: 15px;
  border: 2px dotted #e1a2a3;
  border-radius: 10px;
  text-align: center;
  line-height: 1.2;
}

#log_text {
backdrop-filter: blur(5px);
filter: contrast(110%);
margin: auto;
margin-bottom: 20px;
padding: 2px;
text-align: left;
height: fit-content;
}

.rightside {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
  grid-area: rightside;
  padding: 5px;
  width: 170px;
  background-image: url(https://files.catbox.moe/zndun2.jpg);
  background-size: contain;
  border-radius: 5px 5px 0 0;
  }

.item5 {
  background-color: #eeece1 ;
  grid-row: 3 / 4;
  grid-column: 1 / 4;
  grid-area: footer;
  padding: 15px;
  border-radius: 0 0 10px 10px;
  text-align: center;
}

.scroll {
	overflow-y: auto;
}

.item1, .leftside, .main, .rightside, .item5 {
  box-shadow: 0 15px 20px -6px rgba(173, 120, 120, 0.7);
}

#childe_cropped {
width: 100%;
 height: auto;
 display: block; 
 border-radius: 10px 10px 0 0;
 object-fit: cover;
}

#side_image {
	background-image: url(https://files.catbox.moe/8cwrp5.jpg);
	background-size: cover;
	background-position: 5% center;
	border: 2px solid pink;
	height: 150px;
	width: 100%;
	margin: auto;
}

#side_intro {
	height: 200px;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 5px;
	background-color: white;
	text-align: center;
	border-radius: 10px;
	border: 2.5px dotted #b3cbff;
	background-image: url(https://files.catbox.moe/bcnffz.jpg);
	background-size: cover;
	repeat: no-repeat;
	background-position: 0% 0%;
}

#musicplayer {
  height: 340px;
  overflow-y: auto;
  margin: auto;
  padding: 5px;
  text-align: center;
  background-color: white;
  border-radius: 10px;
  border: 2px dashed pink;
}

#artist {
  font-style: italic;
  font-size: 100%;
}

#middle3 {
	height: 300px;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 5px;
	background-color: white;
	text-align: center;
	background-image: url(https://files.catbox.moe/5vcy1x.jpg);
	background-size: cover;
	repeat: repeat;
	background-position: 0% 0%;
	border: 10px solid #e0b8b8;
	border-radius: 20px;
	border-image:url(https://files.catbox.moe/hsehqc.png) 110 round;
}

#pc_holder {
  grid-row: 8 / 10;
  grid-column: 1 / 2;
  position: relative;
  top: 5px;
  left: -55px;
 }

#pc_inside {
	position: absolute;
	top: 80px;
	left: 80px;
	width: 120px;
	z-index: 1;
}


#pc_button {
	grid-row: 10 / 11;
    grid-column: 1 / 2;
	position: relative;
	bottom: 23px;
	left: 10px;
	width: 200px;
	z-index: 3;
	pointer-events: auto;
	cursor: pointer;
}