/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* i dont knowww scratches head */

body {
	font-family: ms gothic;
	background: url('https://64.media.tumblr.com/517b61d902de6c34b0fab7fa8766e413/54dbdd530a69c1c9-d1/s75x75_c1/83a4b235e92058ebab37fdd87268f90e229664c8.pnj');
	cursor: url("https://pixels.crd.co/assets/images/gallery52/ddd4c3d6.gif?v=29416114"), auto;
}

::selection {
	background-color: #ff9bc8;
	color: #ffffff;
	text-shadow: none;
}
  
::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}
  
::-webkit-scrollbar-track {
	background: #ffd5ee;
}
  
::-webkit-scrollbar-thumb {
	background: #ffffff;
	border: 1px solid #ffd5ee;
}

.the-page {
  width: 800px;
  max-height: 1200px;
  margin: auto;
  overflow: hidden;
  background-color: white;
}

.header {
  width: 800px;
  height: 275px;
  background-position: 60% 83%;
  border-bottom: 1px solid white;
  border-radius: 0px 0px 0px 0px;
  border-right: 1px solid #6e45ff;
  background-size: cover;
  background-image: url("https://i.pinimg.com/736x/dd/ed/fb/ddedfbad4fcd4b3654a15fe1171444f7.jpg");
}

.88-31 {
  height: 33px;
  border-bottom: 1px solid hotpink;
  background: white;
  width: 800px;
}

#ghost {
	position: fixed;
	top: 1px;
	left:310px;
}

.container {
	width: 800px;
	height: fit-content;
	margin: auto;
	padding-top: auto;
}

.flex {
	display: flex;
	height: fit-content;
	outline: 1px solid hotpink;
	background: white;
	width: 800px;
}

.left, .right {
	background: white;
	background-image: url('');
	background-position: center;
	background-size: 15px;
	width: 200px;
}

.pfp {
	width: 190px;
	height: 190px;
	background-size: cover;
	background-image: url('https://i.pinimg.com/736x/6f/cc/a0/6fcca0e58e2d5ddcdfa65174536413e4.jpg');
	image-rendering: pixelated;
	margin: 4px;
	border: 1px solid #ffb0d8;
	display: flex;
	align-items: end;
}

.nameplate {
	background: white;
	height: 30px;
	width: 190px;
	margin: 0 4px;
	border: 1px solid #ffa3ce;
	line-height: 30px;
	text-align: center;
	font-weight: bold;
	color: #ffb0d8;
	border-radius: 5px;
}

.left .divider, .right .divider {
	width: 200px;
	margin: 4px 0;
}

.links-header {
	background: white;
	border: solid thin  #ffb0d8;
	border-radius: 5px 5px 0 0;
	font-size: 16px;
	line-height: 34px;
	text-align: center;
	color: hotpink;
	height: 30px;
	width: 190px;
	margin: 0 4px;
}

.left ul {
	list-style: none;
	margin: 0 4px;
	padding: 0;
}

.left li {
	background: white;
	border: solid thin  #ffb0d8;
	border-top: none;
	font-size: 16px;
	line-height: 34px;
	text-align: left;
	color: hotpink;
	height: 30px;
	width: 184px;
	padding-left: 6px;
}

.left li a {
	text-decoration: none;
	color: unset;
}

.left li:nth-last-child(1) {
	border-bottom: none;
}

.links-end {
	background: white;
	height: 10px;
	width: 190px;
	margin: 0 4px 4px;
	border: solid thin  #ffb0d8;
	border-radius: 0 0 5px 5px;
}

.left, .content, .content2, .right {
	height: 660px;
}

.content {
	background: white;
	width: 398px;
	border-left: 1px solid hotpink;
	border-right: 1px solid hotpink;
	overflow: auto;
}

.content .divider {
	width: 380px;
	margin: 7px auto;
	display: block;
}

.home-box {
	height: 30px;
	width: 120px;
	background: linear-gradient(to top, #ffe0f0, #ffc3df);
	text-shadow: -1px -1px 0 #ff8da9, 1px -1px 0 #ff8da9, -1px 1px 0 #ff8da9, 1px 1px 0 #ff8da9;
	color: white;
	line-height: 34px;
	text-align: center;
	font-weight: bold;
	margin: 4px 0 0 20px;
}

.home-divider {
	height: 6px;
	width: 380px;
	background: linear-gradient(to right, white 0px, #ffe0f0 10px, #ffe0f0, #ffc3df, white);
	margin: auto;
}

.intro {
height: 128px;
width: 100%; 
background-color: #fcfbe6;
vertical-align: middle;
overflow: auto;
padding: 2px;
margin-bottom: 8px;
}

.status-flex {
	display: flex;
	justify-content: space-evenly;
	margin-bottom: 10px;
}

.status-flex img {
	width: 90px;
	height: 90px;
}

#statuscafe {
  background-image: url('https://files.catbox.moe/him11k.png'), linear-gradient(#f1f7ff, white, white);
  background-size: 14px;
  border: 1px solid #bbd9f1;
  width: 260px;
  padding: .5em .5em 0 .5em;
  border-radius: 3px;
  height: 80px;
  color: #494949;
}

#statuscafe-username a {
  text-decoration: none;
  color: unset;
}

#statuscafe-username a:after {
  content: "🍀";
}

#statuscafe-username {
  margin: -4px 0 .5em;
}

#statuscafe-content {
    overflow: auto;
    overflow-x: hidden;
    height: 90px;
    width: 240px;
}

#random {
	text-align: center;
}

.otd {
	border: 2px solid var(--whatever);
	border-radius: 5px;
	display: flex;
	justify-self: center;
	margin: auto;
	border: 1px solid hotpink;
	object-fit: cover
	height: 250px;
	width: 380px;
}

.to-do {
	border:1px solid #BDC19E;
	margin-top:0px;
	margin-left: 4px;
	margin-right: 4px;
	padding:3px;
	border:1px solid #CC9A81;
	border-radius:3px;
	background-color:#fcfbe6;
}

.float {
	position: fixed;
	left: 1055px;
	top: 500px;
	z-index : 100px;
	object-fit: cover
	width: 190px;
	height: 250px;
}