body {

    background-image: url(../assets/red-rocks.jpg);

    background-image: url("../assets/red-rocks.jpg");

    background-size: cover;
}

.title-bar {
    text-align: center;
    border: solid black 3px;
    height: 20%;
    width: 100%;
    font-size: 45px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.input-field {
    margin: 10px;
    
}

#search {
    font-size: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

    
    

}

/* change font to black so it can be seen */
::placeholder {

    font: black;

    color: black;
}

#fetch-button {
    background-color: rgb(250, 117, 8);
    border-radius: 30px;
}

.content {
margin-left: 100px;
}

.top-songs {
    display: flex;
    flex-wrap: wrap;
    border: solid black 3px;
    border-radius: 30px;
    margin-right: 10px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.lyrics-section {
    display: flex;
    flex-wrap: wrap;
    border: solid black 3px;
    border-radius: 30px;
    margin-right: 10px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.concert-dates {
    display: flex;
    flex-wrap: wrap;
    border: solid black 3px;
    border-radius: 30px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.video-section {
    display: block !important;
    border: dotted black 1px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


.event-Place{
    font-weight: bolder;
}
.eventTicket{
    background-image: url("../assets/ticket.jpg");
    background-size: cover;
    text-decoration: underline;
    color: rgb(250, 117, 8)}

.hearItNow{
    text-decoration: underline;
    color: rgb(250, 117, 8)
}
.playBtn{
    max-width: 20px;
}

  

@media screen and (max-width: 1420px) {
    .top-songs, .lyrics-section, .concert-dates, .video-section {flex-direction: row;}} 


@media screen and (max-width: 735px) {
    .top-songs, .lyrics-section, .concert-dates, .video-section {width: 100%;}}