body {
    margin: 0;     /* Removes default browser spacing around the page */
    height: 100vh;              /* full screen height */
    display: flex;     /* more flexible content, centers/stretches the content OR IDK BRO but I always use this when i wanna center things and if it works it works oki? oki*/
    justify-content: center;    /* horizontal center */
    align-items: center;        /* vertical center */
}

.menu {
    display: flex;    /* makes the buttons lined up in a row */
    gap: 43px;                /* space between buttons */
    z-index: 1;
    }

.button {
    background: #b30000;
    color: #460a02;
    font-family: 'Papyrus', fantasy; /* u can change this, see https://www.w3schools.com/css/css_font_websafe.asp, https://www.w3schools.com/css/css_font.asp or search for some fonts online*/
    font-size: 60px;
    padding: 26px 44px;     /* butotn size */
    text-decoration: none;    /* removes the underline since those are links */
    border: none;
    box-shadow: 0 0 15px black;
    transition: 0.3s ease;
    z-index: 1;
}

.button:hover {
            transform: scale(1.1) rotate(-2deg);
            background: #ff0000;
            box-shadow: 0 0 30px red;
        }

#bg-vid {
position: fixed;     /* fixes the vid to the screen so it doesnt move and scroll and shi*/
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;     /* sends the vid behind everything else */
}