@font-face {
            font-family: "jost";
            src: url("/font");
        }

        @font-face {
            font-family: "jost";
            src: url("/font");
            font-style: italic;
        }

        nav {
            border-bottom: 1px solid #e6e2d6;
        }

        video {
            border: 1px solid #e6e2d6;
        }

        input {
            border: none;
            background-color: #e6e2d6;
        }

        h1,
        h2,
        h3,
        h4,
        p,
        label,
        a {
            font-family: "jost";
            color: #e6e2d6
        }

        hr {
            color: #e6e2d6
        }

        html {
            background-color: #0f1214;
        }

        .crumbs ol {
          list-style-type: none;
          padding-left: 0;
        }

        .crumb {
          display: inline-block;
        }

        .crumb a::after {
          display: inline-block;
          color: black;
          content: "|";
          font-size: 80%;
          font-weight: bold;
          padding: 0 3px;
        }

        .videoGrid {
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 3rem;
            overflow-y: scroll;
            height: 85vh;
            width: 100%
        }

        .video {
            border-radius: 5px; 
            height: 85%; 
            width: 80%; 
            display: block; 
            margin: 0 auto
        }

        @media (max-width: 1500px) {
            .videoGrid {
                grid-template-columns: 1fr;
            }

            .video {
                border-radius: 5px; 
                height: 85%; 
                width: 19rem; 
                display: block; 
                margin: 0 auto
            }
        }

        @media (min-width: 2133) {
            .videoGrid {
                grid-template-columns: 1fr 1fr 1fr;
            }
        }