@font-face {
    font-family: Impact qcvfdt;
    src: url('../fonts/impact.ttf') format('truetype');
}

html {
    scrollbar-color: rgba(125,11,180,0.8) rgba(7,154,165,0.8);
    scrollbar-width: thin;
}

body {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    font-family: Segoe UI Emoji, serif;
    background: linear-gradient(45deg, rgba(7,154,165,0.8) 0%, rgba(66,83,172,0.8) 50%, rgba(125,11,180,0.8) 100%);
}

ul {
    margin-top: 0;
    margin-bottom: 0;
}

a {
    text-decoration: none;
}

#bodyContainer {
    margin-top: 12vh;
}

.contentContainer {
    margin: 3vh 20vw;
    font-size: 1.3em;
}

audio {
    width: 100%;
}

#homeContainer, #creditsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.block {
    width: 60vw;
    margin: 20px 0;
    background: #fff;
    border-radius: 10px;
}

.block > .blockContent {
    padding: 50px;
}

.block > .blockTitle {
    background: #fff;
    font-size: 1.5em;
    font-family: Impact qcvfdt, serif;
    color: #4d4d4d;
    padding: 1vh 2vw;
    border-radius: 10px 10px 0 0;
}

@media only screen and (max-width: 500px) {
    body {
        font-size: 0.8em;
    }

    #bodyContainer {
        margin-top: 0;
    }

    .block {
        width: 90vw;
    }

    .block > .blockContent {
        padding: 10px;
    }

    .block > .blockTitle {
        font-size: 1em;
    }
}