/* setting variables */

:root {
 	--mainbody: #B23A48;
  --shadow: #6B242B;
  --boxcolour: #F9F8F8;
  --wheelouter: #F9F8F8;
  --wheelinner: #8E7B7B;
  --outline: #6B242B;
  --textcolor: #6B242B;
  --homeiconfilter: invert(13%) sepia(31%) saturate(4555%) hue-rotate(332deg) brightness(92%) contrast(86%); /* you can use this (https://codepen.io/sosuke/pen/Pjoqqp) website to calculate the exact colour you'd like */
  --playpauseiconfilter: invert(13%) sepia(31%) saturate(4555%) hue-rotate(332deg) brightness(92%) contrast(86%);
  --skipiconfilter: invert(13%) sepia(31%) saturate(4555%) hue-rotate(332deg) brightness(92%) contrast(86%);
  --rewindiconfilter: invert(13%) sepia(31%) saturate(4555%) hue-rotate(332deg) brightness(92%) contrast(86%);
}

.container-base {
  background-color: transparent;
  overflow: hidden;
}

/* the most important for the different pages */

.alt-page:target {
  display: block;
 }

.alt-page:not(:target) {
  display: none;
}

/* styling */

.box {
  width: 400px;
  height: 176px;
  display: block;
  margin: auto;
  background-color: var(--mainbody) ;
  padding: 20px;
  border-radius: 30px;
  box-shadow: 1px 1px 20px 6px var(--shadow) inset;
-webkit-box-shadow: 1px 1px 20px 6px var(--shadow) inset;
-moz-box-shadow: 1px 1px 20px 6px var(--shadow) inset;
}

.outercircle {
  width: 136px;
  height: 136px;
  border-radius: 68px;
  background-color: var(--wheelouter);
  position: relative;
  border: 2px solid var(--outline);
}

.innercircle {
  width: 66px;
  height: 66px;
  border-radius: 35px;
  background-color: var(--wheelinner);
  margin-left: 33px;
  margin-top: 33px;
}

.contentbox {
 width: 200px;
  height: 136px;
  background-color: var(--boxcolour);
  border-radius: 20px;
  border: 2px solid var(--outline);
  position: relative;
  padding: 4px;
  font-size: 15px;
}

.contentbox p {
 color: var(--textcolor); 
}

.homeicon {
  margin-left: 18px;
  margin-top: 18px;
  filter: var(--homeiconfilter); 
}

.page {
  width: 200px;
  height: 136px;
  background-color: var(--boxcolour);
  position: absolute;
  left: -2px;
  top: -2px;
  border-radius: 20px;
  border: 2px solid var(--outline);
  padding: 4px;
  font-size: 15px;
  overflow: scroll;
}

.grid {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto auto auto;
  height: 136px;
}

.playpause {
  margin-left: -80px;
  margin-top: 100px;
  filter: var(--playpauseiconfilter);
}

.skip {
  position: relative;
  top: -86px;
  left: 100px;
  filter: var(--skipiconfilter);
}

.rewind {
  position: relative;
  left: -98px;
  top: 53px;
  filter: var(--rewindiconfilter);
}

.myflex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.paste-container {
  width: 420px;
}

::-webkit-scrollbar {
  display: none !important;
}