@font-face {
    font-family: "custom1";
    src: url(fonts/starborn.woff) format("woff");
    font-weight: normal;
    font-style:normal;
    font-display: swap;
}

@font-face {
    font-family: "custom2";
    src: url(fonts/Chicken-Rice.woff) format("woff");
    font-weight: normal;
    font-style:normal;
    font-display: swap;
}


a{
    color: inherit;
}




.header {

font-family: "custom1";
color: antiquewhite;

-webkit-text-stroke: 1px antiquewhite;
-webkit-text-fill-color: #C82909;

margin-top: 30px;
margin-bottom: 10px;
    display: grid;
    place-items: center;
    grid: 1000x / auto auto auto;

    text-align: center;
}



body {
background-color: #C82909;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
width: 100%;
height: 100%;
object-fit: fill;
}




/* this is for home page */

.nmfpbox {
color: rgb(0, 0, 0);


display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 4;

max-width: 1000px;
margin: 10px auto;
gap: 10px;
justify-items: center;

}

.navbox {
    grid-row: 1/2;
    grid-column: 1/2;
    border: 2px solid antiquewhite;
    background-image: url(images/nav.jpg);
    text-align: center;
    width: 100%;

}

.nav {
    font-family: "custom1";
    color: #C82909;

    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: #C82909;
}

.navlist {
    list-style-type: none;
    padding: 0;
}

.list {
 font-family: "custom2";
    color: #C82909;
}



.playerbox {
    grid-row: 2/3;
    grid-column: 1/2 ;
    border: 2px solid antiquewhite;
    background-image: url(images/msuicplayer.jpg);
    text-align: center;
    width: 100%;
    height: 450px;
}

.playertitle {
    font-family: "custom1";
    color: #C82909;

    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: #C82909;
}

.player {
    background-image: url(images/player.jpg);
    padding: 10px;
    border-radius: 20px; 
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 
    width: 200px; 
    height: 325px;
    
    margin: 0 auto;
    display: block;
}

#albumArt {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
    text-align: center;
}

#PlayPause {
    margin: 10px;
    padding: 10px 20px;
    cursor: pointer;
    text-align: center;

    font-family: "custom2";
    color: #C82909;
}

.play {
    font-family: "custom2";
    color: #C82909;
}

#seek {
    width: 100%;
    margin-top: 15px;
    text-align: center;
}

#volume {
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

.volume2 {
    font-family: "custom2";
    color: #C82909;
}




.mainbox {
    grid-row: 1/3;
    grid-column: 2/4;
    border: 2px solid antiquewhite;
    background-image: url(images/main.jpg);
    text-align: center;
    width: 100%;
}

.updatebox {
    width: 500px;
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    border: 2px solid antiquewhite;
    background-image: url(images/updatebox.jpg);

    margin: 0 auto;

    font-family: "custom2";
    color: antiquewhite;
}




.footer {
    grid-row: 3/4;
    grid-column: 1/4;
    border: 2px solid antiquewhite;
    background-image: url(images/footer.jpg);
    text-align: center;
    width: 100%;

    font-family: "custom1";
    color: #C82909;

    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: #C82909;
}

/* end of home page */

/* this is for about me page */

.afbox {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;

    max-width: 1000px;
    margin: 10px auto;
    gap: 10px;
    justify-items: center;
}

.aboutmebox {
    grid-column: 1/3;
    grid-row: 1/2;

    border: 2px solid antiquewhite;
    background-image: url(images/nav.jpg);
    text-align: center;


    margin: 10px auto;
    gap: 10px;
    

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;

    width: 100%;
}

.about-me {
    font-family: "custom2";
    color: #C82909;
}

.imagebox {
    width:50px;
    height: auto;
    display: block;
}

.footer2 {
    grid-column: 1/3;
    grid-row: 2/3;

    width: 100%;

    text-align: center;
    justify-content: center;

    border: 2px solid antiquewhite;
    background-image: url(images/footer.jpg);

    font-family: "custom1";
    color: #C82909;

    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: #C82909;
}