body {
    margin: 0;
}

h1, h2 {
    color: rgb(246, 244, 104);
    text-shadow: 4px 4px 8px rgb(149, 74, 4);
    font-family: Papyrus, Verdana, Tahoma, sans-serif;
    font-weight: bold;
    text-align: center;
}

h1 {
    font-size: 6rem;
    margin-bottom: 30vh;    
}

h2 {
    margin-top: 30vh;
    font-size: 3rem;
}

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(149, 74, 4, 0.6);
    transition: 0.3s;
    width: 30%;
    border-radius: 5px;
    color: rgb(96, 47, 1);
    background-color: #fa912f;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-left: 10%;
  }

.card img {
    border-radius: 5px 5px 0 0;
}
  
  /* On mouse-over, add a deeper shadow */
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(149, 74, 4, 0.8);
  }
  
  /* Add some padding inside the card container */
  .container {
    padding: 2px 16px;
  }

/* @media (max-width: 750px) {
    #background-video { display: none; }
    body {
      background: url("https://assets.codepen.io/6093409/river.jpg") no-repeat;
      background-size: cover;
    }
} */

#background-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

main {
    color: rgb(96, 47, 1);
    background-color: #fa912f;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.5rem;
    margin-top: 50vh;
    padding: 10px;
    position: relative;
    margin-left: 0;
    margin-right: 0;
  }