@import "big.css";
@import "reset.css";
@import "fonts.css";
/* @import "typography.css"; */
@import "variables-1.css";
@import "nav.css";
@import "hero.css";
@import "section.css";
@import "getinvolved.css";
@import "sponsors.css";
@import "memories.css";
@import "illustration.css";
@import "gallery.css";
@import "footer.css";


body {
    font-family: var(--body-font);
    font-size: 1.6rem;
    background-color: var(--color-white);
    counter-reset: inc;


    /* Means that any boxes don't change size based on padding and margin. i.e. the width and height properties are exactly what you get. */
}


/* Container for the video */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

/* Iframe styling */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    border: 0;
}