@font-face {
    font-family: "BebasNeue";
    src: url("/fonts/BebasNeue.otf");
}

body
{
    background-image: url("/img/bg.png");
    background-repeat: no-repeat;
    background-size: cover;


    font-family: BebasNeue;
    --primary-text: white;
    --secondary-text: #AAA;

    color: var(--primary-text);
}

main
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header
{
    font-size: 2.5em;
    border-bottom: 0.2em white solid;
    padding: 0 3em 0 3em;
    margin-bottom: 1em;
}

.header>h1
{
    margin: 0;
}

.catalog
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 60em;
    gap: 1em
}

.album
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.album>img
{
    width: 12em;
    height: 12em;
    border-radius: 1em;
}

.album>h1
{
    margin: 0.1em 0 0 0;
    font-size: 2.75em;
    font-weight: 100;
}

a
{
    color: inherit; /* blue colors for links too */
    text-decoration: inherit; /* no underline */
}