@media screen and (min-width: 700px) {
    html {
        display: table;
        width: 100%;
        height: 100%;
    }
    
    body {
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        height: 100%;
    }

    #content {
        max-width: 900px;
    }

    header {
        filter: drop-shadow(0px 0px 15px #000);
    }

    #navbar {
        height: 48px;
    }

    #menubutton {
        display: none;
    }
    nav {
        display: flex;
        flex-direction: row;
    }

    /* In case viewport width changes while menu button is clicked */
    .opennav {
        display: flex;
        flex-direction: row;
    }
    /* ------ */
    
    nav a {
        display: inline-flex;
        padding: .5em 1.6em;
    }
    
    main {
        padding: 0 0 2.5em 0;
        gap: 1.5em 1em;
        grid-template-columns: 25px 1.5fr 1fr 25px;
    }

    .hero {
        grid-column: 1/5;
        max-width: 900px;
    }

    .hero-img {
        max-width: 900px;
    }

    .temple-label {
        font-size: 2.5rem;
        padding: 1.5rem;
    }
    
    main h2 {
        grid-column: 1/5;
        grid-row: 2/3;
    }

    section {
        transition: .2s;
    }

    section:hover {
        filter: drop-shadow(0px 0px 3px #354F52);
        transition: .2s;
    }

    .card-activity {
        grid-column: 2/3;
        grid-row: 3/4;
    }
    
    .card-info {
        grid-column: 3/4;
        grid-row: 3/4;
    }

    .card-map {
        grid-column: 2/4;
        grid-row: 4/5;
    }

    footer {
        filter: drop-shadow(0px 0px 15px #000);
    }
}