@font-face {
        font-family: 'SangBleuRepublic-Regular-WebTrial';
        src: url('../font/SangBleuRepublic-Regular-WebTrial.eot');
        /* IE9 Compat Modes */
        src: url('../font/SangBleuRepublic-Regular-WebTrial.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../font/SangBleuRepublic-Regular-WebTrial.woff2') format('woff2'), /* Super Modern Browsers */
        url('../font/SangBleuRepublic-Regular-WebTrial.woff') format('woff'), /* Pretty Modern Browsers */
        url('../font/SangBleuRepublic-Regular-WebTrial.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../font/SangBleuRepublic-Regular-WebTrial.svg') format('svg');
        /* Legacy iOS */
    }
    
    @font-face {
        font-family: 'Neue Haas Grotesk Display Pro';
        src: url('../font/NeueHaasDisplay-Roman.eot');
        /* IE9 Compat Modes */
        src: url('../font/NeueHaasDisplay-Roman.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../font/NeueHaasDisplay-Roman.woff2') format('woff2'), /* Super Modern Browsers */
        url('../font/NeueHaasDisplay-Roman.woff') format('woff'), /* Pretty Modern Browsers */
        url('../font/NeueHaasDisplay-Roman.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../font/NeueHaasDisplay-Roman.svg') format('svg');
        /* Legacy iOS */
    }
    
    *,
    *:after,
    *:before {
        margin: 0;
        padding: 0;
    }
    
    .grid-container {
        display: grid;
        align-items: center;
        grid-template-columns: 1fr 10fr 1fr;
        grid-template-rows: 1fr 10fr 1fr;
        grid-template-areas: "film   header  theatre" "gside    main    bside" "whatson   footer  about";
        height: 100%;
        width: 100%;
        justify-items: center;
        overflow: hidden;
    }
    
    body {
        position: relative;
        height: 100vh;
        background-color: #C8C8C8;
    }
    
    header {
        grid-area: header;
    }
    
    .logo {
        height: 2.75rem;
        width: 2.75rem;
        margin: auto;
        margin-bottom: 65%;
    }
    
    .logo:hover {
        height: 2.65rem;
        width: 2.65rem;
    }
    
    .film {
        grid-area: film;
        padding: 2.5em;
        margin-left: 0;
        margin-right: auto;
    }
    
    .film a {
        text-decoration: none;
        color: black;
    }
    
    .theatre {
        grid-area: theatre;
        padding: 2.5em;
        margin-left: auto;
        margin-right: 0;
    }
    
    .theatre a {
        text-decoration: none;
        color: black;
    }
    
    .gside {
        margin: auto;
        margin-left: -4rem;
        grid-area: gside;
    }
    
    .gside .gentle {
        transform: rotate(90deg);
    }
    
    main {
        grid-area: main;
        align-items: center;
    }
    
    .bside {
        margin: auto;
        margin-right: -3.5rem;
        grid-area: bside;
    }
    
    .bside .beasts {
        transform: rotate(-90deg);
    }
    
    .whatson {
        white-space: nowrap;
        grid-area: whatson;
        padding: 2.5em;
        margin-left: 0;
        margin-right: auto;
    }
    
    .whatson a {
        text-decoration: none;
        color: black;
    }
    
    footer {
        grid-area: footer;
    }
    
    .about {
        grid-area: about;
        padding: 2.5em;
        margin-left: auto;
        margin-right: 0;
    }
    
    .about a {
        text-decoration: none;
        color: black;
    }
    
    h1 {
        font-family: 'SangBleuRepublic-Regular-WebTrial';
        font-size: 3.5rem;
        font-weight: 550;
        color: black;
        text-decoration: none;
    }
    
    h2 {
        font-family: 'Neue Haas Grotesk Display Pro';
        font-size: 1.25rem;
        font-weight: 500;
        color: black;
        text-decoration: none;
    }
    
    a:hover {
        text-decoration: underline;
        font-size: 1.2rem;
    }
    
    @media (max-width: 500px) {
        .grid-container {
            display: grid;
            align-items: center;
            grid-template-columns: 1fr 10fr 1fr;
            grid-template-rows: 1fr 10fr 1fr;
            grid-template-areas: "film   header  theatre" "gside    main    bside" "whatson   footer  about";
            height: 100%;
            justify-items: center;
            /* overflow: hidden; */
        }
        .logo {
            position: relative;
            height: 2.5rem;
            width: 2.5rem;
            margin-bottom: 65%;
            right: 40%;
        }
        main {
            position: relative;
            display: block;
            grid-area: main main main;
            justify-items: center;
            align-items: center;
            padding: 15px;
        }
        main video {
            display: none;
        }
        .film {
            grid-area: film;
            padding-left: 1em;
            padding-top: 1em;
            margin-left: 0;
            /* margin-right: auto; */
        }
        .theatre {
            grid-area: theatre;
            padding-right: 1em;
            padding-top: 1em;
            margin-left: auto;
            margin-right: 0;
        }
        .gside {
            margin: auto;
            margin-left: -5rem;
            grid-area: gside;
        }
        .bside {
            margin: auto;
            margin-right: -4.5rem;
            grid-area: bside;
        }
        .whatson {
            white-space: nowrap;
            grid-area: whatson;
            padding-left: 1em;
            padding-bottom: 1em;
            margin-left: 0;
            margin-right: auto;
        }
        footer {
            grid-area: footer;
        }
        .about {
            grid-area: about;
            padding-right: 1em;
            padding-bottom: 1em;
            margin-left: auto;
            margin-right: 0;
        }
    }