@media (max-height: 800px), (max-width: 800px) {
    #cryps {
        font-size: 50%;
        grid-template-columns: min-content 1fr;
        grid-template-rows: min-content 1fr;
        grid-template-areas:
          "tnav hd "
          "main main";
    }

    svg {
        height: 1em;
    }
    nav {
        opacity: 0;
        position: fixed;
        margin-top: 4em;
        pointer-events: none;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;

    }
    main {
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

    #toggle-nav { display: none; }

    #toggle-nav-label {
        grid-area: tnav;
        color: whitesmoke;
        line-height: 1.75em;
        font-size: 1.5em;
        display: block;
        cursor: pointer;
        margin-right: 0.5em;
    }

    #toggle-nav:checked  #toggle-nav-label {
      color: #ababab;
    }
    
    #toggle-nav:checked ~ nav {
        opacity: 1;
        pointer-events: auto;
    }
    #toggle-nav:checked ~ main {
        opacity: 0.1;
        pointer-events: none;
    }
}