@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);
    }

    #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: 2.5em 0;
        gap: 2rem;
        grid-template-columns: 25px 1.2fr 1fr 25px;
    }
    
    main h2 {
        grid-column: 1/5;
    }

    section {
        transition: .2s;
    }
    
    .card-styleguide {
        grid-column: 3/4;
        grid-row: 2/3;
    }

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

    .wireframe-container {
        display: grid;
        grid-template-columns: 1.4fr 3.6fr;
    }

    .mobile-view {
        grid-column: 1/2;
    }

    .larger-view {
        grid-column: 2/3;
    }

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