@font-face { 
	font-family: "chalk"; 
	src: url("Chalkduster.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}
@font-face { 
	font-family: "omori"; 
	src: url("OMORI_GAME2.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}
@font-face { 
	font-family: "yomogi"; 
	src: url("Yomogi-Regular.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}
#pagedoll {
  position: fixed;
  bottom: 1px;
  right:1px;
}
#backbutton {
  position: fixed;
  top: 1px;
  left:1px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --withe: #fefefe;
  --cream: #fffefd;
  --light-pink: #f9f4f2;
  --pink: #f5dddc;
  --dark-pink: #d6bab9;
}
body {
  min-height: 100vh;
  background-image: url("https://files.catbox.moe/mzrpmt.jpg");
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 20px;
  font-family: omori, serif;
  font-size: 11px;
  color: var(--withe);
}
a {
  text-decoration: none;
  color: lightblue;
  font-weight: 600;
}
li {
  list-style: none;
}
.main-container {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
header {
  width: 100%;
  height: 400px;
  background-image: url("https://files.catbox.moe/lr4mk1.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  border-style: solid;
  border-width: 7px;
  border-color: var(--withe);
  display: flex;
  align-items: flex-end;
  padding: 20px;
}
nav {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
nav li {
  width: 100px;
  padding: 5px;
  font-size: 14px;
  text-align: center;
  background-color: var(--withe);
  border-style: solid;
  border-width: 7px;
  border-image: url("/border-mini.png") 7 fill round;
  transition: transform 0.4s ease;
}
nav li:hover {
  transform: scale(1.03);
}
main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.sidebar {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.main-content {
  grid-column: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.right-sidebar {
  grid-column: 4 / 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.avatar {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border: 1px solid var(--dark-pink);
  border-radius: 10px;
}
.glassheart {
  width: 100px;
  height: 100px;
  /*object-fit: cover;*/
  border: 1px solid var(--withe);
  border-radius: 10px;
  /*display:inline-block;*/
}
.box-border {
  width: 100%;
  padding: 10px;
  background-color: thistle;
  border-style: solid;
  border-width: 7px;
  border-color: var(--withe);
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-radius: 10px;
}
h2 {
  font-family: chalk, cursive;
  font-weight: 400;
  font-style: normal;
  color: white;
  font-size: 40px;
}
p {
  font-size: 20px;
  color: white;
  text-align: justify;
}
.line-dashed {
  border: none;
  border-top: 1px dashed white;
}
.sidebar-list {
  font-size: 20px;
  line-height: 35px;
}
.sidebar-list img {
  width: 12px;
}
footer {
  width: 100%;
  padding: 10px;
  text-align: center;
  background-color: thistle;
  border-style: solid;
  border-width: 7px;
  border-color: var(--withe);
  border-radius: 10px;
  font-family: yomogi, sans-serif;
  font-weight: 600;
}
.two-column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
/* pink theme */
#musicplayer{ 
font-family: 'omori';
font-weight:bold;
height:30px;
width:200px;
left:0;
bottom:0;
position:fixed;
margin-bottom:20px;
display:flex;
background: linear-gradient(180deg,#ffa0c7 0%, white 45%, #E263a2 47%, #ffa0c7 100%);
border:ridge 2px #fd69a5;
/* border around player */
outline: solid 2px black;  
box-shadow: inset 13px 0px 6px -10px #f170a5, inset -13px 0px 6px -10px #f170a5, inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px #f170a5;";
}

.songtitle{ 
display:block;
padding:2px;
/* padding around song title */
font-family: 'omori';
margin-top:4px;
margin-right: 5px; 
font-size:15px;
color:black;
letter-spacing: 1px; 
background: white;
/* background of song title */
border: gray inset 1px;
border-radius:6px;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
}
.controls{
font-size:12px;
/* size of controls */
text-align:center;
width:100px;
height:20px;
text-decoration:none;
/*filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);*/
}
.controls td{
padding-top:5px;
/* padding around controls */
}
.seeking{
width:100%;
background: linear-gradient(180deg,#ffa0c7 0%, white 45%, #E263a2 47%, #ffa0c7 100%);
border:ridge 2px #fd69a5;
/* border around player */
outline: solid 2px black;
color: #A03B6D;
font-size: 20px;
/*box-shadow: inset 13px 0px 6px -10px #f170a5, inset -13px 0px 6px -10px #f170a5, inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px #f170a5;";*/
/* background color of seeking bar */
display:flex;
justify-content: space-evenly;
padding:7px;
/* padding around seeking bar */
}
.current-time{ 
padding-right:5px;
margin-right: 3px;
}
.total-duration{
padding-left:5px;
}

.ctrlimg {
height:16px;
width:16px;
}
.ctrlimg:hover{
cursor:help;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
background: transparent;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
/* thickness of seeking track */
cursor: help;
border-radius: 6px;
background: black;
/* color of seeking track */
border: 1px white solid;
}
input[type=range]::-webkit-slider-thumb {
height: 30px;
/* height of seeking square */
width: 20px;
/* width of seeking square */
background-image:  url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif');
/* image of  seeking square */
background-size: 25px;
-webkit-appearance: none;
margin-top: -10px;
}
input[type=range].volume_slider::-webkit-slider-runnable-track { 
background: white;
/* color of volume seeking track */
filter:drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
/* outline of volume seeking track */ 
}
input[type=range].volume_slider::-webkit-slider-thumb {
background-image: url(https://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png);
/* image of volume seeking square */
background-size: 20px;
height: 20px;
/* height of volume seeking square */
width: 20px; 
margin-top: -8px;
}
.slider_container {  
width: 100%;
/* width of volume seeker */
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg,#77BBFF 0%,  #f0f5ff  45%, #3885d2 47%, #59a3ec 60%, #77BBFF 100%);
border:ridge 2px #77BBFF;/* border around player */
outline: solid 2px black;  
box-shadow: inset 10px 0px 6px -10px #3885d2, inset -13px 0px 6px -10px #3885d2, inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px #3885d2;
}
.label{
  /*width: 100%;*/
/* width of volume seeker */
font-size: 30px;
color: #26609A;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg,#77BBFF 0%,  #f0f5ff  45%, #3885d2 47%, #59a3ec 60%, #77BBFF 100%);
border:ridge 2px #77BBFF;/* border around player */
outline: solid 2px black;  
box-shadow: inset 10px 0px 6px -10px #3885d2, inset -13px 0px 6px -10px #3885d2, inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px #3885d2;
}
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: transparent;
  min-width: 230px;
  /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;*/
}

.dropdown:hover .dropdown-content {
  display: block;
}

/*Tablet*/
@media (max-width: 800px) {
  body {
    padding: 30px 15px;
  }
  header {
    height: 320px;
  }
  main {
    grid-template-columns: 1fr;
  }
  .sidebar,
  .main-content,
  .right-sidebar {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
  }
  .box-border {
    align-items: center;
    text-align: center;
  }
  p {
    text-align: center;
  }
  .two-column {
    grid-template-columns: 1fr;
  }
  .sidebar-list {
    text-align: center;
  }
}
/*Mobile*/
@media (max-width: 550px) {
  body {
    padding: 15px 10px;
  }
  .main-container {
    width: 100%;
  }
  header {
    height: 250px;
    padding: 12px;
  }
  nav {
    min-height: auto;
    padding: 5px 0;
  }
  nav ul {
    width: 100%;
    gap: 6px;
  }
  nav li {
    width: calc(50% - 3px);
    font-size: 13px;
  }
  main {
    grid-template-columns: 1fr;
  }
  .sidebar,
  .main-content,
  .right-sidebar {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
  }
  .box-border {
    align-items: center;
    text-align: center;
  }
  h2 {
    font-size: 22px;
    text-align: center;
  }
  p {
    text-align: center;
  }
  .avatar {
    height: 220px;
  }
  .sidebar-list {
    text-align: center;
  }
  .two-column {
    grid-template-columns: 1fr;
  }
  footer {
    text-align: center;
  }
}