@charset "utf-8";
/* CSS Document */
body,html { height: 100svh;}
body {
      margin: 0;
      padding: 0;
      overflow: hidden; background-color: #000;
    }

    #image-container {
      display: flex;
      flex-wrap: wrap;
      width: 100vw;
      height: 100%;
      overflow: hidden;
    }

    .grid {
      box-sizing: border-box;
      transition: opacity 0.5s ease-in-out;
      position: relative;
    }
      .grid.none {width: 100%!important; background-image: none!important; height: auto!important; }

    .grid p {
      
      margin: 0;
      font-size: .5vw;
      color:rgba(0,255,10,1.00);
    }
      
      
      #start { width: 100%; height: 100svh; position: fixed; top;0; left: 0;}
      #start .inner { width: 100%; position: absolute; top:50%; left: 0; transform: translateY(-50%); text-align: center;}
      
      #input { width: 50vw; height: 10vw; overflow: hidden; margin: 0 auto; border: 2px solid rgba(0,255,10,1.00); color: rgba(0,255,10,1.00); border-radius: .3em; text-align: center; line-height: 10vw; font-family: Arial, Helvetica, "sans-serif"; position: relative; cursor: pointer;}
      #fileInput { width: 100%; height: 100%; opacity: 0; position:absolute; top: 0; left: 0; z-index: 1; cursor: pointer;}
      #input:before { content: "Select image"; font-size: 3.5vw;}
      #start h1 {color: rgba(0,255,10,1.00); margin: 0; margin-bottom: 1em; font-size: 14vw; font-family: Arial, Helvetica, "sans-serif"; font-weight: normal;}
      
      .start #start { display: none;}

.start #close { width: 60px; height: 60px; background-image: url("../img/stop.svg"); background-size: 20px; background-repeat: no-repeat; background-position: center; position: fixed; top:0; right: 0; cursor: pointer;}

@media (orientation: landscape) {
    #start h1 { font-size: 7vw;}
    
    #input { width: 25vw; height: 5vw; line-height: 5vw;}
      
      #input:before {  font-size: 1.75vw;}
}