/* Id is going to be for a specific element: One specific thing on the page While the class will change multiple elements of the page: Group of the same elements */ /*Class name == . tag == # normal tag == tag name (Default HTML tag )*/ body { margin: 0; padding: 0; min-height: 100vh; text-align: center; background-color: #ffffff; } #current_playlist { font-weight: bolder; } #playlist { display: flex; justify-content: center; align-items: center; flex-direction: column; } .playlist_item { size: 200px; } .playlist_items:hover { cursor: pointer; } #track_name { width: 100%; text-align: center; padding-top: 30px; padding-bottom: 15px; background-color: #f7f1f1; margin: 0; font-weight: bold; font-size: large; } #description { width: 100%; text-align: center; padding-top: 0px; padding-bottom: 30px; background-color: #f7f1f1; margin: 0; font-size: large; } .track_container { display: flex; flex-direction: row; } .playlist_items { margin: 0; padding: 0; padding-left: 10px; padding-right: 10px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .playlist_items .remove { height: 20px; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; margin: auto; } #ul_div { background-color: #CBB3BF; display: flex; justify-content: center; } li { float: left; margin-left: 25px; margin-right: 25px; } li a, .dropbtn { display: inline-block; font-weight: bold; color: #42181b; text-align: center; padding: 14px 16px; text-decoration: none; transition: all 0.2s ease; } li a:hover, .dropdown:hover .dropbtn { color: white; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; transition: all 0.2s ease; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; transition: all 0.2s ease; } .dropdown-content a:hover { background-color: #CBB3BF; } .dropdown:hover .dropdown-content { display: block; } footer { position: relative; width: 100%; background-color: #a5a19e; text-align: center; font-style: italic; padding-top: 10px; padding-bottom: 10px; color: white; margin-top: auto; }