:root{
    --lace:var(--pink); /* change black to the color you want */ 
/* options are: pink, black, blue, yellow, purple */
    --pink:url("https://files.catbox.moe/bsr34l.png");
    --black:url("https://sealsprinkles.neocities.org/23.png");
    --green:url("https://sealsprinkles.neocities.org/bsr34l.png");
    --blue:url("https://sealsprinkles.neocities.org/21.png");
    --yellow:url("https://files.catbox.moe/r3ub8h.png");
    --purple:url("https://sealsprinkles.neocities.org/22.png");
}

/****** fonts ******/
@font-face{
    font-family:"Pixel";
    src:url(https://sealsprinkles.neocities.org/fonts/pixel.ttf);
}

@font-face {                  
  font-family: 'jgs7';
  src: url(https://humantooth.neocities.org/fonts/jgs7.woff) format('woff');
  font-weight: normal;
  font-style: normal;
} 
i.pixel{font-family:'Pixel';}

/****** scrollbar ******/
::-webkit-scrollbar{
    display:none;
}

/****** select hightlight ******/
::selection{
    background:pink;
    color:hotpink;
}

::-moz-selection{
    background:#ffaacc;
    color:pink;
}

/****** body ******/
body{
    background-color:#ffaacc;
    background-repeat:repeat;
    background-position:0 0;
    background-attachment:fixed;
    color: #ffaacc; /* default font color */
    font-family:"jgs7"; /* default font */
    font-size:20px; /* default font size */
    padding:10px;
    background-image:url('https://sealsprinkles.neocities.org/images/stars.gif');
    background-size:200px 200px;
}

/****** links ******/
a{
    text-decoration:none;
    color:#fff5bf;
    transition:0.3s;
    text-shadow:-1px 0 #ffaacc, 0 2px #ffaacc, 2px 0 #ffaacc, 0 -1px #ffaacc;
}

a:hover{
    cursor:help;
    transition:0.3s;
    color:hotpink;
    text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

/****** wrappers ******/
#wrapper{
    animation:fadeEffect 1s;
    margin:auto;
    width:fit-content;
    width:-moz-fit-content;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    position:absolute;
}

@keyframes fadeEffect{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

/****** containers ******/
.container{  
    display:grid;
    margin:50px;
    width:1000px;
    grid-template-columns:150px 1.2fr 2fr 300px;
    grid-template-rows:350px 500px 0.10fr;
    gap:10px 10px;
    grid-auto-flow:row;
    grid-template-areas:
    "icon icon main links"
    "updates updates main box"
    "footer footer footer footer";
    border-width:10px;
    border-style:solid;
    border-image:var(--lace) 8 fill round; 
}

.main{ 
    grid-area:main;
    border-width:10px;
    border-style:solid;
    border-image:var(--green) 8 fill round;
    padding:10px;
    overflow:auto;
}

.icon{ 
    grid-area:icon;
    border-width:10px;
    border-style:solid;
    overflow:hidden;
    border-image:var(--blue) 8 fill round;
    padding:8px;
}

.icon img{
    width:400px;
    display:block;
    width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
   image-fit: contain;
}

.updates{ 
    grid-area:updates; 
    border-width:10px;
    border-style:solid;
    border-image:var(--lace) 8 fill round;
    padding:10px;
    overflow:auto;
    text-align:center;
    line-height:130%;
}

.links{ 
    grid-area:links; 
    border-width:10px;
    border-style:solid;
    border-image:var(--yellow) 8 fill round;
    padding:10px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.box{ 
    grid-area:box; 
    border-width:10px;
    border-style:solid;
    border-image:var(--purple) 8 fill round;
    padding:10px;
}

.footer{
    grid-area:footer;
    text-align:center;
    border-width:10px;
    border-style:solid;
    border-image:var(--black) 8 fill round;
}

header{
    text-align:center;
    font-family:"Pixel";
    font-size:40px;
    margin-bottom:10px;
}

.cornerimg{
    position:absolute;
    bottom:0;
    right:0;
}
.cornerimgup{
    position:absolute;
    bottom:0;
    right:1;
}

.highlight{
    background-color:#ffaacc;
    color:#fff7ca;
}

.player {
  height: 95vh;
  width: 250px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

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

.track-art {
  margin: 25px;
  height: 250px;
  width: 250px;
  background-image: url("https://images.pexels.com/photos/262034/pexels-photo-262034.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");
  background-size: cover;
  border-radius: 15%;
}

.now-playing {
  font-size: 2rem;
}

.track-name {
  font-size: 5rem;
}

.track-artist {
  font-size: 1.5rem;
}

.buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
}