*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  } 

:root {
    background-image: linear-gradient(rgb(255, 255, 255), rgb(252, 229, 249));
    --farbe1: #000b7b;
    --farbe2: #ce2f2f;
    --farbe3: #600b4e;
    color: var(--farbe1);
    /* filter: hue-rotate(200deg); */
    font-family: "Noto Sans Mono", monospace;
    text-align: center;
    width: 100%;
}

::selection {
  color: red;
  background: yellow;
}

h1 {
   font-size: 6ch;
}

a {
    text-decoration: none;
}
.bbox-1 {
    display: block;
    /* filter: hue-rotate(-80deg); */
    /* text-shadow: 7px 7px 4px rgba(24, 77, 192, 0.692); */
    /* border: 2px solid var(--farbe3); */
    /* border-radius: 7px; */
    /* box-shadow: 7px 7px 7px var(--farbe2); */
    margin: 3vw;
    padding: 0.5em;
    width: auto;  
  
}
.bbox-2 {
    display: block;
    /* filter: hue-rotate(-60deg); */
    /* text-shadow: 7px 7px 4px rgba(24, 77, 192, 0.692); */
    /* border: 2px solid var(--farbe3); */
    /* border-radius: 7px; */
    /* box-shadow: 7px 7px 7px var(--farbe2), */
    /* inset 10px 0px 26px 19px rgba(102,255,227,0.75)  ;   */
    margin: 3vw;
    padding: 0.5em;
    width: auto;  
    /* min-height: 10vh; */
}    
/* div.bbox-2 p {
   padding-top: 0.5rem; 

} */

.flex {
  display: flex;
  /* justify-content: space-evenly; */
  justify-content: center;
  margin: 5vh;
  font-size: 1.3rem;
  /* text-shadow: 23px 3px 12px #A42995, 
                 5px 3px 4px #A42995; */

}

.flex div {
  width: flex;
  max-width: 100vw;
  margin: 4vw;
  text-align: center;
}


.gridi {
  padding: 13px;
   display: grid;
   grid-template-columns: auto auto auto auto;
   
   grid-auto-flow: row; /* or 'row', 'row dense', 'column dense' */
   gap: 13px;
   justify-items:center;
   align-items: center;
   
 }
 
.portrait {
  padding-top: 10%;
  padding-bottom: 10%;
  /* filter: hue-rotate(-140deg); */
  max-height: 15vh;
  max-width: 13vw;
}

.landscape {
  /* filter: hue-rotate(-140deg); */
  max-height: 15vh;
  max-width: 13vh;
}

@media only screen and (min-width: 900px) {
  .gridi {
    padding: 70px;
  }
}

@media only screen and (max-width: 600px) {
  .gridi {
    grid-template-columns: auto auto;
    grid-auto-flow: row;

  }
}