@media screen and (max-width: 900px) {
    .topnav a:not(:first-child) {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
    .topnav.responsive {
        position: relative;
    }
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    #content {
        display: initial;
        grid-template-rows: initial;
        height: 100%;
    }
    #middle_content {
        display: initial;
        align-items: initial;
        grid-template-columns: initial;
        overflow: initial;
    }
    #tools {
        overflow-y: initial;
        scroll-behavior: initial;
        float: initial;
        width: initial;
        border: none;
        border-top: 1px solid black;
    }

    .container {
        margin: 0 auto;
        flex-direction: initial;
    }
    #base_hid
    {
        display: block;
        max-width: 900px;
    }
    #status_bar_container
    {
        margin-bottom: 70px;
    }

#base,#darks,#highlights,#cover_shadow,#bg, .roto,#color_mock,#rotos_gif {
    max-width:900px;
  }
  #cover
  {
      max-width: 900px;
  }
    #outside_container
    {
        padding: 5px;

    }
    #cassette_container {
        display: block;
        align-items: initial;
        justify-content: initial;
        height: auto;
    }

    .roto
    {
        /* (max width / mockup size)  *  roto size */
        /* max-width:377px; */
    }

    #roto_r
    {
    /* animation: spin_r_mobi 6s linear infinite; */
    }
    #roto_l
    {
    /* animation: spin_l_mobi 6s linear infinite; */
    }
    #sizer
    {
        max-width: initial;
    }

}