body 
{ background: #314b28;
background-image: url('/black-felt.png');
  font-family: Calibri, sans-serif;
  font-size: 0.9em;
  color: #000;
  }
  
.wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 70%;
	height: 95vh;
	margin: auto;
}

.main {
	height: 100%;
	flex: 3;
}

.leftside, .rightside  
{	height: 50%;
	flex: 1;
}

.main, .leftside, .rightside {
	border: 2px solid #000;
	border-radius: 5px;
	border-bottom: 2px solid #000;
	margin: 1%;
	background: #FFFFFF;
	overflow: auto;
}

.main img, .leftside img, .rightside img {
	max-width: 100%;
}

.rightside {
	align-self: flex-end;
}

.inner {
	padding: 2%;
	height: 90%;
	overflow: auto;
}

h1, h2, h3, h4 {
	font-family: monospace;
	font-size: 1.2em;
	background: #333333;
	color: #fff;
	border-bottom: 2px solid #000;
	padding: 1%;
	margin:  0;
}

.ipod {
/* change these to whatever colors you want to use for it! */
--black: #000 ;
--dark: grey;
--med: LightGrey;
--light: #LightGrey;
--white: #FFF;

width:200px;
height:350px;
border:5px var(--med) solid;
padding:20px;
position:relative;
margin:30px;
border-radius:25px;
background:var(--light);
box-shadow:15px 15px var(--med)
}

/* the actual music player*/
audio {
border-radius:25px;
width:90%;
height:30px;
background:var(--med);
color:white;
mix-blend-mode:hard-light;
opacity:.4;
margin:10px auto
}

/*offsets every second ipod widget by a little bit, to make them arrange in a more interesting way, and changes the colors slightly! you can get rid of this if you don't want that.*/
.ipod:nth-of-type(even) {
background:var(--med);
box-shadow:15px 15px var(--dark);
border-color:var(--dark);
margin-top:-5px
}
.ipod:nth-of-type(even) .button .button {
background:var(--med);
border:1px double var(--light)
}

.screen {
height:55%;
background:var(--white);
border-radius:20px;
overflow:scroll;
outline:2px var(--white) solid;
outline-offset:3px;
font-family:'ChicagoFLF', 'Chicago', monospace; /* the font used on vintage apple products - feel free to change this if
you want something different! */
font-size:12px;
text-align:center;
}

/* the bold text - where your song title will go, probably */
.screen b {
background:var(--med);
color:var(--white);
width:100%;
display:block;
padding:3px 5px;
font-size:.9em;
margin-top:5px;
border-top:15px double var(--white);
}

/* the bit under the audio player */
.screen .caption {
padding:0px 10px
}

/* the circular buttons - this bit is just for decoration, really! */
.button {
border:1px double var(--med);
background:var(--white);
height:40%;
aspect-ratio:1 / 1;
margin:10% auto;
border-radius:50%;
overflow:hidden;
text-align:center;
position:relative;
}
.button .b {
position:absolute;
width:100%;
text-align:center;
font-weight:bold;
color:var(--black) !important
}
.b.b-top {
top:5%;
font-size:.9em;
}
.b.b-bottom {
bottom:5%;
font-size:.6em;
}
.b.b-left {
left:3%;
top:40%;
width:20%;
}
.b.b-right {
right:3%;
top:40%;
width:20%;
}

.button .button {
height:50%;
aspect-ratio:1 / 1;
margin:25% auto;
background:var(--light)
}

#leftimg {
	position: absolute;
	width: 330px;
	left: 12%;
	bottom: 0;
	z-index: -1;
}

#rightimg {
	position: absolute;
	width: 150px;
	right: 4%;
	top: 0;
	z-index: -1;
}

header {
	font-size: 2em;
	font-family: monospace;
	border-bottom: 2px dashed #000;
}

header img {
	float: right;
	width: 50%;
}

.footer {
	font-family: monospace;
	border-top: 2px dashed #000;
}

a {
	font-family: monospace;
}

a:link, a:visited {
	color: #666633;
	text-decoration: none;
	}			

a:hover, a:active {
	color: #999966;
	text-decoration: underline;
	}
	
ul {
	
	line-height: 200%;
}

/*** scrollbar ***/
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #FFF;
  border: 1px solid;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #FFF;
  border: 1px solid;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #FFF;
}

::-webkit-scrollbar-button {
  background: #9D8189;
}

::-webkit-scrollbar-button:hover {
  background: #F4ACB7;
}

::-webkit-scrollbar-button:single-button {
  border: 1px solid;
  height: 12px;
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #555555 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: #555555 transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: #777777 transparent transparent transparent;
}

/*mobile view*/

@media only screen and (max-width: 600px) {

.wrapper {
	width: 100%;
}

.inner {
	overflow: visible;
}

}