:root{
  --cream:#EEEBD0;
  --blush:#FBB3A9;
  --rose:#E87EA1;
  --coral:#E86252;
  --pink:#EE2677;
  --green:#3C5832;
  --green-light:#618A50;
}

body{
  background:#EEEBD0 url("/img/pexels-suju-2099737_med_light.jpg");
  background-size:cover;
  background-attachment:fixed;
  background-position:center;
  font-family:"Courier New",monospace;
  font-size:13px;
  color:#3C5832;
}

center{
  text-align:center;
}

a{
  color:#EE2677;
  font-weight:bold;
}

a:hover{
  color:#E86252;
}

/* SIDEBAR */

.sidebar-group{
  position:fixed;
  top:0;
  margin-top:25px;
}

/* WINDOWS */

.sidebar,
.mini-sidebar,
.wide-sidebar,
.box{
  background:#FBB3A9;
  border-radius:5px;
  border:1px solid #E86252;
  box-shadow:3px 3px #3C5832;
}

/* IMAGES */

.sidebar img,
.mini-sidebar img,
.wide-sidebar img,
.box img{
  max-width:100%;
  height:auto;
}

/* SIDEBARS */

.sidebar,
.sidebar-box{
  display:inline-block;
  vertical-align:top;
  width:160px;
}

.sidebar-box{
  margin-left:10px;
}

.sidebar{
  width:160px;
  margin-left:25px;
}

.mini-sidebar{
  margin-bottom:25px;
}

.wide-sidebar{
  margin-left:25px;
  margin-top:25px;
  width:340px;
  min-height:150px;
}

/* WINDOW CONTENT */

.inner{
  padding:10px;
  padding-bottom:5px;
  padding-top:0;
}

/* TITLE BARS */

.title-bar,
.box-title-bar{
  background:#E87EA1;
  color:#EEEBD0;
  font-weight:bold;
  padding:5px;
  padding-top:3px;
  padding-bottom:3px;
}

.box-title-bar{
  padding:7px;
  padding-top:5px;
  padding-bottom:5px;
}

/* WINDOW BUTTON */

.right{
  float:right;
  margin-right:5px;
  font-family:Arial,sans-serif;
  line-height:12px;
  color:#EEEBD0;
}

/* ROUND IMAGE */

.icon{
  border:#EE2677 solid 2px;
  border-radius:50%;
}

/* MAIN CONTENT */

.box{
  margin-top:25px;
  margin-left:400px;
  width:455px;
  margin-bottom:25px;
}

/* HEADINGS */

h1,
h2,
h3{
  font-family:Garamond,"Bookman",serif;
  color:#EE2677;
}

h1{
  font-size:27px;
}

h2{
  font-size:21px;
}

h3{
  font-size:17px;
}

/* TEXT */

p,
li{
  color:#3C5832;
  line-height:1.5;
}

strong{
  color:#E86252;
}

/* BIG QUOTE */

.big-quote{
  font-size:32px;
  color:#EE2677;
  letter-spacing:6px;
  word-spacing:2px;
  font-family:Garamond,"Bookman",serif;
  position:fixed;
  margin-left:1050px;
  margin-top:300px;
  top:0;
  width:300px;
}

wide{
  letter-spacing:16px;
}

midwide{
  letter-spacing:3px;
}

/* MUSIC PLAYER */

.player{
  width:100%;
}

.player .window{
  width:100%;
}

.player .window-body{
  padding:10px;
}

.player-flex{
  display:flex;
  align-items:center;
  gap:15px;
}

/* MUSIC WHEEL */

.wheel{
  flex-shrink:0;
  background:#EEEBD0;
  border:2px solid #E86252;
  border-radius:50%;
  box-shadow:2px 2px #3C5832;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.wheel button{
  background:#FBB3A9;
  border:1px solid #618A50;
  color:#3C5832;
  cursor:pointer;
  border-radius:3px;
}

.wheel button:hover{
  background:#EE2677;
  color:#EEEBD0;
}

.wheelcontrols{
  text-align:center;
  border-collapse:collapse;
}

.innerwheel{
  padding:5px;
}

/* PLAYER */

#musicplayer{
  flex:1;
  min-width:0;
}

.songtitle{
  display:block;
  width:100%;
  color:#EE2677;
  font-weight:bold;
  margin-bottom:8px;
}

.seeking{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
}

.current-time,
.total-duration{
  color:#3C5832;
  font-size:11px;
}

.seek_slider{
  flex:1;
  accent-color:#EE2677;
}

/* PLAYER BUTTONS */

.controls{
  width:100%;
  margin-top:8px;
  text-align:center;
}

.controls td{
  padding:2px;
}

.controls button{
  width:35px;
  height:25px;
  background:#FBB3A9;
  border:1px solid #618A50;
  color:#3C5832;
  cursor:pointer;
  border-radius:3px;
}

.controls button:hover{
  background:#EE2677;
  color:#EEEBD0;
}

/* FOOTER */

.footer{
  margin-left:400px;
  width:455px;
  margin-bottom:30px;
  background:#E87EA1;
  color:#EEEBD0;
  border:1px solid #E86252;
  border-radius:5px;
  box-shadow:3px 3px #3C5832;
  padding:10px;
  box-sizing:border-box;
  text-align:center;
}

/* SELECTION */

::selection{
  background:#EE2677;
  color:#EEEBD0;
}

/* SCROLLBAR */

::-webkit-scrollbar{
  width:12px;
}

::-webkit-scrollbar-track{
  background:#EEEBD0;
}

::-webkit-scrollbar-thumb{
  background:#E87EA1;
  border:2px solid #EEEBD0;
  border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
  background:#EE2677;
}

/* MOBILE */

@media only screen and (max-width:900px){
  .sidebar-group{
    position:relative;
    margin-top:25px;
    margin-bottom:25px;
  }

  .sidebar{
    margin-left:10px;
  }

  .box{
    margin-left:10px;
    margin-right:10px;
    width:auto;
  }

  .footer{
    margin-left:10px;
    margin-right:10px;
    width:auto;
  }

  .big-quote{
    display:none;
  }

  .player-flex{
    flex-direction:column;
  }

  #musicplayer{
    width:100%;
  }

  .wheel{
    margin:auto;
  }
}