body {
	background-image: url(https://cowgrls.neocities.org/images/backgrounds/bgcanvas3.jpg);
	text-align: center;
	background-attachment: fixed;
	font-family: "Bellefair", serif;
	overflow: hidden;
	color: #231600;
}

.backbtn {
	margin: 1% auto auto 1%;
	z-index: 999;
	position: absolute;
	max-height: 80px;
 }

.floaters {
	position: absolute;
	z-index: 10;
	max-height: 10vh;
}

.title {
}

.title img {
	width: 100%;
}

.main {
	display: flex;
	flex-flow: row nowrap;
	width: 100vw;
	height: 100vh;
	margin: 1rem auto 1rem 0;
}

 .sidebar {
 	width: 23vw;
 	height: 95vh;
 	margin: auto auto auto 5vw;
 	background-image: url(https://i.imgur.com/hnLgkh0.png);
 	background-repeat: no-repeat;
 	background-size: contain;
 	
 }

.sidebarcanvas {
	border: inset 3px #7f6363;
 	border-radius: 5px;
 	padding: 1rem;
 	background-color: #eaeace;
 	position: absolute;
 	width: 18vw;
 	left: 4.5vw;
	bottom: 49vh;

 }

 .sidebar ul {
 	list-style-type: none;
 	padding: 0;
 }

 .entries {
 	width: 48vw;
 	height: 98vh;
 	display: flex;
 	flex-flow: column nowrap;
 	overflow-y: scroll;
 	margin: auto;
 	padding-bottom: 3vh;
 	scrollbar-width: thin;
 	scrollbar-color: transparent transparent;
 }

 .entry {
 	width: 90%;
 	background-color: #eaeace;
 	border: inset 5px #7f6363;
 	border-radius: 5px;
 	margin: 1rem;
 	padding: 1rem;
 	box-shadow: .5rem .5rem rosybrown;

 }

 .entry h2 {
   font-family: "Dr Sugiyama", cursive;
   text-align: left;
   color: midnightblue;
   padding: .5rem;
   font-size: 2rem;
 }

 .entryflex {
 	width: 95%;
 	display: flex;
 	flex-flow: row nowrap;
 	height: 90vh;
 	padding: 2rem;
 	gap: 1rem;
 }

 .entry img {
	max-width: 80%;
	border: outset 5px #7f6363;
}

.entrytext {
	margin: auto;
}

.palettebox {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-end;
	margin: auto 2vw 5vh auto;
	height: 60vh;

}

.palette {
	background-image: url(https://i.imgur.com/34LxtlC.png);
 	background-repeat: no-repeat;
 	background-size: contain;
 	height: 50vh;
 	width: 20vw;
 	margin: auto;
}

.colorsbox {
	height: 41vh;
	width: 14vw;
	margin: auto auto 8vh 1vw;

	display: flex;
	flex-flow: row nowrap;
	gap: .9rem 1rem;
	justify-content: flex-end;
}

.colorstrip {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-end;
	gap: .5rem;
}

.color {
	height: 45px;
	width: 45px;
	border-radius: 180px;

}

[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
	 content: attr(data-title);
	 visibility: hidden;
	 width: 10vw;
	 background-color: black;
	 color: #fff;
	 text-align: center;
	 padding: 1rem;
	 margin: auto .5rem auto auto;
	 border-radius: 6px;
	 position: absolute;
	 z-index: 8;
	 top: -5px;
	 right: 105%;
	 white-space: pre-line;
}
[data-title] {
    position: relative;
}

.brush {
	width: 20vw;
	height: 100%;
	background-image: url(https://i.imgur.com/JCPfUF0.png);
	background-repeat: no-repeat;
	background-size: contain;
}