html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;

    font-family: "ofelia-text", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4em;
}

ul, li{
    line-height: 2em;
}

:root{
    --color-red: rgb(247, 2, 2);
    --color-white: rgba(255, 255, 255, 1);
}

.grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.photo{
    border: solid var(--color-red) 3px;
    aspect-ratio: 1;
    width: 65%;
    border-radius: 8px;
    box-shadow: 0px 0px 16px #000, 0px 0px 16px #000;
}

.vid{
    border: solid var(--color-red) 3px;
    width: 70%;
    border-radius: 8px;
    box-shadow: 0px 0px 16px #000, 0px 0px 16px #000;
}

body{
    background-image: url("/img/bckgsmall.jpg");
}

.logo{
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(0px 0px 64px #000);
}

.gradient-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10vh;
  background: linear-gradient(to bottom, #000, transparent);
  z-index: -1;
  pointer-events: none;
}

/* Gradient at the bottom */
.gradient-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10vh;
  background: linear-gradient(to top, #000, transparent);
  z-index: -1;
  pointer-events: none;
}


.smoke-video {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: auto;
  z-index: -1; /* Put it behind your content */
  pointer-events: none;
}