@media screen and (orientation: portrait) {

.subheading {
    font-weight: bold; 
    font-size: 3vh;
}

.loginClass {
    display: flex;
    flex-direction: column;
}

.label {
    font-family: "SuperHuman";
    font-size: min(2.4vh, 24px);
    width: 80px;
}

.loginlabel {
    text-align: left;
    font-size: min(3vh, 24px);
    width: min(90%, 400px);
}

.longlabel {
    font-family: "SuperHuman";
    font-size: min(2.4vh, 24px);
    width: 160px;
}


.value {
    font-size: min(2.4vh, 24px);
    font-weight: bold;
    font-family: "SuperHuman";
}

.realign {
    text-align: right;
}

.contentbutton {
    font-size: 2.4vh;
}

.menuitem {
    font-size: 2vh;
    background:lightblue;
}

.largetype {
    font-size: min(3vh, 4vw);
    color: ghostwhite;
    font-weight: 500; 
    font-family: "SuperHuman";
}

.mediumtype {
    font-size: min(2.55vh, 3.4vw);
    color: ghostwhite;
    font-weight: 500; 
    font-family: "SuperHuman";
}

.smalltype {
    font-size: min(1.8vh, 2.5vw);
    color: ghostwhite;
    font-weight: 500; 
    font-family: "SuperHuman";
}

.smallertype {
    font-size: min(1.2vh, 1.8vw);
    color: ghostwhite;
    font-weight: 500; 
    font-family: "SuperHuman";
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 33vw);
  grid-template-rows: repeat(3, 33vw);
  gap: 5px;
  border: 2px solid black;
  width: 100vw;
  position: absolute;
  top: 0%;
}

.gridCRT {
  display: grid;
  grid-template-columns: repeat(3, 33vw);
  grid-template-rows: repeat(3, 33vw);
  gap: 5px;
  border: 2px solid black;
  width: 100vw;
  position: absolute;
  top: 0%;
}

.img3x3 {
  width: 33vw;
  height: 33vw;
  top: 34vw;
  left: 34vw;
}

.puzzleText {
    font-size:3vh; 
    font-family: "SuperHuman";
    color: ghostwhite; 
    position: absolute; 
    text-align: center;
    top: 104vw;
    left: 0;
    width: 100%;
    transition: font-size .5s ease;
}

.puzzleText2 {
    font-size:3vh; 
    font-family: "SuperHuman";
    color: ghostwhite; 
    text-align: center;
    left: 0;
    width: 100%;
    transition: font-size .5s ease;
}

.orientflex {
    flex-direction: column;
}

}


.hide-landscape {
  display: flex; /* default */
}


@media (orientation: landscape) {

.hide-landscape {
    display: none;
}

}

@media screen and (orientation: landscape) {

.subheading {
    font-weight: bold; 
    font-size: 3vw;
}

.loginClass {
    display: flex;
    flex-direction: row;
}

.label {
    font-family: "SuperHuman";
    font-size: min(2.4vw, 24px);
    width: 80px;
}

.loginlabel {
    text-align: left;
    font-size: min(3vw, 24px);
    width: min(90%, 400px);
}

.longlabel {
    font-family: "SuperHuman";
    font-size: min(2.4vw, 24px);
    width: 160px;
}

.value {
    font-size: min(2.4vw, 24px);
    font-weight: bold;
    font-family: "SuperHuman";
}

.realign {
    text-align: left;
}

.contentbutton {
    font-size: 2.4vw;
}

.menuitem {
    font-size: min(2vw, 20px);
    background:lightblue;
}

.largetype {
    font-size: 2vh;
    color: ghostwhite;
    font-weight: 500; 
    font-family: "SuperHuman";
}

.mediumtype {
    font-size: 1.7vh;
    color: ghostwhite;
    font-weight: 500; 
    font-family: "SuperHuman";
}

.smalltype {
    font-size: 1.5vh;
    color: ghostwhite;
    font-weight: 500; 
    font-family: "SuperHuman";
}

.smallertype {
    font-size: 1vh;
    color: ghostwhite;
    font-weight: 500; 
    font-family: "SuperHuman";
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 32vh);
  grid-template-rows: repeat(3, 32vh);
  gap: 5px;
  border: 2px solid black;
  width: 100vh;
  position: absolute;
  top: 0%;
}

.gridCRT {
  display: grid;
  grid-template-columns: repeat(3, 32vh);
  grid-template-rows: repeat(3, 32vh);
  gap: 5px;
  border: 2px solid black;
  width: 100vh;
  position: absolute;
  top: 0%;
}

.img3x3 {
  width: 33vh;
  height: 33vh;
}

.puzzleText {
    font-size:3.5vh; 
    font-family: "SuperHuman";
    color: ghostwhite; 
    position: absolute; 
    text-align: center;
    left: 102vh;
    top: 50%;
}

.puzzleText2 {
    font-size:3.5vh; 
    font-family: "SuperHuman";
    color: ghostwhite; 
    text-align: center;
    left: 0;
    transition: font-size .5s ease;
}

}


.gridAGM {
  display: grid;
  grid-template-columns: repeat(9, 10vw);
  grid-template-rows: repeat(1, 11vw);
  gap: 4.5px;
  border: 2px solid black;
  width: 99vw;
  height: 48vw;
  position: absolute;
  top: 25%;
}

/*
.imgAGM {
  width: 10vw;
  height: 10vw;
  top: 45vh;
  left: 45vw;
}
*/

.gridBIT {
  display: grid;
  grid-template-columns: repeat(8, 12vw);
  grid-template-rows: repeat(1, 16vw);
  gap: 2.7px;
  border: 2px solid black;
  width: 99.3vw;
  height: 48vw;
  position: absolute;
  top: 25%;
}

h1 {
  color: navy;
  margin-left: 20px;
}

.heading {
    font-weight: bold; 
    font-size: 5vh;
}

.forminput {
    font-size: 20px;
    width: min(90%, 400px);
    height: 24px;
}

.textblock {
    font-size: 16px;
    font-weight:600
}

.loginbutton {
    width: min(90%, 400px);
    background-color: blue;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    height: 40px;
}

.qrscanner {
  max-width: 100%;
  width: 100%;
  min-height: 300px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qrscanner video, .qrPreviewVideo {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  max-height: 400px;
  border-radius: 6px;
  display: block !important;
}

.scanner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 2px dashed #dee2e6;
  position: relative;
}

.error_message {
    color: red; 
    background-color: white; 
    border: 1px solid red; 
    padding: 4px; 
    font-family: "SuperHuman" 
}

.clue-emphasis {
    color: #F6C451;
    font-weight: 600;
    display: inline-block;
}