/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
body {
background: #d6bcc7;
background-image: url ('/hall-ghosts-light.png');
background: radial-gradient(circle,rgba(214, 188, 199, 1) 0%, rgba(153, 120, 158, 1) 52%, rgba(12, 44, 69, 1) 100%);
  background-attachment: fixed;
  font-family: Calibri, sans-serif;
  font-size: 0.9em;
  color: #2E2326;
  }
  
.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 #9D8189;
	border-radius: 5px;
	border-bottom: 2px solid #2E2326;
	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: #9D8189;
	color: #fff;
	border-bottom: 2px solid #2E2326;
	padding: 1%;
	margin:  0;
}

.ipod {
/* change these to whatever colors you want to use for it! */
--black: #5b3a53 ;
--dark: #2e2326;
--med: #99789e ;
--light: #cdbccf;
--white: #f8f6f8;

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: 330px;
	right: 12%;
	top: 0;
	z-index: -1;
}

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

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

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

a {
	font-family: monospace;
}

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

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

hr {
  width: 90%;
  border-bottom: 2px dashed #F4ACB7;
  border-top: none;
  }
  
/*** scrollbar ***/
/* width */
::-webkit-scrollbar {
  width: 10px;
}

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

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

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

::-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;
}

}