@font-face {
    font-family: 'Quicksand';
    src: url('/fonts/Quicksand-Regular.ttf');
}

@font-face {
    font-family: 'Quicksand-Bold';
    src: url('/fonts/Quicksand-SemiBold.ttf');
}

html {
    --color-text: #222;
    --color-background: #faf9f2;
    --color-shadow: #b8b8b8;
}

body {
    background-color: var(--color-background);
    font-family: Quicksand, -apple-system, sans-serif;
}

main a {
    color: var(--color-text);
    text-decoration: underline;
}

main a:hover {
    opacity: .6;
    color: var(--color-text);
}

.navbar {
    background-color: var(--color-text);
}

main {
    margin-top: calc(56px + 1.5rem);
    margin-bottom: 2rem;
}

main h2 {
    margin-bottom: 1.5rem;
}

.bold {
    font-family: Quicksand-Bold;
}

.preview {
    text-align: center;
}

.preview .text {
    max-width: 400px;
    margin: 0 auto 2rem auto;
}

.preview .text p {
    margin-bottom: .25rem;
}

.preview video {
    width: 200px;
    max-width: 100%;
    box-shadow: 0px 0px 8px 2px var(--color-shadow);
}

.support {
    margin-top: 3rem;
    text-align: center;
}

.support img {
    height: 150px;
    border-radius: 50%;
}

.support .text {
    margin-top: 1rem;
}

.support .text p {
    margin-bottom: .25rem;
}