@charset "UTF-8";
:root {
    --colorBackground: #0c1821;
    --colorForeground: #ccc9dc;
    --colorAccent: #5F7A8F;
    --colorLight: #1b2a41;
    --colorDark: #000000;
    /* color palette: https://coolors.co/palette/773344-e3b5a4-f5e9e2-0b0014-d44d5c */
}
@font-face {
    font-family: "Chopin Script";
    src: url("chopinscript.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--colorBackground);
    color: var(--colorForeground);
    font-family: "Cause", handwriting, cursive, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    a:link, a:visited {
        color: var(--colorAccent);
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }
}

h1 {
    font-family: "Chopin Script";
    color: var(--colorAccent);
    font-size: 71px;
    text-align: right;
    margin: 31px;
    margin-bottom: 13px;
    a:link, a:visited, a:hover {
        color: var(--colorAccent);
        text-decoration: none;
    }
}

h2 {
    font-family: "Chopin Script";
    color: var(--colorAccent);
    font-size: 50px;
    text-align: left;
    margin: 0;
    margin-top: 31px;
    margin-bottom: 13px;
}

h3 {
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    color: inherit;
    text-align: right;
    margin: 31px;
    margin-top: 0;
    a:link, a:visited, a:hover {
        color: var(--colorForeground);
        font-weight: 600;
    }
}

.content {
    width: min(80vw, 1000px);
    margin: 13px auto;
}

.opusMenu {
    margin: 0 auto;
    width: fit-content;
    display: block;
}

.opusMenu img {
    display: inline;
    margin: 3.14%;
    width: 25%;
}

.opusMenu img:hover {
    cursor: pointer;
    transform: scale(1.314);
}

.listing {
    a:link, a:visited {
        color: var(--colorForeground);
    }
    a:hover {
        color: var(--colorAccent);
    }
}

.music {
    width: min(80vw, 1000px);
    height: 40px;
    margin: 13px auto;
    border-radius: 3px;
    border: none;
    outline: none;
}

iframe {
    border: none;
    border-radius: 3px;
    outline: none;
}