body {
	background-image: url(https://cowgrls.neocities.org/images/backgrounds/5013.png);
	background-attachment: fixed;
	overflow: none;
	font-family: "Shippori Antique B1", sans-serif;
	text-align: justify;
}

@font-face {
    font-family: 'pastelcrayon';
    src: url('https://cowgrls.neocities.org/fonts/pastelcrayon/pastel_crayon-webfont.woff2') format('woff2'),
         url('https://cowgrls.neocities.org/fonts/pastelcrayon/pastel_crayon-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'egyptienne';
    src: url('https://cowgrls.neocities.org/fonts/egyptienne/egyptiennew01-boldcondensed-webfont.woff2') format('woff2'),
         url('https://cowgrls.neocities.org/fonts/egyptienne/egyptiennew01-boldcondensed-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.backbtn {
	margin: 0 auto auto 0;
	z-index: 999;
	position: fixed;
	
 }
.backbtn img {
	max-height: 50px;
}

 .dirt {
 	width: 100vw;
 	height: 100%;
 	margin: auto;
 	position: fixed;
 	bottom: -70vh;
 	left: 0px;
 	background-image: url(https://cowgrls.neocities.org/images/pngs/dirtpile.png);
 	background-repeat: no-repeat;
 	z-index: 2;
 }

 .content {
 	width: 1300px;
 	height: 900px;
 	margin: auto auto auto 18vw;
 	overflow: none;
 	display: flex;
 	flex-flow: row nowrap;
 	align-content: flex-start;
 	align-items: flex-start;
 	

 }

 .sidebar {
 	width: 350px;
 	height: 600px;
 	border: double 5px seagreen;
 	background-color: honeydew;
 	margin: 3vh auto;
 	position: fixed;

 }

 .sidebar img {
 	max-width: 70%;
 	margin: 4% 15% auto 15%;
 }

 .infobox {
 	height: 20%;
 }

 .infobox p {
 	padding: 0;
 	font-weight: bold;
 	text-align: center;

 }

 .entries {
 	width:800px;
 	height: auto;
 	margin: 3vh auto auto 22vw;
 	overflow-y: scroll;
 	overflow-x: none;
 	scrollbar-color: seagreen transparent;
 	scrollbar-width: thin;
 	gap: 2rem;
 	

 }

 .entry {
 	width: 90%;
 	height: auto;
 	border: double 5px seagreen;
 	background-color: honeydew;
 	margin-bottom: 2rem;
 }

 p {
 	color: darkslategray;
 	padding: 1rem;
 	margin: auto;
 	font-size: .9rem;
 }

 h2 { 
 	padding: 0 1rem 0 1rem;
 	font-family: "egyptienne";
 	text-transform: uppercase;
 	font-size: 3rem;
 	margin: 1rem;
 	color: seagreen;
  }

 .entry a {
 	text-decoration: none;
 	color: seagreen;
 	font-weight: bold;
 }

 .entry a:hover {
 	color: lightgreen;
 }
 .entry img {
 	margin: auto 33% auto 33%;
 	padding: 0;
 }

 .picblock {
 	width: 95%;
 	height: auto;
 	margin: 1rem;
 	display: flex;
 	flex-flow: row wrap;
 	gap: 1rem;
 	justify-content: center;


 }

 .picblock img {
 	max-height: 260px;
 	width: auto;
 	border: outset 3px seagreen;
 	margin: auto;
 }

 .dirtbumper {
 	height: 25vh;
 }

 /* The Modal (background) */
 .modal {
   display: none;
   position: fixed;
   z-index: 5;
   padding-top: 100px;
   left: 30vw;
   top: 1rem;
   width: 40vw;
   height: 85%;
   overflow: none;
   background-color: honeydew;
   border: solid seagreen 5px;
 }

 /* Modal Content */
 .modal-content {
   position: relative;
   margin: auto;
   padding: 0;
   width: 90%;
   max-width: 100vw;
   height: 100vh;
 }

 /* The Close Button */
 .close {
   color: red;
   position: absolute;
   top: 5px;
   right: 25px;
   font-size: 50px;
   font-weight: bold;
   text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
 }

 .close:hover,
 .close:focus {
   color: saddlebrown;
   text-decoration: none;
   cursor: pointer;
 }

 /* Hide the slides by default */
 .mySlides {
   display: none;

 }

 .mySlides img {
 	max-height: 800px;
 	max-width: auto;
 	margin: -5vh auto auto 2.2vw;
 	border: outset seagreen;
 }


 img.demo {
   opacity: 0.6;
 }

 .active,
 .demo:hover {
   opacity: 1;
 }

 img.hover-shadow {
   transition: 0.3s;
 }

 .hover-shadow:hover {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }

 .musicbox {
 	height: 50px;
 	width: 50px;
 	position: fixed;
 	left: 510px;
 	top: 71vh;
 	z-index: 100;
 	
 }

 .decor {
 	z-index: 2;
 	width: 100%;
 	height: 100%;
 	position: fixed;
 }



/****************************************/
/*                                      */
/*        Section 2: Core Values        */
/*                                      */
/****************************************/





/********** Essential Audio Player CSS – Circle **********/



/****************************************/
/*                                      */
/*         Section 1: The Looks         */
/*                                      */
/****************************************/


/* 1. The Main Container */
div.essential_audio.circle {
	border-radius: 2px;
	overflow: hidden;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: chocolate;
	border: 3px solid seagreen;
	z-index: 100;
}


/* 2. The Player Button */
div.essential_audio.circle > div:nth-child(1) div {
	width: 50px;
	height: 50px;
	border-radius: 0px!important;
	background-color: transparent!important;
	cursor: pointer;
	z-index: 100;
}
div.essential_audio.circle > div:nth-child(1) div:after {
	top: 16%;
	left: 16%;
	width: 68%;
	height: 68%;
	z-index: 100;
}
/* Set here how much the button exceeds the horizontal track limits. */
/* This must not be deleted! (but can be changed, of course) */
:root {
	--button-protrusion-circle: 0px;
	z-index: 100;
}

/* 2.a) The Player Button – Off */
div.essential_audio.circle > div:nth-child(1) div.off {
	background-color: transparent!important;
	z-index: 100;
}
div.essential_audio.circle > div:nth-child(1) div.off:after {
	content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='%23FFF' d='M12.6,24.5c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4L20,15l-8.1-7.8c-0.4-0.4-0.4-1,0-1.4c0.4-0.4,1-0.4,1.4,0l8.8,8.5c0.2,0.2,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7l-8.8,8.5C13.1,24.4,12.8,24.5,12.6,24.5z'/></svg>");
	z-index: 100;
}

/* 2.b) The Player Button – Loading */
div.essential_audio.circle > div:nth-child(1) div.load {
	background-color: transparent!important;
	z-index: 100;
}
div.essential_audio.circle > div:nth-child(1) div.load:after {
	content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><circle fill='%23FFF' opacity='0.64' cx='7.2' cy='18.2' r='1.5'/><circle fill='%23FFF' opacity='0.76' cx='7.2' cy='11.8' r='1.5'/><circle fill='%23FFF' opacity='0.88' cx='11.8' cy='7.2' r='1.5'/><circle fill='%23FFF' cx='18.2' cy='7.2' r='1.5'/><circle fill='%23FFF' opacity='0.16' cx='22.8' cy='11.8' r='1.5'/><circle fill='%23FFF' opacity='0.28' cx='22.8' cy='18.2' r='1.5'/><circle fill='%23FFF' opacity='0.4' cx='18.2' cy='22.8' r='1.5'/><circle fill='%23FFF' opacity='0.52' cx='11.8' cy='22.8' r='1.5'/></svg>");
	z-index: 100;
}

/* 2.c) The Player Button – Playing */
div.essential_audio.circle > div:nth-child(1) div.play {
	background-color: transparent!important;
	z-index: 100;
}
div.essential_audio.circle > div:nth-child(1) div.play:after {
	content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='%23FFF' d='M11,23c-0.6,0-1-0.4-1-1V8c0-0.6,0.4-1,1-1s1,0.4,1,1v14C12,22.6,11.6,23,11,23z'/><path fill='%23FFF' d='M19,23c-0.6,0-1-0.4-1-1V8c0-0.6,0.4-1,1-1s1,0.4,1,1v14C20,22.6,19.6,23,19,23z'/></svg>");
	z-index: 100;
}

/* 2.d) The Player Button – Dragging */
div.essential_audio.circle > div:nth-child(1) div.drag {
	background-color: transparent!important;
	transition: left 0s!important;
	/*
	cursor: grab!important;
	*/
	z-index: 100;
}

/* 2.e) The Player Button – Error */
div.essential_audio.circle > div:nth-child(1) div.error {
	/*
	background-color: transparent!important;
	*/
	background-color: rgba(0,0,0,0.25)!important;
	z-index: 100;
}
div.essential_audio.circle > div:nth-child(1) div.error:after {
	content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='%23FFF' d='M13.9,18.6c0-0.3,0-0.5,0-0.9c0-1.6,0.6-2.9,2.1-3.9l1.1-0.8c0.9-0.6,1.3-1.5,1.3-2.4c0-1.5-1-2.8-3-2.8c-2.2,0-3.1,1.6-3.1,3.2c0,0.2,0,0.4,0,0.5L10,11.9c-0.1-0.3-0.1-0.8-0.1-1.2c0-2.3,1.7-5.1,5.5-5.1c3.5,0,5.5,2.5,5.5,5c0,2-1.1,3.4-2.5,4.3l-1.2,0.8c-0.8,0.5-1.1,1.4-1.1,2.4c0,0.1,0,0.2,0,0.5H13.9z'/><path fill='%23FFF' d='M15,20.8c1,0,1.8,0.8,1.8,1.8S16,24.4,15,24.4c-1,0-1.8-0.8-1.8-1.8S14,20.8,15,20.8z'/></svg>");
	z-index: 100;
}


/* 3. The Track */
div.essential_audio.circle > div:nth-child(2) {
	width: 100%;
	height: 100%;
	left: 0px;
	transform: rotate(-90deg);
	z-index: 100;
}
div.essential_audio.circle > div:nth-child(2):after {
	content: "";
	position: absolute;
	z-index: 0;
	opacity: 1;
	background-color: #E5695B;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 100;
}


/* 4. The Loading Progress Bar */
div.essential_audio.circle > div:nth-child(2) div {
	width: 0%;
	background-color: #000;
	opacity: 0.1;
	mix-blend-mode: multiply;
	z-index: 100;
}


/* 5. The Klick & Drag Sensor */
div.essential_audio.circle > div:nth-child(3) {
	height: 100%;
	margin-top: 0px!important;
	z-index: 100;
}





/****************************************/
/*                                      */
/*        Section 2: Core Values        */
/*                                      */
/****************************************/


/* 2.a) Container for Player Button */
div.essential_audio.circle > div:nth-child(1) {
	left: calc(var(--button-protrusion-circle) * -1);
	width: calc(100% + (2 * var(--button-protrusion-circle)));
	z-index: 100;
}