:root{
	--shadow-color: 0deg 7% 56%;

	--grey: hsl(0, 6%, 46%);
	--green: #B3C39E;

   --scrollbar-thumb: var(--green-texture);
   --scrollbar-button: url("/assets/pixel/nature/12.gif");

   --back-arrow: url("/assets/pixel/navi/biscuit_back.gif");
   --home: url("./assets/kitty.gif");
   --next-arrow: url("/assets/pixel/navi/biscuit_next.gif");
}

body{
	background-image: url("/background/49.gif");
		background-size: 5svw auto;
		background-repeat: repeat;
		background-position: center;
		background-color: var(--brown-bg);
	display: grid;
		grid-template-areas: 'side header' 'side main' '. footer';
		gap: var(--gap);
		justify-content: space-evenly;
	padding: 0 calc(3svw + 1em);
}

#hidari{
   --hidari-width: 2.75svw;
   background-image: url("/background/m09.png");
}

#migi{
   --migi-width: 2.75svw;
   background-image: url("/background/m09_b.png");
}

h1, h2, h3{
	text-shadow: var(--text-shadow-white);
}

article, #icon{
	border-radius: var(--border-radius-level-1);
}

a{
	color: var(--red);
}

a:hover,
a:focus{
	color: var(--black);
}

/*...........................

		shadows

..........................*/

header, body > section, h2{
	filter: var(--drop-shadow-medium);
}

#icon{
	box-shadow: var(--shadow-elevation-low);
}

footer, article >*, h3, #hidari, #migi{
	filter: var(--drop-shadow-low);
}

/*...........................

	header

..........................*/

header{
	grid-area: header;
}

h1{
	margin-top: var(--half-gap);
	font-size: 3em;
	text-align: center;
}

/*...........................

		sidebar

..........................*/

body > section{
	grid-area: side;
	width: calc(20svw * 0.66);
	align-self: start;
	position: sticky;
		top: var(--double-gap);
}

#icon{
	width: 100%;
	border: var(--border-level-3);
	border-color: var(--grey);
}

/*...........................

	navigate thru months

..........................*/

nav{
   display: flex;
      align-items: center;
      justify-content: center;
      gap: 0 var(--gap);
	margin: var(--gap) auto;
}

a#past{
   content: var(--back-arrow);
}

a#return{
   content: var(--home);
}

a#future{
   content: var(--next-arrow);
}

/*...........................

	main entries sigh

..........................*/

main{
	grid-area: main;
}

h2{
	margin-top: 0.25em;
	font-size: 1.9em;
}

h3{
	text-align: right;
   color: var(--grey);
}

ol, details{
   width: 66ch;
}

li:not(:last-of-type){
   margin-bottom: 0.66em;
}

p{
   margin: 1em 0;
}

table{
   width: 66ch; border-spacing: var(--gap) var(--half-gap); margin: 1em auto;
}

th{
   width: 50%;
}

article{
	width: calc(100% - var(--double-gap) * 2);
	padding: var(--gap) var(--double-gap);
	margin: var(--double-gap) auto;
	background-color: hsla(0, 0%, 100%, 0.35);
	backdrop-filter: blur(0.075svw);
}

article > *:last-child{
	margin-bottom: 0.75em;
}

article:first-child{
	margin-top: 0;
}

footer{
	grid-area: footer;
}

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
:root {
   --Circle-Size:3svw;
   --Progress-Border-Size:0.2svw;
   --Progress-Empty:#E9DFDF;
   --Progress-Fill:var(--grey);
   --Player-Background:var(--white2);
   --Play-Pause-Buttons-Size:0.7em;
   --Play-Pause-Buttons-Color:var(--black);
   --Player-Text-Margin:0.75em;

   --Song-Name-Font-Size:0.7em;
   --Song-Name-Color:var(--black);

   --Artist-Name-Font-Size:0.66em;
   --Artist-Name-Color:var(--black);
}

#glenplayer07 {
	width: max-content;
	position: relative;
   z-index:99999;
	margin-left: calc(-1* var(--half-gap));
}

.flamingo {
   display:flex;
   align-items:center;
}

.circleofdeath {
   width:var(--Circle-Size);
   height:var(--Circle-Size);
   border-radius:100%;
   overflow:hidden;
}

.tinfoil {
   width:var(--Circle-Size);
   height:var(--Circle-Size);
   background:var(--Progress-Empty);
   border-radius:100%;
}

.oven {
   background:var(--Progress-Fill);
}

.oliveoil {
   width:100%;
   height:100%;
}

.crust {
   position:absolute;
   top:0;
   display:flex;
   align-items:flex-end;
   justify-content:center;
   width:var(--Circle-Size);
   height:var(--Circle-Size);
}

.cherry {
   display:flex;
   align-items:center;
   justify-content:center;
   width:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
   height:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
   background:var(--Player-Background);
   border-radius:100%;
   cursor:pointer;
   z-index:1;
}

.music-controls {display:flex;align-items:center}

.music-controls .material-icons {
   font-size:var(--Play-Pause-Buttons-Size);
   color:var(--Play-Pause-Buttons-Color);
}

.pausee {display:none;}

.beff {display:none;}
.aff {display:block;}

.music-info {
   margin-left:var(--Player-Text-Margin);
   line-height:1em;
}

.song-name {
	font-weight: bold;
   font-size:var(--Song-Name-Font-Size);
   letter-spacing:1.5px;
   color:var(--Song-Name-Color);
}

.artist-name {
   margin-top:3px;
   font-size:var(--Artist-Name-Font-Size);
   letter-spacing:0.3px;
   color:var(--Artist-Name-Color);
}