@import url('https://fonts.googleapis.com/css2?family=Karla&family=Oswald:wght@700&display=swap');

html, body {
    font-family: 'Karla', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', Helvetica, sans-serif;
}

.gradient {
    /* fallback (could use .png alternatively) */
    background-color: rgba(0,0,0,0.3);
    /* SVG fallback for IE 9 (could be data URI, or could use filter) */
    background-image: url(fallback-gradient.svg);
    /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
    background-image: -webkit-gradient(linear, center bottom, center top, from(rgba(0,0,0,0.3)), to(rgba(0,0,0,0)));
    /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
    background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.3), rgba(255,255,255,0.4), rgba(255,255,255,1));
    /* Firefox 3.6 - 15 */
    background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.3), rgba(255,255,255,0.4), rgba(255,255,255,1));
    /* Opera 11.1 - 12 */
    background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.3), rgba(255,255,255,0.4), rgba(255,255,255,1));
    /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
    background-image: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.3), rgba(255,255,255,0.4), rgba(255,255,255,1));
    width: 100%;
    height: 80vh;
    position: absolute;
}


@media (max-width: 767.98px) {
}

@media (min-width: 768px) {
}