@import url('https://fonts.googleapis.com/css2?family=Aclonica&family=Cinzel&display=swap');



main section  {
    text-align: center;
    
}



header, nav a:hover, footer {
    color: black;
    
}

nav a:hover {
    color: #d7263d;
    background-color: black;
    
}

.logo {
    width: 100px;
    margin-right: 100px;
    
}



nav a, footer a {
    text-decoration: none;
    color: black;

}


body{
    background-color: black;
    margin: 0;
    padding: 0;
}



h3, nav a, h1 {
    font-family: Aclonica, Helvetica, sans-serif;
    font-size: 2em;
    text-align: center;
    white-space: nowrap; 

    
}

p {
    font-family: Cinzel, Helvetica, sans-serif;

}

 #logo_link {
     padding-top: 5px;
     justify-self: center;
     align-self: center;
     
 }

 nav a {
     padding: 35px;
     color:black
     
     
 }


 footer {
     padding: 25px 50px;
     margin-top: 200px;
     display: flex;
     justify-content: space-around;
     align-items: center;
     padding-top: 15px;
 }



 .left-img, .right-img{
    width: 100%;
    border: solid #fefae0 10px;
    transition: transform .5s;
    box-shadow: 5px 5px 10px #fefae0;
 }




 header, footer {
     background-color: #d7263d;
 }

 

 header {
     display: grid;
     grid-template-columns: 150px auto;
 }

 nav {
     display: flex;
     justify-content: left;
     margin-right: 400px;
 }


.home-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}

.main-img {
    width: 100%;
    border-radius: 50px;
    border: solid #fefae0 10px;
}



.youtube-icon, .spotify-icon, .itunes-icon {
    width: 70px;
    margin-top: 15px;
}

.itunes-icon {
    width: 60px;
}

.main-card {
    grid-column: 5/7;
    grid-row: 2/3;
    margin-top: 50px;
    position: relative;
}

.left-card {
    grid-column: 2/4;
    grid-row: 2/3;
    margin-top: 200px;
}

.right-card {
    grid-column: 8/10;
    grid-row: 2/3;
    margin-top: 200px;
}

.main-card p {
    color: #fefae0;
    position: absolute;
    margin-left: 60px;
   
}

.main-img, .main-card p {
   
    bottom: 0;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #fefae0;
    padding: 20px
   
  }
.music-grid p, h1 {
    color: #fefae0;
}



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

}

.remnant-card {
    grid-column: 1/2;
    grid-row: 1/2;
    margin-left: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 5px 5px 10px #fefae0;
    border-radius: 50px;
    border: solid #fefae0 10px;
}

.remnant-img, .pendulem-img, .reckoning-img, .rises-img, .generic-img, .jingle-img, .washington-img, .evergreen-img, .ever-img {
    width: 100%;
}

#background {
    height: 300px;
    width: 600px;
    margin-top: 150px;
    justify-self: center;
    background-color: #fefae0;
    grid-column: 2/4;
    grid-row: 1/2;
    border-radius: 50px;
    box-shadow: 5px 5px 10px #fefae0;
    margin-left: 300px;
}

#background2 {
    height: 300px;
    width: 600px;
    margin-top: 150px;
    justify-self: center;
    background-color: #fefae0;
    grid-column: 2/4;
    grid-row: 2/3;
    border-radius: 50px;
    box-shadow: 5px 5px 10px #fefae0;
    margin-left: 300px;
}

#background3 {
    height: 300px;
    width: 600px;
    margin-top: 150px;
    justify-self: center;
    background-color: #fefae0;
    grid-column: 2/4;
    grid-row: 3/4;
    border-radius: 50px;
    box-shadow: 5px 5px 10px #fefae0;
    margin-left: 300px;
}

#background4 {
    height: 300px;
    width: 600px;
    margin-top: 150px;
    justify-self: center;
    background-color: #fefae0;
    grid-column: 2/4;
    grid-row: 4/5;
    border-radius: 50px;
    box-shadow: 5px 5px 10px #fefae0;
    margin-left: 300px;
}

#background5 {
    height: 300px;
    width: 600px;
    margin-top: 150px;
    justify-self: center;
    background-color: #fefae0;
    grid-column: 2/4;
    grid-row: 5/6;
    border-radius: 50px;
    box-shadow: 5px 5px 10px #fefae0;
    margin-left: 300px;
}

#background6 {
    height: 300px;
    width: 600px;
    margin-top: 150px;
    justify-self: center;
    background-color: #fefae0;
    grid-column: 2/4;
    grid-row: 6/7;
    border-radius: 50px;
    box-shadow: 5px 5px 10px #fefae0;
    margin-left: 300px;
}






audio {
    margin-top: 170px;
    margin-left: 100px;
    background-color:black;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 25px;
    padding-bottom: 25px;
    border-radius: 50px;
    
}

#text1 {
    grid-column: 2/4;
    grid-row: 1/2;
    margin-left: 400px;
    margin-right: 100px;
    margin-top: -200px;
    background-color: #d7263d;
    border-radius: 5px;
    
    align-self: center;
    padding-left: 50px;
    padding-right: 50px;
    box-shadow: 5px 5px 10px black;
}


#text2 {
    grid-column: 2/4;
    grid-row: 2/3;
    margin-left: 400px;
    margin-right: 100px;
    margin-top: -180px;
    background-color: #d7263d;

    border-radius: 5px;
    
    align-self: center;
    padding-left: 50px;
    padding-right: 50px;
    box-shadow: 5px 5px 10px black;
}

#text3 {
    grid-column: 2/4;
    grid-row: 3/4;
    margin-left: 400px;
    margin-right: 100px;
    margin-top: -170px;
    background-color: #d7263d;
    
    border-radius: 5px;
   
    align-self: center;
    padding-left: 50px;
    padding-right: 50px;
    box-shadow: 5px 5px 10px black;
}

#text4 {
    grid-column: 2/4;
    grid-row: 4/5;
    margin-left: 400px;
    margin-right: 100px;
    margin-top: -200px;
    background-color: #d7263d;
    
    border-radius: 5px;
    
    align-self: center;
    padding-left: 50px;
    padding-right: 50px;
    box-shadow: 5px 5px 10px black;
}

#text5 {
    grid-column: 2/4;
    grid-row: 5/6;
    margin-left: 400px;
    margin-right: 100px;
    margin-top: -200px;
    background-color: #d7263d;
    
    border-radius: 5px;
    
    align-self: center;
    padding-left: 50px;
    padding-right: 50px;
    box-shadow: 5px 5px 10px black;
}

#text6 {
    grid-column: 2/4;
    grid-row: 6/7;
    margin-left: 400px;
    margin-right: 100px;
    margin-top: -200px;
    background-color: #d7263d;
    
    border-radius: 5px;
    
    align-self: center;
    padding-left: 50px;
    padding-right: 50px;
    box-shadow: 5px 5px 10px black;
}



.pendulem-card {
    grid-column: 1/2;
    grid-row: 2/3;
    margin-left: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 5px 5px 10px #fefae0;
    border-radius: 50px;
    border: solid #fefae0 10px;
   
}

.reckoning-card {
    grid-column: 1/2;
    grid-row: 3/4;
    margin-left: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 5px 5px 10px #fefae0;
    border-radius: 50px;
    border: solid #fefae0 10px;
    
}

.rises-card {
    grid-column: 1/2;
    grid-row: 4/5;
    margin-left: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 5px 5px 10px #fefae0;
    border-radius: 50px;
    border: solid #fefae0 10px;
    
}

.generic-card {
    grid-column: 1/2;
    grid-row: 5/6;
    margin-left: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 5px 5px 10px #fefae0;
    border-radius: 50px;
    border: solid #fefae0 10px;
    
}

.jingle-card {
    grid-column: 1/2;
    grid-row: 6/7;
    margin-left: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 5px 5px 10px #fefae0;
    border-radius: 50px;
    border: solid #fefae0 10px;
    
}


    
a {
    text-decoration: none;
}

.about-me-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    margin-top: 50px;
    margin-left: 50px;
    margin-right: 50px;

}

.washington-card {
    grid-column: 3/4;
    grid-row: 1/2;
    
    
}

.evergreen-card {
    grid-column: 3/4;
    grid-row: 2/3;

}

.ever-card {
    grid-column: 3/4;
    grid-row: 3/4;
}

#orgins-para {
    grid-column: 1/3;
    grid-row: 1/2;
    margin-right: 290px;
    margin-left: 20px;
    margin-top: 80px;
    
    
    
}

#orgins-para p {
    padding: 10px;
    border-radius: 20px;
    border: solid #fefae0 10px;
}

#music-para p {
    padding: 10px;
    border-radius: 20px;
    border: solid #fefae0 10px;
}

#released-para p {
    padding: 10px;
    border-radius: 20px;
    border: solid #fefae0 10px;
}

#music-para {
    grid-column: 1/3;
    grid-row: 2/3;
    margin-right: 290px;
    margin-left: 20px;
    
}

#released-para {
    grid-column: 1/3;
    grid-row: 3/4;
    margin-right: 290px;
    margin-left: 20px;
    margin-top: 250px;
    
}

.about-me-grid p {
    color: white;
}

.washington-img, .ever-img, .evergreen-img {

    border: solid #fefae0 10px;
    box-shadow: 5px 5px 10px #fefae0;
    padding: 5px;
}

.evergreen-img {
    margin-top: -50px;
    
}

.ever-img {
    margin-top: 100px;
}

#background-me {
    
    background-color: #d7263d;
    grid-column: 1/3;
    grid-row: 1/4;
    margin-right: 270px;
    border-radius: 50px;
    /*box-shadow: 5px 5px 5px 5px #d7263d;*/
    border: 10px double #fefae0;
    
    
}


@media screen and (max-width: 900px) {
    .home-grid, .music-grid, .about-me-grid {
        display: block;
        height: auto;
    }
    nav, footer {
        flex-direction: column;
    }
    nav a {
        display: block;
        padding: 15px;

    }
    .main-card, .left-card, .right-card {
        margin-top: 0;
        width: 80%;
        margin-left: 5%;
    }

    .remnant-card, #background, #text1, .pendulem-card, #background2, #text2, .reckoning-card, #background3, #text3, .rises-card, #background4, #text4, .generic-card, #background5, #text5, .jingle-card, #background6, #text6 {
        margin-top: 10px;
        width: 80%;
        margin-left: 5%;
    }

    audio {
        margin-left: -3%;
    }
    






    footer {
        margin-top: 25px;
    }
}