@font-face {
    font-family: "Linkin Park";
    src: url("/.old/1.0/fonts/Music-Realm/Rock/linkinpark_chase/linkinpark.ttf");
}
@font-face {
    font-family: "Ghost BC";
    src: url("/.old/1.0/fonts/Music-Realm/Rock/single_ghost/SingleGhost\ regular.ttf");
}
@font-face {
    font-family: "Rammstein";
    src: url("/.old/1.0/fonts/Music-Realm/Rock/rammstein/rammstein.ttf");
}
@font-face {
    font-family: "Powerman 5000";
    src: url("/.old/1.0/fonts/Music-Realm/Rock/pm5k/Will-Robinson/Will\ Robinson.ttf");
}
@font-face {
    font-family: "Rob Zombie";
    src: url("/.old/1.0/fonts/Music-Realm/Rock/rob-zombie/Nexpresei.ttf");
}
@font-face {
    font-family: "Foo Fighters";
    src: url("/.old/1.0/fonts/Music-Realm/Rock/foo-fighters/boxer-script-jf.ttf");
}
@font-face {
    font-family: "The White Stripes";
    src: url("/.old/1.0/fonts/Music-Realm/Rock/the_white-stripes/Marquee-Moon.otf");
}
@font-face {
    font-family: "Extremoduro";
    src: url("/.old/1.0/fonts/Music-Realm/Rock/extremoduro/FenwayParkJF\ Regular.ttf");
}
@font-face {
    font-family: "The Ramones";
    src: url("/.old/1.0/fonts/Music-Realm/Rock/the-ramones/FranklinGothic.ttf");
}
@font-face {
    font-family: "El Cuarteto de Nos";
    src: url("/.old/1.0/fonts/Music-Realm/Rock/el_cuarteto_de_nos/Conduit-ITC-Bold/Conduit-ITC-Bold.otf");
}
@font-face {
    font-family: "Sum 41";
    src: url("/.old/1.0/fonts/Music-Realm/Rock/sum_41/ITC-Machine-Std-Bold/ITC\ Machine\ Std\ Bold.otf");
}
@font-face {
    font-family: "Green Day";
    src: url("/.old/1.0/fonts/Music-Realm/Rock/green-day/break-down.ttf");
}
/* @font-face {
    font-family: "The Offspring";
    src: url("/.old/1.0/fonts/Music-Realm/Rock/the_offspring/Bonzc.ttf");
} */

html{
    background-color: black;
    color: white;
    >body{
        >header{
            text-align: center;
        }
        >main{
            >section{
                /* border: 5px solid white; */
                article{
                    margin: 100px 0px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    align-items: center;
                    .fav, .fav>*{
                        color: greenyellow;
                        list-style: url("/.old/1.0/img/svg/stars.svg") inside;
                    }
                    a{
                        color: red
                    }
                    img{
                        height: 20%;
                        width: 20%;
                        border: 5px solid red;
                        border-bottom: 5px solid white;
                        border-right: 5px solid white;
                    }
                    ul{
                        list-style: url("/.old/1.0/img/svg/music-note.svg") inside;
                        background-color: grey;
                        padding: 30px;
                        border: 5px solid white;
                        border-bottom: 5px solid red;
                        border-right: 5px solid red;
                    }
                    /* Hover Thing */
                    ul:hover{
                        background-color: rgb(158, 158, 158);
                        border: 5px solid rgb(255, 210, 210);
                        border-bottom: 5px solid rgb(246, 68, 68);
                        border-right: 5px solid rgb(246, 68, 68);
                        border-radius: 25px;
                    }
                    img:hover{
                        border: 5px solid white;
                        border-bottom: 5px solid red;
                        border-right: 5px solid red;
                        border-radius: 25px;
                    }
                }
                article:nth-child(odd){
                    display: flex;
                    flex-direction: row-reverse;
                }
                
                #linkin_park ul:hover .fav{
                    font-family: "Linkin Park";
                    font-weight: lighter;
                }
                #ghost ul:hover .fav{
                    font-family: "Ghost BC";
                    letter-spacing: 1px;
                }
                #rammstein ul:hover .fav{
                    font-family: "Rammstein";
                    letter-spacing: 1px;
                }
                #pm5k ul:hover .fav{
                    font-family: "Powerman 5000";
                    letter-spacing: 1px;
                }
                #rob_zombie ul:hover .fav{
                    font-family: "Rob Zombie";
                }
                #foo_fighters ul:hover .fav{
                    font-family: "Foo Fighters";
                }
                #the_white_stripes ul:hover .fav{
                    font-family: "The White Stripes";
                    letter-spacing: 1px;
                }
                #extremoduro ul:hover .fav{
                    font-family: "Extremoduro";
                }
                #the_ramones ul:hover .fav{
                    font-family: "The Ramones";
                }
                
                #el_cuarteto_de_nos ul:hover .fav{
                    font-family: "El Cuarteto de Nos";
                }
                #sum_41 ul:hover .fav{
                    font-family: "Sum 41";
                    letter-spacing: 1px;
                }
                #green_day ul:hover .fav{
                    font-family: "Green Day";
                }
                #the_offspring ul:hover .fav{
                    font-family: "The Offspring";
                }
                

            }
        }
        >footer{
            a img{
                width: 5%;
                height: 10%;
                position: relative;
                left: 45%;
            }
        }
    }
}