@font-face {
    font-family: "moonstar";
    src: url(fonts/Moonstar.ttf);
}

body {cursor: url(https://mottledmango.neocities.org/clawsor3.png), auto;
font-family: sans-serif;}


.full-page1 {display: flex;
align-items: flex-start;
justify-content: center;
margin: 35px auto;
gap: 15px;}

.boxtopsspecial {display: block;
border-radius: 25px 25px 0px 0px;
border-left: 5px double rgb(48, 48, 228);
border-top: 5px double rgb(127, 21, 189);
border-right: 5px double rgb(127, 21, 189);
background: linear-gradient(180deg, rgb(19, 18, 41, 1), rgb(38, 20, 51))}

.boxtops {display: block;
border-radius: 25px 25px 0px 0px;
border-left: 5px double rgb(48, 48, 228);
border-top: 5px double rgb(127, 21, 189);
border-right: 5px double rgb(127, 21, 189);
background: linear-gradient(180deg, rgb(19, 18, 41, 0.45), rgb(38, 20, 51))}

.boxbottom {display: block;
border-radius: 0px 0px 25px 25px;
margin-bottom: 30px;
border-left: 5px double rgb(48, 48, 228);
border-bottom: 5px double rgb(48, 48, 228);
border-right: 5px double rgb(127, 21, 189);
color: rgb(38, 20, 51);
background:linear-gradient(180deg, rgb(38, 20, 51), rgb(19, 18, 41, 0.45))}

.box {display: block;
justify-items: center;
padding: 10px;
background-color: rgb(38, 20, 51);
color: blanchedalmond;
border-left: 5px double rgb(48, 48, 228);
border-right: 5px double rgb(127, 21, 189)}


.button {display: block;
background-color: rgb(68, 39, 85);
border-radius: 25px;
border-left: 5px double rgb(48, 48, 228);
border-bottom: 5px double rgb(48, 48, 228);
border-top: 5px double rgb(127, 21, 189);
border-right: 5px double rgb(127, 21, 189);
font-family: "Bitcount Prop Single", system-ui;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
font-size: large;
color: blanchedalmond;
text-decoration: none;
padding: 10px;}

.sillynavbar {display:flex;
padding: 5px 15px 5px 15px;
justify-content: center;
gap: 5px;
text-decoration-line: none;
border-radius: 25px 25px 0px 0px;
margin-bottom: 100px;
border-left: 5px double rgb(48, 48, 228);
border-top: 5px double rgb(127, 21, 189);
border-right: 5px double rgb(127, 21, 189);
background: linear-gradient(180deg, rgb(19, 18, 41, 0.45), rgb(38, 20, 51))}

.optionnav  {display: flex;
text-decoration: none;
font-size: 18px;
background-color: rgb(68, 39, 85);
color: blanchedalmond;
padding: 5px 10px 5px 10px;
border-radius: 25px;
height: 50px;
border-left: 5px double rgb(48, 48, 228);
border-bottom: 5px double rgb(48, 48, 228);
border-top: 5px double rgb(127, 21, 189);
border-right: 5px double rgb(127, 21, 189);}

.iconnav {width: 50px; height: 50px;}

.navtext {height: 30px; width: 50px; text-align: center;}

.aboutmesection{display: flex;
flex-direction: column;
padding: 20px;
justify-self: left;
width: 100%;
max-width: 430px;}

.musicplayerme {display: block;
height: auto;
width: 310px;
padding: 10px;
justify-items: center;
background-color: rgb(68, 39, 85);
border-radius: 25px;
border: 5px double black;
justify-self: center;}

.statusbox {display: flex;
position: relative;
margin-top: 25%;}

.speech-bubble {
  position: relative;
  background: #884ada;
  border-radius: 10px;
  padding: 10px 15px;
  max-width: 250px;
  height: 75px;
  color: #333;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #884ada transparent transparent transparent;
}

.tailswipe {position: relative;
  animation-name: tailswipeani;
  animation-duration: 4s;
  animation-iteration-count: infinite;}

@keyframes tailswipeani {0%, 100%{rotate:-40deg;}
50%{rotate:40deg;}}
  


.cboxchat {grid-column-start: 1;
grid-column-end: 3;
border: 5px double midnightblue;
margin-top: 20px;}

#middlespace{display: flex;
flex-direction: column;
justify-self: center;
padding: 20px;
color: blanchedalmond;
text-align: center;
margin-top: 20px;
box-shadow: 5px #884ada;
width: 100%;
max-width: 950px;}


aside {justify-self: left;
justify-content: center;
padding: 20px;
width: 100%;
max-width: 430px;}

.footer1 {display: flex;
justify-content: space-between;
background-color: rgb(68, 39, 85);
border-radius: 25px;
justify-self: center;
margin: 25px;
padding: 20px;
width: 1200px;}

.headertext {font-family: "Bitcount Prop Single", system-ui;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0.5,
    "ELSH" 0,
    "ELXP" 0;
font-size: xx-large;
color: blanchedalmond;}

/* Using flex with the column direction to
   align items in a vertical direction */
.player {
  height: 200px;
  width: 200px;
  margin-top: 40px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.details {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.track-art {
  height: 100px;
  width: 100px;
  background-image: URL(
     "https://gifdb.com/images/thumbnail/link-the-legend-of-zelda-playing-ocarina-time-ktvbracjdwwpkvmg.gif");
  background-size: cover;
  background-position: center;
}

/* Changing the font sizes to suitable ones */
.now-playing {
  font-size: 12px;
}

.track-name {
  font-size: 10px;
}

.track-artist {
  font-size: 7px;
}

/* Using flex with the row direction to
   align items in a horizontal direction */
.buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.playpause-track,
.prev-track,
.next-track {
  padding: 5px;
  opacity: 0.8;

  /* Smoothly transition the opacity */
  transition: opacity .2s;
}

/* Change the opacity when mouse is hovered */
.playpause-track:hover,
.prev-track:hover,
.next-track:hover {
  opacity: 1.0;
}

/* Define the slider width so that it scales properly */
.slider_container {
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Modify the appearance of the slider */
.seek_slider, .volume_slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 5px;
  background: black;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

/* Modify the appearance of the slider thumb */
.seek_slider::-webkit-slider-thumb,
.volume_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: white;
  cursor: pointer;
  border-radius: 50%;
}

/* Change the opacity when mouse is hovered */
.seek_slider:hover,
.volume_slider:hover {
  opacity: 1.0;
}

.seek_slider {
  width: auto;
}

.volume_slider {
  width: auto;
}

.current-time,
.total-duration {
  padding: 5px;
}

i.fa-volume-down,
i.fa-volume-up {
  padding: 5px;
}

/* Change the mouse cursor to a pointer
   when hovered over */
i.fa-play-circle,
i.fa-pause-circle,
i.fa-step-forward,
i.fa-step-backward {
  cursor: pointer;
}

.blinkies {width: auto; height: auto; justify-self: center; border: 5px double midnightblue; margin:0px;}

.stamps {width: auto; height:auto; justify-self: center; border: 5px double midnightblue; margin: 0px;}