body {
    --primary-fore-color: black;
    --primary-back-color: white;

    background-color: var(--primary-back-color);
    color: var(--primary-fore-color);
    font-family: Arial, Helvetica, sans-serif;
    background-image: url("bg-pattern.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
i {
    font-style: italic;
}

main, .primary-header {
    max-width: 960px;
    margin: 0 auto;
    border: 3px solid var(--primary-fore-color);
    border-top: none;
    background-color: var(--primary-back-color);
}
.primary-header {
    border-bottom: none;
}

h1, h2, h3 {
    font-weight: 900;
    text-transform: uppercase;
}
ol {
    list-style-type: decimal;
    padding-left: 3em;
}
ul {
    list-style-type: square;
    padding-left: 3em;
}
span.price::after {
    content: "$";
}
a:visited, a {
    text-decoration: underline;
    color: #00dddd;
}


/*============================================
    primary header
============================================*/
.primary-header h1 {
    font-size: 32px;
    padding: 0.2em 0.5em 0.8em 0.5em;
}

/*===========================================
    Список альбомов
===========================================*/
.albums-list-header {
    font-weight: 900;
    font-size: 24px;
    text-align: center;
    border-top: 3px solid var(--primary-fore-color);
    border-bottom: 3px solid var(--primary-fore-color);
    padding: 0.5em;
    margin-bottom: 1em;
}
.albums-list th, .albums-list td {
    vertical-align:middle;
    text-align: center;
} 
.albums-list table {
    width: 100%;
}
.albums-list td:first-child {
    width: 80px;
}

.albums-list-cover img {
    border-radius: 3px;
    width: 72px;
}

/*============================================
    album info
============================================*/
.album-info {
    padding: 1em;
    font-weight: 500;
}
.album-info h1 {
    font-size: 32px;
    border-bottom: 6px solid var(--primary-fore-color);
}
.album-info h3 {
    font-size: 21px;
}

/* about album */

.about-album {
    padding-bottom: 2em;
    padding-top: 1em;
}

.about-album img {
    width: 90%;
    display: block;
    margin: 0 auto;
    margin-bottom: 1em;
    border-radius: 8px;
    border: 3px solid var(--primary-fore-color);
}

.about-album p {
    text-align: justify;
    text-indent: 2em;
}

@media screen and (min-width: 768px) {
    .about-album {
        display: table;
        table-layout: fixed;
        border-bottom: 2px solid var(--primary-fore-color);
        padding-bottom: 1em;
    }
    .about-album img, .about-album p {
        display: table-cell;
        vertical-align: middle;
    }
    .about-album p {
        width: 70%;
    }
}

.about-album, .track-list, .traks-in-stock {
    padding-top: 1em;
    padding-bottom: 1em;
}
.track-list ol, .traks-in-stock ul {
    padding-top: 0.5em;
    font-style: italic;
}
.traks-in-stock ul {
    text-transform: lowercase;
}

/*=========================================
    returnsection
=========================================*/
.return-section {
    padding: 2em;
    text-align: right;
}
.return-section a::before {
    content: "↩ ";
}