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

		variables

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

:root{
   --size: 33svw;
	--shadow-color: 240deg 15% 58%;
	--text-shadow-color: 240deg 15% 58%;
   --white: #FDFBFC;
   --black: hsl(228, 98%, 18%);
   --yellow: hsl(51, 100%, 82%);
   --blue: hsl(221, 73%, 89%);
   --red: #E67C67;

	--literal-text-shadow: 
		0.3px 0.5px 0.7px hsl(var(--text-shadow-color) / 0.3),
		0.4px 0.8px 1px hsl(var(--text-shadow-color) / 0.3);

   --scrollbar-button: url("/assets/pixel/tech/10.gif");
}

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

		basic styling

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

body{
   background: var(--white2-texture);
}

p{
   margin: 1em 0;
}

main, footer{
   width: calc(100% - var(--size));
   box-sizing: border-box;
}

main{
   padding-left: 3em;
   padding-right: 1.5em;
}

body > section{
   position: fixed;
      right: var(--gap);
      bottom: 0;
   width: var(--size);
   height: 100svh;
   display: flex;
      flex-flow: column;
      justify-content: flex-start;
      align-items: center;
   text-align: center;
}

body > section >*{
   position: relative;
}

main > div{
   display: block;
   min-height: 30svh;
   max-width: 90%;
}

iframe{
   width: 16svw;
   height: 9svw;
   float: right;
}

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

		vector side image

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

#vector{
   width: 100%;
   max-height: 65svh;
}

#counter{
   position: fixed;
   bottom: calc(var(--gap) * 0.66);
   right: calc(var(--gap) * 0.66);
   background-color: var(--blue);
   padding: 0.5em;
   /* line-height: 1.5; */
}

#counter > div{
   background: var(--white);
   padding: 0 0.5em;
   padding-top: calc(0.25em + 0.5ch);
   width: 4.75ch;
   text-align: center;
}

#counter > div > span:first-child{
   border: 0.1em dotted var(--red);
   padding: 0 0.2em;
   height: 1.75em;
   display: block;
}

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

		   links

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

a{
   text-decoration: none;
   color: var(--black);
}

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

p a{
   display: inline-block;
   padding: 0 0.25em;
   padding-top: 0.25em;
}

p a:hover{
   transform: translateY(-0.15em);
}

p:nth-child(even) a{
   background-color: var(--blue);
}

p:nth-child(odd) a{
   background-color: var(--yellow);
}

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

		   shadows

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

h1{
   filter: var(--drop-text-shadow);
}

h2, table, #musicplayer table, #counter{
   box-shadow: var(--shadow-elevation-low);
   filter: var(--drop-text-shadow);
}

audio, img, footer a, #musicplayer marquee, #musicplayer .controls, #musicplayer .seeking{
   filter: var(--drop-text-shadow);
}

p, footer, th, td, li, #counter > div{
   text-shadow: var(--literal-text-shadow);
}

p img{
   max-width: 80%;
}

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

		borders

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

table, th, td, h2, #counter, #counter div{
   border: var(--border-level-3);
}

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

		headings

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

h1{
   width: 21ch;
   height: 1.75em;
   margin-top: 0.25em;
   margin-bottom: 0;
}

h1::before{
   content: "┸";
   font-weight: normal;
   display: inline-block;
   transform: translate(-0.25em, 0);
}

h2{
   display: inline-block;
   text-shadow: var(--text-shadow-white);
   margin-top: 0.3em;
   margin-bottom: 0;
   padding: 0.25em 0.5em 0 0.66em;
}

h2 > span{
   filter: var(--drop-text-shadow);
}

div:nth-child(odd) h2{
   background-color: var(--blue);
}

div:nth-child(even) h2{
   background-color: var(--yellow);
}

h2 + p{
   margin-top: 0.5em;
}

h2::after{
   font-size: 0.8em;
   content: "\2002\2605";
   font-weight: normal;
   display: inline-block;
   transform: translateY(-0.1em);
}

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

		audio player

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

h1 + audio{
   display: block;
}

audio::-webkit-media-controls-panel{
   background-color: var(--yellow);
}

audio::-webkit-media-controls-play-button{
   border-radius: 100%;
   background-color: var(--white2);
   max-height: 80%;
}

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

		tables

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

table{
   float: left;
   text-align: left;
   padding: 0.4em;
   margin-right: 1em;
   margin-top: 0.5em;
}

main div:nth-child(odd) table{
   background-color: var(--yellow);
}

main div:nth-child(even) table{
   background-color: var(--blue);
}

th, td{
   background: var(--white2);
   text-shadow: var(--literal-text-shadow);
}

th{
   padding: 0.2em 0.8em 0 0.36em;
}

td{
   padding: 0.2em;
   padding-bottom: 0;
   padding-right: 0.25em;
}

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

		footer

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

footer{
   margin: 2em 0 1em 0;
   line-height: 1.8;
}

footer a{
   display: inline-block;
   background-color: var(--yellow);
   padding: 0 1em;
   padding-top: 0.25em;
}

footer a:hover{
   transform: translateY(-0.33em);
}

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

		music player!!!!!!!

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

#musicplayer{
   background:var(--white2-texture); /* background color of player */
   /* width:200px; width of the player */
}

#musicplayer table{
   background-color: var(--blue);
}

.songtitle{
   padding: 0.1em; /* padding around song title */
   display:block;
}

.controls{
   font-size:0.8em!important; /* size of controls */
   text-align:center;
   width:100%;
}

.controls td{
   padding:0 0.15em; /* padding around controls */
   padding-top: 0.3em;
}

.seeking{
   background-color:var(--white2); /* background color of seeking bar */
   display:flex;
   justify-content: space-evenly;
   padding:0.15em; /* padding around seeking bar */
}

.current-time{
   padding-right:0.15em;
}

.total-duration{
   padding-left:0.15em;
}

i.fas:hover{
   cursor:help;
}

i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
   color:var(--black); /* color of controls */
}

input[type=range] {
   -webkit-appearance: none;
   width: 100%;
}

input[type=range]:focus {
   outline: none;
}

/* settings for chrome browsers */
input[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: 0.08em; /* thickness of seeking track */
   cursor: help;
   background: var(--black); /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb {
   height: 0.3em; /* height of seeking square */
   width: 0.3em; /* width of seeking square */
   border-radius: 0px; /* change to 0.15em if you want a circle seeker */
   background: var(--black); /* color of seeker square */
   cursor: help;
   -webkit-appearance: none;
   margin-top: -0.15em; 
}

/* settings for firefox browsers */
input[type=range]::-moz-range-track {
   width: 100%;
   height: 0.08em; /* thickness of seeking track */
   cursor: help;
   background: var(--black); /* color of seeking track */
}

input[type=range]::-moz-range-thumb {
   height: 0.3em; /* height of seeking square */
   width: 0.3em; /* width of seeking square */
   border-radius: 0px; /* change to 0.15em if you want a circle seeker */
   background: var(--black); /* color of seeker square */
   cursor: help;
   border:none;
}