/* Reset some default browser styles */
body, h1, p, span {
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    font-size: 1rem; /* 1rem is equal to the root font size (typically 16px) */
}

footer {
    margin-top: 4em;
}

/* Adjusted image styles */
.albumart img {
    max-width: 100%; /* Ensure the image doesn't exceed the screen width */
    height: auto;
}

h1.pagetitle {
    color: #cc0000;
}

.copyright {
    font-size: x-small;
    color: #909090;
}

/* Flexbox for two-column layout with rem for gap */
div .album {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Responsive-friendly gap */
    margin-top: 1em;
}

.albumart {
    flex: 1; /* Take up equal width in two columns */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align contents to the top */
    align-self: flex-start; /* Align albumart to the top */
}

.albumdetails {
    flex: 2; /* Take up double width in two columns */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align contents to the top */
    align-self: flex-start; /* Align albumdetails to the top */
}