:root {
--greygraddown: linear-gradient(0deg, rgba(237, 237, 237, 1) 0%, rgba(168, 168, 168, 1) 90%);
--outline: #404040;
}


@font-face {
  font-family: mag;
  src: url(/magica.ttf);
}
html {
  background-image: url(https://file.garden/ZXJkOcYwORXn2d9V/crop2.jpg);
}

body {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: var(--outline);
 font-family: mag;
}

.head {
  
  width: 97%;
  background: white;
  padding: 10px;
  border: 2px solid var(--outline);
  border-radius: 25px 0px 25px 0px;
  display: flex;
  height: 500px;
  margin-top: 40px;
}
.left {
  width: 25%;
  float: left;
}

.mid {
  width: 50%;
}

.right {
  width: 25%;
  float: right;
}

.gallery {
  display: flex;
  width: 100%;
  
}

.gallery img {
  width: 33%;
}

a {
  color: #f56e9b;
  transition: 0.4s;
}

a:hover {
  color: #d14d96;
}

.notepad {
  background: #d1ffea;
  border: 2px solid var(--outline);
  border-radius: 10px;
  padding: 8px;
width: 95%;
height: 240px;
overflow: auto;
margin-top: 15px;
}
.notepad img {
  width: 70px;
  border-radius: 50%;
  border: 1.5px solid var(--outline);
  height: 70px;
}
.notepad .lefti {
  float: left;
}

.notepad .righti {
  float: right;
}

.holddni {

  display: flex;
  width: 100%;
}

.dni, .byf {
  
  width: 45%;
  padding: 4px;
  border: 2px solid var(--outline);
  height: 150px;
  background: #fff7de;
  border-radius: 10px;
  overflow: auto;
}

.dni {
  float: left;
}

.byf {
margin-left: auto;
}

.lyrics {
  width: 96%;
  padding: 4px;
  background: skyblue;
  border: 2px solid var(--outline);
  border-radius: 10px 0px 10px 0px;
}


@font-face {
font-family: 'music';
src: url(https://cdn.glitch.me/9bbfdfb3-4bfa-4c39-8743-5621c8b9df21/LL_RECOR.TTF);
}
 
@font-face {
font-family: Pixelated MS Sans Serif;
src:url(ms_sans_serif.woff) format("woff");
src:url(ms_sans_serif.woff2) format("woff2");
}
 
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position:relative;
display:flex;
background: #C2C2C2;
padding: .2em;
border: 3px solid;
border-style: inset;
margin: auto;
margin-top: 0.5em;
margin-bottom: 0.5em;
width:auto;
}
 
#glenplayer02 a {text-decoration:none;}
 
#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}
 
.music-controls {
user-select:none;
-webkit-user-select:none;
width:13px;
font-size:18px;
cursor:pointer;
font-family: 'music';
}
 
.playy, .pausee {font-family: 'music'; font-size: 1.1em; color: #F38BC8; -webkit-text-stroke: 0.5px #000; margin-top: -0.2em; margin-bottom: 0.1em; } /* color of play & pause buttons */
 
.pausee {display:none;}
 
.sonata {
margin-left:0.4em;
font-family: Pixelated MS Sans Serif;
font-size:0.75em;
color:#000; /* color of music note symbol */
}
 
.labeltext {
margin-left:0.5em;
position: relative;
bottom:0.1em;
font-size:14px;/* color of song title */
}

.notepad::-webkit-scrollbar {
  display: none;
}

.dni::-webkit-scrollbar, .byf::-webkit-scrollbar {
  display: none;
}