:root { --max-width: 1210vw; }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      /* html { */
  /* scroll-behavior: smooth; */
/* } */

    body {
      height: 100%;
      max-width: 100vw;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system,  Roboto, Arial, sans-serif;
      color: #f2f2f2;  
      background: #0b0b0b;
      background-image: linear-gradient(to right, lightgreen, skyblue);           
  background: -webkit-linear-gradient(90deg, #58A8FB, #465683);
background: linear-gradient(90deg, #58A8FB, #465683);
     scroll-behavior: inherit;
    }
    header {
      position: sticky;
      top: 0;
      background: rgba(0,0,0,.4);
      backdrop-filter: blur(4px);
      padding: 8px 12px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      z-index: 10;
    }
    

 
    footer {
      margin-top: 70px;      
      height: auto;
      min-height: 6em; 
      width: 100%;
      display:block;     
      position: relative;
      bottom: 0;
      padding: 12px;     
      border-top: 2px solid rgba(189 189 189);    
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 12px;
     align-items: center;
     justify-content: space-between; 
    }  
    @media screen and (max-width: 720px) {
      footer {            
          -webkit-flex-direction: column;         
           flex-direction: column;
           margin: 70px auto 0 auto;
            }
     footer div {
            display: block;               
            margin: 10px auto;
           }
        }
   footer a {
     color: inherit; 
      text-shadow: 0 1px 1px solid black; 
      }
    .wrap { max-width: var(--max-width); }
    .grid {
      display: grid;
      gap: 12px;
    }
    .photocard img {
      width: min(100%,1200px);
      height: fit-content;      
      height: auto;
      display: block;
      margin: 10px auto;     
    }
     .photocard img[data-fx] {
	 filter: blur(0.2em);
     }
   .photocard img {
	filter: blur(0em);
	transition: filter 0.2s;    
     }
    
    #sentinel {        
    background-image: -webkit-radial-gradient(#a7b2b8, rgba(167, 178, 184, 0) 50%),-webkit-linear-gradient(left top, #3d7195, #a7b2b8, #2b2e34);  
  background-image: radial-gradient(#a7b2b8, rgba(167, 178, 184, 0) 50%), linear-gradient(to right bottom, #3d7195, #a7b2b8, #2b2e34);      
       } 
    #panel {
      opacity: .4;
    }
  #info { 
     text-transform: uppercase;
     font-family: 'Droid Sans', sans-serif;
     font-size: 18px;
     font-weight: bolder;
    text-shadow:
    1px 0px 0 #dddcdc91, 
    -1px -1px 0 #bcbcbc9c, 
    1px -1px 0 #ee282882, 
    -1px 1px 0 #f10707a3, 
    1px 1px 0 #f0070778;
}
  @media (orientation: landscape) {
    .photocard img {
    height: 100%;
    object-fit: cover;
  }}
  
/*  #boto {
  width: 150px;
  font-size: 1.1rem;
  line-height: 2;
  border-radius: 10px;
  border: none;
  background-image: linear-gradient(to bottom right, #777777, #dddddd);
  box-shadow:
    1px 1px 1px black,
    inset 2px 3px 5px rgb(0 0 0 / 30%),
    inset -2px -3px 5px rgb(255 255 255 / 50%);
}

#boto:focus,
#boto:hover {
  background-image: linear-gradient(to bottom right, #888888, #eeeeee);
}

#boto:active {
  box-shadow:
    inset 2px 2px 1px black,
    inset 2px 3px 5px rgb(0 0 0 / 30%),
    inset -2px -3px 5px rgb(255 255 255 / 50%);
} */

   footer div ul { 
  list-style-type: none; 
  font-size: .07em; 
      display: inline;
    list-style-type: none;
    
  } 
    footer div li {
margin: 0;
padding: 0;
display: inline;
}