.app { display: block; } $text-color: white; $shadow-color: #1e1e1e; .now-playing-card { // max-width: 300px; text-shadow: 2px 2px 2px $shadow-color; .cover-art { box-shadow: 4px 4px 2px $shadow-color; margin-bottom: 15px; } img { // margin: 15px; } } .info-card { margin-top: 10px; margin-bottom: 10px; img { // margin: 15px; } } .chart-card { // width: 500px; margin-top: 10px; margin-bottom: 10px; // width: 100%; // max-width: max-content; } @media only screen and (min-width: 768px) { .app { display: flex; align-items: flex-start; flex-wrap: wrap; } .now-playing-card { position: fixed; z-index: 10; right: 20px; bottom: 20px; width: 250px; } } @media only screen and (min-width: 768px) { .info-card { min-width: 200px; max-width: 500px; } .chart-card { width: 500px; } } .spotify-logo { width: 21px; img { width: 21px; } } .lastfm-logo { width: 24px; img { width: 24px; } } .popularity-progress { margin-top: 10px; margin-bottom: 20px; box-shadow: 2px 2px 2px $shadow-color; } .subtle-link { color: $text-color; text-decoration: none; }