@font-face {
    font-family: pixel-sans;
    src: url("/fonts/fs-pixel-sans-unicode-regular.ttf");
}
@font-face {
    font-family: rainyhearts;
    src: url("/fonts/windows-xp-tahoma.ttf");
}


p,a,b,i,h1,li{
    font-family: 'pixel-sans';
}

p {font-size: 2rem;
text-align: start;
}
li {font-size: 2rem;
text-align: center;

}

ul {
    list-style-type: "*";
    justify-self: center;
}


/* UwU */
.main {
    height: 100%;
    width: 70%;
    
    margin: auto;
        /* top | right | bottom | left */
    border-image: url("/window.png") 43 222 131 129;
    padding: 43px;
    border-image-width: auto;
    background-color: #fff8ff;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column; /* Change to column to stack elements vertically */
    align-content: flex-end;
    image-rendering: crisp-edges;
    align-items: center;
}

.main img {
    width: 30%;
}


.media-window {
    width: 25%;
    margin: auto;
    margin-bottom: 16px;
        /* top | right | bottom | left */
    border-image: url("/window.png") 43 222 131 129;
    padding: 16px;
    border-image-width: auto;
    
    background-color: #fff8ff;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row; 
    align-content: flex-start;
    image-rendering: crisp-edges;
    align-items: center;

}

.flex-row {
    /* i need to learn how to write better css skull emoji */
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;

    flex-wrap: wrap;

}

.flex-row.badgelist img {
    
    flex: 0 0 calc(100%/10);
    box-sizing: border-box;


}

.divider {
    flex-grow: 1;

    margin: 5px
  }


.badgelist 

#album-art {
    padding: 16px;
    padding-top: 24px;
}
.media-window p,a { padding-left: 16px; }

.media-info {
  display:flex;
  flex-direction: column;

}

.media-title {
    margin: 8px 0px 0px 0px;
    font-size: 24px;
    color: #2023db;
}

.media-artist {
    margin: 0px;
    font-size: 1rem;
    
}



body {
    display: flex;
    flex-direction: row;
    background-image: url("/Background2.png");
    background-size: 50%;
    justify-content: center;
    margin: 0px;
}

.desktop {
    display: flex;
    
    flex-direction: column;
    background-image: url("/Background.png");
    width: 70%;
    min-height: 100vh;
}

@media (max-width: 600px) {
    p {font-size: 1.5rem;}

.desktop {
    width: 100%;
    
}
body {
    background-image: none;
}
}



.taskbar {
    background-color: #f4dbf9;

    border: outset;
    border-color: #f7eff8;
}


.window-border {
    border-image: url("/window.png") 43 222 131 129;

    padding: 32px 9px 18px 6px;
    border-image-width: auto;
}

.nav-buttons {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    image-rendering: pixelated;
    flex-wrap: wrap;
    justify-content: center;
    align-self: flex-start;
}
.nav-buttons img {
    width: 2em;
}
.nav-buttons a{
    flex: 0 0 calc(100% / 16); 

    text-align: center;
    font-size: 2rem;
    padding: 16px;
}