@media screen and (min-width: 780px) {
    

    /* Header */
    
    .container {
        min-width: 600px;
        max-width: 1024px;
        border: 0px black solid;
        margin:auto;
        position:relative;
    }
    
    header .title {
        z-index: 1;
        position: relative;
        height: var(--titleHeight);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    header .title img {
        max-width: 600px;
        min-width: 150px;
        margin-bottom:20px;
    
    }
    
    /* Navigation */
    
    nav.main {
        position: absolute;
        top: var(--titleHeight);
        background-color: rgb(255, 255, 255,.4);
        height: calc(100vh - var(--titleHeight) - var(--footerHeight));
        width: var(--desktopNavWidth);
        transition: all 1s;
        left:0px;
    }
    
    
    
    nav.main .toggle {
        display: none;
    
    }
    
    

    
    /* Main Area */
    
    .container {
        position: relative;
        height: 100vh;
        width: 100vw;
        display: flex;
        flex-direction: column;
        z-index:1;
       
    }
    
    
    main {
        margin-left: var(--desktopNavWidth);
        
        height: 100%;
      
        padding:20px;
    }
    
    
    /* Gallery */
    
    .gallery {
        user-select: none;
        list-style: none;
    
        padding:0px;
        margin:0px;
        display: flex;
        flex-wrap: wrap;
        gap:10px;
    }
    
    .gallery li {
      
        flex-grow: 1;
        display: flex;
        justify-content: center;
    
    
    }
  
    
    }