@font-face{
  font-family: Press-Start-2P-Regular;
  src: url("/Fonts/PressStart2P-Regular.ttf") format("truetype");
}
html {
  position: relative;
  height: 100vh;
  height: 100svh;
  width: 100vw;
  margin: 0;
  padding: 0;
  touch-action: manipulation
}

html, body {
  /* Disables pull-to-refresh and glow/bounce effects */
  overscroll-behavior-y: contain; 
}

p{
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Arial Black', 'Arial', sans-serif !important;
  background-color: #2d2a26;
}

#mainContainer{
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  position: absolute;
  overflow: hidden;
  view-transition-name: security-reveal;
  background: url("/Images/background.jpg");
  background-size: cover;
}

.securityPanel{
  position: relative;
  height: 85%;
  margin: auto;
}

.panelBorder{
  width: 100%;
  height: 100%;
}

.scannerContainer{
  width: 80%;
  position: relative;
}

.scanImg{
  width: 100%;
}

.panelContainer{
  width: 76%;
  position: absolute;
  top: 15%;
  height: 69%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
}

.title{
  width: 70%;
}

.scan-line-el {
  position: absolute;
  left: 16px;
  right: 16px;
  height: 3px;
  background: #00ff50;
  box-shadow: 0 0 10px #00ff50, 0 0 20px #00ff50, 0 0 30px rgba(0, 255, 80, 0.5);
  z-index: 2;
  pointer-events: none;
}

.scan-line {
  animation: scanLine 2s ease-in-out infinite;
}

.doorCodeContainer{
  width: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

#doorCode{
  background: transparent;
  border: 0;
  outline: 0;
  border-bottom: 2px solid #58585A;
  color: #58585A;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-size: 1rem;
}

.enterMessage{
  width: 65%;
  margin-top: 5%;
}

#defaultPanelContainer{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

#correctContainer{
  display: none;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  width: 100%;
}

.correctSymbol{
  width: 30%;
}

.tapToReturn{
  width: 25%;
}

.errorContainer{
  position: absolute;
  top: 8.8%;
  width: 76.7%;
  height: 81.2%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(103, 57, 57, 0.84)
}

.errorMessage{
  width:80%;
}

@media screen and (max-width: 650px){
  .securityPanel{
    min-width: 300px;
    width: 100%;
    height: unset;
  }
}

@keyframes scanLine {
      0% {
          top: 8px;
      }
      50% {
          top: calc(100% - 8px);
      }
      100% {
          top: 8px;
      }
    }


.screen-shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}


@keyframes shake {
      0%   { transform: translateX(0); }
      10%  { transform: translateX(-12px); }
      20%  { transform: translateX(12px); }
      30%  { transform: translateX(-10px); }
      40%  { transform: translateX(10px); }
      50%  { transform: translateX(-8px); }
      60%  { transform: translateX(8px); }
      70%  { transform: translateX(-5px); }
      80%  { transform: translateX(5px); }
      90%  { transform: translateX(-2px); }
      100% { transform: translateX(0); }
    }

.rotateWarning{
  display: none;
}

@media (pointer: coarse) and (orientation: landscape){
  .rotateWarning{
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      width: 100vw;
      width: 100svw;
      height: 100vh;
      height: 100svh;
      background-color: black;
      z-index: 999999;
      color: white;
      text-transform: uppercase;
    }
}
    
/*
.hazardStripes {
  height: 7vh;
  background: repeating-linear-gradient(-45deg, #f5c400, #f5c400 22px, #1a1a1a 22px, #1a1a1a 44px);
  width: 100vw;
  flex-shrink: 0;
}

.securityPanel{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  flex: 1;
  background-color: #2d2a26;
}

.title{
  line-height: 1;
  text-transform: uppercase;  
  font-size: 10vw;
  color: white;
}

.correctText{
  color: rgb(0, 255, 80);
  text-shadow: rgba(0, 255, 80, 0.7) 0px 0px 30px, rgba(0, 255, 80, 0.4) 0px 0px 60px; 
}

.correctSymbol{
  width: 40vw;
  padding-top: 10%;
}

#scrollLockContainer{
  width: 90%;
  
  display: flex;
  justify-content: center;
}

.lockContainer{
  width: 15%;
  margin: 2.5%;
  display: flex;
  flex-direction: column;
  align-items: center;*/
  /* Prevents pull-to-refresh and page bouncing when swiping on the locks */
   /* overscroll-behavior-y: contain; */
    
    /* Optional: Prevents the user from accidentally highlighting text/letters while swiping */
   /* user-select: none; 
    -webkit-user-select: none;
} */

/*
.lock{
  background-color: #f5c400;
  padding: 3vw;  
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2rem, 5vw, 4rem);
}

.triangleUp {
    width: 0;
    height: 0;
    border-left: 3vw solid transparent; 
   /* border-right: 3vw solid transparent; 
    border-bottom: 3vw solid white; 
    margin-bottom: 15%;
} 

.triangleDown {
    width: 0;
    height: 0;
    border-left: 3vw solid transparent;
    border-right: 3vw solid transparent; 
    border-bottom: 3vw solid white;
    transform: rotate(180deg);
    margin-top: 15%;
}

#unlockBtn{
  background-color: green;
  color: white;
  border: none;
  padding: 1vw 2vw;
  font-size: clamp(1rem, 3vw, 2rem);
  cursor: pointer;
}


::view-transition-old(security-reveal) {
  z-index: 1;
  animation: slideOut 2s ease-in-out forwards;
}


::view-transition-new(security-reveal) {
  animation: none;
  z-index: -1;
}

@keyframes slideOut {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}



.screen-shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}


@keyframes shake {
      0%   { transform: translateX(0); }
      10%  { transform: translateX(-12px); }
      20%  { transform: translateX(12px); }
      30%  { transform: translateX(-10px); }
      40%  { transform: translateX(10px); }
      50%  { transform: translateX(-8px); }
      60%  { transform: translateX(8px); }
      70%  { transform: translateX(-5px); }
      80%  { transform: translateX(5px); }
      90%  { transform: translateX(-2px); }
      100% { transform: translateX(0); }
    }

    .redFlash{
      display:none;
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: rgba(255, 0, 0, 0.5);
      z-index: 5;
    }

    .scanBarcodeContainer{
      position: relative;
      border: 4px solid #f5c400;
      padding: 20px 24px 18px;
    }

    .scanBarcodeContainer p{
          color: white;
          text-align: center;
          font-size: clamp(16px, 4vw, 22px);
          letter-spacing: 0.2em;
          text-transform: uppercase;
    }

    .scanBarcodeContainer img{
      width: 60vw;
      padding-top: 2%;
      padding-bottom: 2%;
    }

    .scan-line-el {
      position: absolute;
      left: 16px;
      right: 16px;
      height: 3px;
      background: #00ff50;
      box-shadow: 0 0 10px #00ff50, 0 0 20px #00ff50, 0 0 30px rgba(0, 255, 80, 0.5);
      z-index: 2;
      pointer-events: none;
    }

    .scan-line {
      animation: scanLine 2s ease-in-out infinite;
    }

    #doorCode{
      font-family: Press-Start-2P-Regular;
      width: 75vw;
      max-width: 600px;
      background-color: #2d2a26;
      outline: 0;
      border: 0;
      border-bottom: 2px solid gray;
      color: white;
      text-transform: uppercase;
    }

    @keyframes scanLine {
      0% {
          top: 8px;
      }
      50% {
          top: calc(100% - 8px);
      }
      100% {
          top: 8px;
      }
    }

    @media screen and (min-width: 768px){
      .title{
        font-size: 50px;
      }

      .scanBarcodeContainer img{
        width: 250px;
      }

      .correctSymbol{
        width: 250px;
      }
      
    }