body {
  font-family: Arial, sans-serif;
  background-color: #2b69ab8c;
  margin: 0;
  padding: 20px;
}



div.install  {
  position:absolute;
  left:5dvw;
  top: 5dvh;
  background-color: white; 
  display: flex;
  flex-direction: column;
  border-radius: 1em;
  border: .4dvmin solid black;
  padding: 1em;
  margin: 1em;
  font-size: 2.4dvmin;
  box-shadow: 1dvmin 1dvmin 4dvmin rgba(0, 0, 0, 0.5);
  z-index: 8; 
}

  .install button {
    width: fit-content;
    min-width: 7em;
    height: 2em;
    background-color: #2b69ab;
    border: .5em double  #2b69ab;
    color: white;
    border: none;
    border-radius: 1em;
    cursor: pointer;
    font-size: 1em;
    margin: .5em;

  }

  .install button#no    {  background-color: #5b88b8;   }
  .install button:hover {  background-color: #1a4f7a;    }


div.identity { 
    height: fit-content;
    display: flex;
    height: auto;
    margin: 0.2em 0; 
    padding: .2em 0;
  
  }
    
  .install ol {
    width: 80%;
    margin: auto;
    padding: 0.3rem;
    list-style: outside;
    font-size: 2rem;
    font-weight:600;
  }
  .install li {
    position: relative ;
    text-decoration: none;
    left: 2em;
    font-size: 1.3rem;
    font-weight:400;
  }

.identity img {
  width: 4em;
  height:auto;
  margin: .2em .5em;
}
.identity div {
  display: flex;
  flex-direction: column;
  justify-content: space-around ;
  align-items: flex-start; 
  
}

.install h3     { color:rgb(175, 175, 175); font-size: 1.1em; margin:.125em; }
.identity .name {  font-size: 1.1em; margin:0; padding:0; font-weight:600; }
.identity .host {  font-size: 0.9em; margin:0; padding:0; font-weight:300;    }
.disclaimer     {  font-size: 0.9em; margin:0; padding:0; font-weight:300;  color:rgb(175, 175, 175);  }

div.screenshots {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  overflow: auto;
  align-items: center;
  width: 80dvw;
  height: auto;
  background-color: white; 
  margin:0;
  padding:0;
}
img.screenshot {
  width: auto;
  height: 1em;
}
img.screenshot.wide {
  width: auto;
  height: 10em;
  margin: .5em;
  border-radius: 1em;
  border: thin solid black;
}

img.screenshot.narrow {
  width: 12em;
  height: auto;
  margin: .5em;
  border-radius: 1em;
  border: thin solid black;
}

.instruction {
  /* z-index:100000000; */
  display: flex;
  width: fit-content;
  flex-direction: column;
  justify-content: space-around ;
  align-items: flex-start; 
  width:100%
 }
.instruction .step, 
.instruction .headline {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start; 
    width: 100%;
    font-size: 1.4em;
    font-weight: 600;
  }
  
  .instruction img {    image-rendering: pixelated;  }
  .instruction .headline img {  margin:0 2em 0 0;    max-width:3em; max-height: 3em;   }
  .instruction img.context   { margin: auto;         width: 90%;    max-height: 40dvh; }
  
.instruction .step {      
    background-color: rgb(197, 212, 213);  
    font-size: 1.1em;  
    font-weight: normal;
    padding: 1.5em;
    border: .1em dotted black;
   }

.instruction .step img {  
    margin:0 1.5em 0 0;    
    padding: .5em;
    border: thin solid black; 
    width: 3em;   
    height:3em; 
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 1em;
    display: block;
    background-color: rgb(255, 255, 255);
    box-shadow: .5dvmin .5dvmin 2dvmin rgba(0, 0, 0, 0.5);
   }
  







div.dbg {   opacity: 0.9; }  

p.debug {
  font-size: 1.5rem;
  color: white;
  background-color: #02162b;
  z-index: 99;
  margin: 0;
  padding: 2px;
  font-weight: 700; 
}