style.css

body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin: auto;
}

.Navigation_Bar {
    background-color: #7700ff8c;
    margin: 0%;
    text-align: center;
    padding: 2%;
} 

.top_box {
    text-align: left;
    margin: 2rem; 
}

.container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0px;
    margin: 0;
    
}

.content {
    font-size: larger;
    
}

.box1 {
    background-color: #ffffff;
    padding: 0.6rem;
    margin: 1rem 2rem 1rem 2rem;
    border-radius: 1rem;
    border-width: 4px ;
    border-style: solid;
    border-color: #7700ff8c;
}

img {
    float: left;
    padding: 5px;
    height: 15rem;
    width: 15rem;
}

.icon{
    float: right;
    color: green;
    size: 500px;
}


.tag1 {
    background-color: lightcoral;
    font-size:1rem;
    padding: 0.2rem;
    border-radius: 0.4rem;
}

.tag2 {
    background-color: lightblue;
    font-size: 1rem;
    padding: 0.2rem;
    border-radius: 0.4rem;
}

@media screen and  (max-width: 980px) {
    
    .box1 {
        flex-direction: column;
        padding: 0.6rem;
        margin: 5% 5%;
    }

    .icon {
        color: #6800df;
        size: 2rem;
    }

    .genre {
        float: left;
        text-align: left;
    }


    img {
        width: 100%;
        height: 100%; 
        padding: 0px;   
           
    }
}