/* *{
  border: 1px red solid;
} */

:root {
  --highlight-yellow: #f9e87b;   /* DONE */
  --white: #f0fcff;  /* DONE */
  --white-transparent: rgba(240, 252, 255, 0.1);  /*  */
  --light-blue: #afc1d3;  /* DONE */
  --bright-blue: #759daa;  /* DONE */
  --blue: #42708c;  /* DONE */
  --blue-transparent-light: rgba(66, 112, 140, 0.2);
  --blue-transparent: rgba(66, 112, 140, 0.5);  /*  */
  --green-gray: #768c82;  /* DONE */
  --light-green-gray: #919c97;  /* DONE */
  --dark-green-gray: #5a6861;  /* DONE */
  --darker-green-gray: #363a38;  /* DONE */
  --dark-red: #7d2324;  /* DONE */
  --medium-red: #990003;  /* DONE */
  --red: #cb1a1a;  /*  */
  --red-transparent: rgba(203, 26, 26, 0.4);  /*  */
  --bright-red: #ff2b2b;/* DONE */
  --bright-red-transparent: rgba(255, 0, 0, 0.9);/* DONE */
  --black: #221f20;  /* DONE */
  --black-transparent: rgba(35, 31, 32, 0.3); 
  --black-transparent-dark: rgba(0, 0, 0, 0.75);/*  */
  --green: #2e583f;  /* DONE */
  --green-transparent: rgba(46, 88, 63, 0.3);  /*  */
  --light-green: #5e9775;  /* DONE */
  --light-green-transparent: rgba(94, 151, 117, 0.5)  /*  */
  --lighter-green: #79e2a3;  /* DONE */
  --yellow: #ec9140;  /* DONE */
  --dark-yellow: #99592d;  /* DONE */
  --cream: #f1ead6;  /* DONE */
  --dark-cream: #ccc6b4;/* DONE */
  --dark-cream-transparent: rgb(222, 215, 192, 0.5);
  --beige: #b6ad90;  /* DONE */
  --purple: purple;  /* DONE */

  --videotext: "pf-videotext", sans-serif;
  --pixelscript: "pf-pixelscript", sans-serif;
}


html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  /* ONLY OFF FOR TESTING */
  overflow: hidden;
}

/* #scene-1-logo {
  opacity: 1;
  transition: opacity 0.4s ease;
} */

.typeJsWrapper{
  height: 50vh;
  height: 50dvh;
  max-width: 90vw;
}

.typeJsText{
  font-size: 30px;
}

.typeJsWrapper button{
  background: none;
  border: none;
  color: var(--bright-blue);
  font-family: var(--videotext);
  
}

.typeJsWrapper button:hover{
  color: var(--white);
  text-decoration: underline;
  transition: .2s
}

.redacted {
  font-family: "Redacted", system-ui;
  font-weight: 400;
  font-style: normal;
  opacity: 0.5;

  &.larger {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
  z-index: 100;
  background-color: var(--black);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 10%;
  transition: opacity 0.6s ease;
}

.scene {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--black);
  color: var(--bright-blue);
  font-family: var(--videotext);
}

#terminal-scene {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  transition: .2s;
  justify-content: center;

}

.gz4c{
  text-align: center;
  padding-top: 20px;
  width: 80%;
}

.gz4c a{
  text-decoration: none;
  color: var(--bright-blue);
}

.results {
  display: none;
  transition: .2s;
}

.logo {
  width: 20vw;
  max-width: 500px;
}

#pay-terminal {
  height: 80vh;
  height: 80dvh;
  max-width: 95vw;
}

#phone {
  height: 80vh;
  height: 80dvh;
  max-width: 95vw;
}

#ipad{
  height: 80vh;
  height: 80dvh;
  max-width: 95vw;
}

#computer{
  height: 80vh;
  height: 80dvh;
  max-width: 95vw;
}


text>* {
  font-family: var(--videotext);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pointer {
  cursor: pointer;
}

.pay-terminal-button {
  cursor: pointer;

  >rect {
    opacity: 0
  }

  >text {
    fill: var(--black) !important;
  }
}

.pay-terminal-button:hover {
  >rect {
    opacity: 1;
    fill: var(--black) !important;
  }

  >text {
    fill: var(--bright-blue) !important;
  }
}

#google-docs-scene {
  position: relative;
  justify-content: space-between;
  background-color: var(--black);
}

#docs-header {
  position: sticky;
  width: 100%;
  top: 0px;
  left: 0;
  box-shadow: 0 4px 6px var(--dark-cream-transparent);
  z-index: 5;
  background-color: var(--blue-transparent);
  border-bottom: 1px solid var(--blue);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  box-sizing: border-box;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

#docs-header svg {
  margin: 2vw 3vw;
  width: 90%;
  max-width: 800px;
  box-sizing: border-box;

}

#doc {
  background-color: var(--cream);
  margin-top: 20px;
  height: calc(100% - 10vw);
  max-width: 800px;
  flex: 1;
  overflow: hidden;
  padding: 15px 20px;
  color: var(--bright-blue);
  box-sizing: border-box;
  -ms-overflow-style: none;  
  scrollbar-width: none;     
  border-radius: 3px;
  width: 90%;                     
  margin: 10px auto;    
}

#doc-title {
  font-family: var(--pixelscript);
  font-weight: 400;
  font-style: normal;
  text-align: center;
}

#doc>div {
  margin-left: 20px;
}


.doc-input {
  background-color: var(--cream);
  /* width: 100%; */
  border: none;
  color: var(--black);
  border-bottom: 2px var(--blue) solid;
  font-family: var(--videotext);
  font-size: 1.2rem;
  resize: none;
  /* min-width: 45% */
}

.doc-question {
  font-size: 18px;
  margin-top: 15px;
  color: var(--blue);
}

.float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-20px);
  }

  100% {
    transform: translatey(0px);
  }
}

#computer-container {
  position: relative;
  display: inline-block;
}

#computer-screen {
  position: absolute;
  inset: 0;             
  z-index: 2;
  padding: 100px 125px;
}

#computer-screen-response {
  margin-top: 100px;
}


.text {
  font-family: var(--videotext);
  font-size: 13.65px;
}

.results-text-h{
  font-family: Arial-BoldMT, Arial;
  font-weight: 700;
  font-size: 34px;
   letter-spacing: -.07em;
}

.results-text-p{
  font-family: Arial-BoldMT, Arial;
  font-weight: 400;
  font-size: 26px;
}


/* ========== */
/* SVG COLORS */
/* ========== */

.green-gray {
  fill: var(--green-gray);
}

.light-green-gray {
  fill: var(--light-green-gray);
}

.dark-red {
  fill: var(--dark-red);
}

.red{
  fill: var(--red);
}

.black {
  fill: var(--black);
}

.dark-green-gray {
  fill: var(--dark-green-gray);
}

.darker-green-gray{
    fill: var(--darker-green-gray);
}

.green {
  fill: var(--green);
}

circle.light-green {
  fill: none;
  stroke: var(--light-green);
  stroke-miterlimit: 10;
  stroke-width: 8px;
}

circle.lighter-green {
  fill: none;
  stroke: var(--lighter-green);
  stroke-miterlimit: 10;
  stroke-width: 8px;
}

.light-green {
  fill: var(--light-green);
}

.blue {
  fill: var(--blue);

}

line.blue{
  stroke: var(--blue);
  stroke-miterlimit: 10;
  stroke-width: 2px;
}

.yellow {
  fill: var(--yellow);
}

.dark-yellow {
  fill: var(--dark-yellow);
}

.light-blue {
  fill: var(--light-blue);
}

.white {
  fill: var(--white);
}

.cream {
  fill: var(--cream);
}

.beige {
  fill: var(--beige);
}
  
.stroke {
  fill: none;
  stroke: var(--green-gray);
  stroke-miterlimit: 10;
}

.black-stroke {
  fill: none;
  stroke: var(--black);
  stroke-miterlimit: 10;
}

.black-stroke-results {
  fill: none;
  stroke: var(--black);
  stroke-miterlimit: 10;
  stroke-width: 3px;
}



.ipad-screen-text{
  font-family: var(--pixelscript);
  text-align: center;
  color: var(--bright-blue);
}

.computer-text{
  fill: var(--black);
  font-family: PFVideotext-Regular, 'PF Videotext';
  font-size: 29.77px;
}
.app-title {
  font-size: 30px;
}

.app-name {
  font-size: 15.48px;
}

.transparent {
  opacity: .5;
  transition: .2s;
}
.opaque{
  opacity: 0;
  transition: .2s;
}

#phone-notification {
  display: none;
  transform-box: fill-box;     
  transform-origin: center;    
}

@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.shake {
  animation: shake 0.4s ease-in;
}

.blinking {
  animation: redPulse 1.2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes redPulse {
  0% {
    fill: var(--dark-red); 
    filter: drop-shadow(0 0 0 rgba(255, 0, 0, 0));
  }

  50% {
    fill: var(--bright-red); 
    filter: drop-shadow(0 0 6px var(--bright-red-transparent));
  }

  100% {
    fill: var(--dark-red);
    filter: drop-shadow(0 0 0 rgba(255, 0, 0, 0));
  }
}


.directions-title{
  font-size: 30px;
}

.directions-text{
  font-size: 25px;
}

.go-button{
  font-size: 30px;
}

#travel-options .blue {
  visibility: hidden;
  pointer-events: all; 
}

#travel-options .blue.active {
  visibility: visible;
}

.computer-shortcut{
  cursor: pointer;
  transform-origin: 25% 25%;
  transition: 0.2s ease;
}

.computer-shortcut:hover{
  transform: scale(1.05);
  
}
.travel-text-row {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.travel-text-row.active {
  opacity: 1;
}

#transport-bg,
#directions-background {
  transition: y 0.35s ease, height 0.35s ease;
}

.directions-title,
#travel-options {
  transition: transform 0.35s ease;
}

#docs-star{
  cursor: pointer;
}


.unclickable{
  pointer-events: none;
}

.app-clear{
  opacity: 0;
}

#home-screen{
  display:none;
}

#app-selection{
  display: none;
}

#lock-screen{
  display: block;
}

#clock{
  font-size: 100px;
}

#directions-instructions{
  font-size: 25px;
}

#directions{
  display: none;
}


#go-button{
  cursor: pointer;
}

#chatbot-container {
  position: relative;
  background-color: var(--green-transparent);
  border: 2px solid var(--light-green);
  border-radius: 12px;
  width: 80%;
  max-width: 700px;
  height: 80vh;
  height: 80dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 15px var(--light-green-transparent);
}

#chatbot-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background-color: var(--green);
  border-bottom: 2px solid var(--light-green);
}

#chatbot-header img#chatbot-logo {
  height: 50px;
  width: 50px;
  margin-right: 15px;
}

#chatbot-header h1 {
  font-family: var(--pixelscript);
  font-size: 28px;
  color: var(--white);
  margin: 0;
}

#chatbot-message-container {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chatbot-message {
  background-color: var(--green);
  color: var(--white);
  align-self: flex-start;
  padding: 10px 15px;
  border-radius: 8px;
  max-width: 70%;
  transition: all 0.2s ease;
}

.user-message {
  background-color: var(--light-green);
  color: var(--white);
  align-self: flex-end;
  padding: 10px 15px;
  border-radius: 8px;
  max-width: 70%;
  transition: all 0.2s ease;
}

#chatbot-send {
  display: flex;
  padding: 10px 20px;
  border-top: 2px solid var(--light-green);
  background-color: var(--green);
}

#chatbot-input {
  font-family: var(--videotext);
  flex: 1;
  padding: 10px 15px;
  font-size: 18px;
  border: 2px solid var(--light-green);
  border-radius: 8px 0 0 8px;
  background-color: var(--cream);
  color: var(--black);
  outline: none;
}

#chatbot-input:focus {
  box-shadow: 0 0 4px var(--light-green);
}

#chatbot-send-button {
  background-color: var(--light-green);
  border: 2px solid var(--light-green);
  color: var(--white);
  font-size: 20px;
  padding: 0 20px;
  cursor: pointer;
  border-radius: 0 8px 8px 0;
  transition: all 0.2s ease;
}

#chatbot-send-button:hover {
  background-color: var(--green);
  color: var(--white);
}


#google-docs-container {
  position: relative;
  height: 85vh;
  height: 85dvh;
  width: 90%;
  max-width: 900px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  background-color: var(--black);
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--blue); 
  box-sizing: border-box;
}




#doc::-webkit-scrollbar {
  display: none;             
}



#doc h1#doc-title {
  font-family: var(--pixelscript);
  font-size: 28px;
  text-align: center;
  margin-bottom: 15px;
}

.redacted.larger {
  font-size: 1.2rem;
  margin-bottom: 2px;
}

#payment-method-title{
  font-size: 27px;
}

.payment-method{
  cursor: pointer;
}

.payment-method:hover .payment-method-option,
.payment-method.selected .payment-method-option {
  fill: var(--blue);
}

.payment-method:hover .payment-method-rectangle,
.payment-method.selected .payment-method-rectangle {
  opacity: 1;
}

.payment-method-option {
  font-size: 30px;
}

.payment-method-rectangle {
  opacity: 0;
}

.store-type{
  font-size: 23px;
}

.shopping-list-app-title{
  font-size: 30px;
}

.shopping-done{
  font-size: 25px;
}


.bubble{
  fill: none;
  stroke: var(--dark-red);
  stroke-miterlimit: 10;
  stroke-width: 2px;
}

.shopping-list-item {
  cursor: pointer;
}

.shopping-list-item.transparent .bubble {
  fill: var(--dark-red);
}

#done-text {
  display: none;
}

#shopping-done-button {
  cursor: pointer;
}

#reminders{
  display: none;
}



#earth-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#field-office-ui {
  position: relative;
  width: 80vw;
  max-width: 700px;
  height: 80vh;
  height: 80dvh;
  background-color: var(--green-transparent);
  border: 2px solid var(--light-green);
  border-radius: 12px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 15px var(--light-green-transparent);
  z-index: 10;
}

#field-office-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background-color: var(--green);
  border-bottom: 2px solid var(--light-green);
}

#field-office-header img#field-office-logo {
  height: 50px;
  width: 50px;
  margin-right: 15px;
}

#field-office-header h1 {
  font-family: var(--pixelscript);
  font-size: 28px;
  color: var(--white);
  margin: 0;
}


.hidden {
  display: none;
}


#chatbot-close-button {
  flex: 1;
  padding: 10px 20px;
  font-size: 18px;
  border-radius: 8px;
  background-color: var(--light-green);
  color: var(--cream);
  font-family: var(--videotext);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#chatbot-close-button:hover {
  background-color: var(--green);
}

/* Help button in bottom-right corner */
#help-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 35px;
  height: 35px;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 1001;
}

#help-button img {
  width: 100%;
  display: block;
  transition: transform 0.3s ease;
}

/* Overlay full screen */
#help-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(0,0,0,0.7);
  display: none; /* hidden initially */
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Content box */
#help-content {
  background: var(--blue);
  max-width: 800px;
  width: 90%;
  height: 75%;
  overflow-y: auto;
  padding: 25px;
  border-radius: 12px;
  cursor: pointer; /* indicate it's clickable too */
  box-shadow: 0 0 15px var(--blue-transparent);
}

#help-content h2{
  font-family: var(--videotext);
  font-size: 25px;
  color: var(--white);
}

#help-content p{
  font-family: var(--videotext);
  font-size: 18px;
  color: var(--white);
}

#help-settings {
  margin-top: 25px;
  border-top: 1px solid var(--white-transparent);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#help-settings h2 {
  margin-bottom: 8px;
}

.help-setting-option {
  font-family: var(--videotext);
  font-size: 18px;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--black-transparent);
  border: 1px solid var(--white-transparent);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.help-setting-option:hover {
  background: var(--black-transparent);
  border-color: var(--white-transparent);
}

.help-toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.help-toggle-track input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.help-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--white-transparent);
  border-radius: 12px;
  transition: background-color 0.3s ease;
}

.help-toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--white);
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.help-toggle-track input:checked + .help-toggle-slider {
  background-color: var(--bright-blue);
}

.help-toggle-track input:checked + .help-toggle-slider::before {
  transform: translateX(20px);
}

.clickable{
  cursor: pointer; 
}

#screen-space{
  opacity: 0;
  cursor: pointer
}

#phone-background{
  opacity: 0;
  cursor: pointer
}

#start-scene{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

#menu-buttons{
  display: flex;
  flex-direction: column;
  margin-left: 10%;
  margin-bottom: 10%;
  align-items: flex-start;
}

#menu-buttons button{
  font-family : var(--videotext);
  background: none;
  color: var(--white);
  border: none;
  font-size: 30px;
}

#menu-buttons button:hover{
  text-decoration: underline;
  transition: .2s
  
}

#menu-buttons .secondary-button{
  opacity: 40%;
  font-size: 20px;
}

#menu-buttons .secondary-button:hover{
  opacity: 100%;
}

.typewriter{
  width: 80vw;
  max-width: 800px;
  font-size: 20px;
}

#field-office-text{
  font-size: 18px;
  padding: 0 20px 60px;
  color: var(--white);
  line-height: 25px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

#field-office-text button {
  position: absolute;
  bottom: 15px;
  left: 20px;
  right: 20px;
  z-index: 5;
}

#field-office-text p span{
  color: var(--lighter-green);
}


button.after-typewriter {
  font-family: var(--videotext);
  color: var(--bright-blue); /* normal text color */
  background: none;
  border: none;
  font-size: 25px;
  cursor: pointer;
  text-decoration: underline;

  /* Blinking white effect */
  animation: blinkWhite 3s infinite;
  opacity: 0; /* hidden until typewriter finishes */
  transition: opacity 0.5s ease;
}

button.after-typewriter.show {
  opacity: 1;
}

@keyframes blinkWhite {
  0%, 50%, 100% {
    color: var(--bright-blue);
  }
  25%, 75% {
    color: var(--white); /* blink to white */
  }
}

.very-beginning{
  animation: none;
  color: var(--white);
}

.highlight-tip {
   animation: flashGlow 3s ease-in-out forwards;
}

@keyframes flashGlow {
  0% {
    filter: drop-shadow(0 0 0px var(--highlight-yellow))
            drop-shadow(0 0 0px var(--highlight-yellow))
            drop-shadow(0 0 0px var(--highlight-yellow));
  }
  20% {
    filter: drop-shadow(0 0 8px var(--highlight-yellow))
            drop-shadow(0 0 8px var(--highlight-yellow))
            drop-shadow(0 0 8px var(--highlight-yellow));
  }
  40% {
    filter: drop-shadow(0 0 0px var(--highlight-yellow))
            drop-shadow(0 0 0px var(--highlight-yellow))
            drop-shadow(0 0 0px var(--highlight-yellow));
  }
  60% {
    filter: drop-shadow(0 0 8px var(--highlight-yellow))
            drop-shadow(0 0 8px var(--highlight-yellow))
            drop-shadow(0 0 8px var(--highlight-yellow));
  }
  80% {
    filter: drop-shadow(0 0 0px var(--highlight-yellow))
            drop-shadow(0 0 0px var(--highlight-yellow))
            drop-shadow(0 0 0px var(--highlight-yellow));
  }
  100% {
    filter: none;
  }
}

#email-scene {
  position: relative;
}


  

#email-ui {
  display: flex;
  flex-direction:column;
  width: 90%;
  max-width: 900px;
  height: 80vh;
  height: 80dvh;
  border: 2px solid var(--medium-red);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--cream);
}

#email-content{
  display: flex;
  height: 100%;
}

#email-sidebar {
  width: 150px;
  background-color: var(--red-transparent);
  padding: 15px;
  height: 100%;
}

#email-sidebar h2 {
  margin-bottom: 10px;
  font-size: 20px;
  color: var(--white);
}

#email-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#email-sidebar li {
  font-size: 16px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  border-radius: 4px;
  transition: background 0.2s ease;
  color: var(--red);
}

/* #email-sidebar li:hover,
#email-sidebar li.active {
  background-color: var(--blue);
} */

.unread-count {
  background-color: var(--highlight-yellow);
  border-radius: 100px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: bold;
}

#email-container {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}

.email-row {
  border-bottom: 1px solid var(--dark-red);
  cursor: pointer;
  padding: 10px 5px;
  transition: background 0.2s ease;
}

.email-row:hover {
  background-color: var(--blue-transparent-light);
}

.email-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.email-body {
  display: none;
  margin-top: 10px;
  padding-left: 10px;
  font-size: 14px;
}

.body-content {
  margin-top: 10px;
  padding-left: 10px;
  font-size: 20px;
}

.email-row.active .email-body {
  display: block;
}

#email-sidebar .folder {
  cursor: default;
}


.email-row[data-email]:not([data-email="0"]) {
  opacity: 0.3;                
  font-family: "redacted";
  pointer-events: none;        
  transition: none;   
  color: var(--red);
}

.email-row[data-email]:not([data-email="0"]) .email-summary {
  cursor: default;             
}

#email-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background-color: var(--dark-red);
  border-bottom: 2px solid var(--medium-red);
}

#email-header img#email-logo {
  height: 50px;
  width: 50px;
  margin-right: 15px;
}

#email-header h1 {
  font-family: var(--pixelscript);
  font-size: 28px;
  color: var(--white);
  margin: 0;
}
#email-logo{
  object-fit: contain;
}

#spam-buttons{
  display: flex;
}

#spam-buttons p{
  text-decoration: underline;
  cursor: pointer;
}

#spam-buttons p:hover, #spam-buttons p:active{
  color: var(--purple);
}

.at{
  font-size: 30px;
  font-family: var(--pixelscript) !important;
  font-weight: 400;
  font-style: normal;
}

.email-count{
  font-size: 30px;
}

#computer-popup{
  display: block;
}

#computer-popup text{
  font-size: 25px;

}

#mini-directions-instructions{
  display: none;
  transition: .2s;
}

.go-button{
  pointer-events: none;
  cursor: default;
}

#education-level{
  display: flex;
  flex-direction: row;
}
#education-level select{
  flex-grow: 2;
}

#eductation-level input{
  flex-grow: 1
}

#popup-text{
  display: block;
}


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.doc-input:focus {
  outline: none;
}

.docs-button{
  font-family: var(--videotext);
  font-size: 20px;
  color: var(--purple);
  text-decoration: underline;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.doc-input.clean-up.selected {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  border-bottom: none !important;
  background-color: var(--cream);
  position: relative;
  padding-right: 20px;
  cursor: pointer;
}


.job-line, #education-line{
  display: flex;
  flex-direction:row;
  justify-content: space-between;
}

.job-line p, .education-line input[type="number"], #year-formatting p{
  font-size: 20px;
  color: var(--blue);
  font-family: var(--videotext);
  margin: 0;
}

.year-placeholder{
  font-family: "Redacted", system-ui !important;
  font-size: 20px;
  color: var(--blue);
  margin: 0;
  position: relative;
  top: 6px;
}

.risk-text{
  margin-top: 5px;
}

.risk-text a{
  color: var(--blue);
}

#year-formatting{
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.resume-topline{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

@keyframes donePulseRect {
  0%   { fill: var(--green); } 
  100% { fill: var(--light-green); }  
}

@keyframes donePulseCircle {
  0%   { stroke: var(--light-green); }
  100% { stroke: var(--lighter-green); }
}

.pulsing-rect {
  animation: donePulseRect 0.8s ease-in-out infinite alternate;
}

.pulsing-circle {
  animation: donePulseCircle 0.8s ease-in-out infinite alternate;
}

.typewriter-container {
  max-height: 95vh;
  max-height: 95dvh;
  overflow-y: auto;
}

#intro-container{
  height: 90vh;
  height: 90dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}




#intro-scene-instructions .typewriter-container {
  width: 80vw;
  max-width: 1000px;
}

#icons{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 50px 0;
}

.device-icon{
  max-height: 125px;
  object-fit: contain;
  padding: 25px;
}

.devices{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* padding: 50px 0; */
}

#devices p{
  font-size: 26px;
}

.personal-information{
  background-color: var(--white);
  width: 90%;
  padding: 15px;
  border-radius: 10px;
}

#ipad-header{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.fake-questions{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0px 30px;
  justify-content:center;
  font-size: 10px;
}

.info1{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#parent-guardian,
#insurance-provider{
  font-size: 14px;
}

#name{
  width:50%;
  font-family: var(--videotext);
  flex: 1;
  padding: 10px 15px;
  font-size: 18px;
  border: 2px solid var(--blue);
  border-radius: 8px;
  background-color: var(--white);
  color: var(--black);
  outline: none;
}

#birthdate{
  width:50%;
  font-family: var(--videotext);
  flex: 1;
  padding: 10px 15px;
  font-size: 18px;
  border: 2px solid var(--blue);
  border-radius: 8px;
  background-color: var(--white);
  color: var(--black);
  outline: none;
}

#ipad-container {
  position: relative;
  display: inline-block;
}

#ipad-screen {
  position: absolute;
  inset: 0;             
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 35px 0 35px;
  flex-direction: column;
  }

#ipad-header img{
  height: 50px;
  width: 50px;
}

#ipad-screen h2 {
  font-family: var(--pixelscript);
  text-align: center;
  color: var(--bright-blue);
}

#ipad-screen p {
  text-align: center;
  color: var(--bright-blue);
}

#ipad-screen fieldset {
  border: 2px solid var(--blue); 
  border-radius: 8px;
  padding: 15px 20px;
  background-color: var(--white); 
}

#ipad-screen legend {
  font-family: var(--videotext);
  font-size: 18px;
  color: var(--black);
  padding: 0 10px;
}

#ipad-screen label {
  display: block;
  font-family: var(--videotext);
  font-size: 16px;
  color: var(--black);
  margin-bottom: 10px;
  cursor: pointer;
}

#ipad-screen input[type="radio"] {
  margin-right: 8px;
  accent-color: var(--blue); 
  cursor: pointer;
}

#ipad-screen select {
  font-family: var(--videotext);
  padding: 6px 10px;
  border: 2px solid var(--blue);
  border-radius: 6px;
  background-color: var(--white);
  color: var(--black);
  cursor: pointer;
}

#ipad-screen select:focus {
  outline: 2px solid var(--bright-blue);
}

#ipad-screen input:focus,
#ipad-screen select:focus {
  outline: none;
  box-shadow: 0 0 4px var(--blue);
}

#ipad-screen input[type="radio"]:hover,
#ipad-screen select:hover {
  filter: brightness(1.1);
}

.modal {
  position: fixed;
  inset: 0;
  background: var(--black-transparent-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}


.hidden {
  display: none;
}

.modal-content {
  background-color: var(--black);
  border: 2px solid var(--blue);
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  padding: 30px;
  text-align: center;
  color: var(--white);
  font-family: var(--videotext);
  box-shadow: 0 0 15px var(--blue-transparent);
}

.modal-content h2 {
  font-family: var(--videotext);
  margin-bottom: 15px;
}

.modal-content p {
  font-size: 18px;
  margin-bottom: 25px;
  color: var(--bright-blue);
}


.modal-buttons {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.modal-buttons button {
  flex: 1;
  padding: 10px;
  font-size: 18px;
  font-family: var(--videotext);
  background: none;
  border: 2px solid var(--blue);
  border-radius: 10px;
  color: var(--white);
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-buttons button:hover {
  background-color: var(--blue);
  color: var(--black);
}

.streamer-active .streamer-mode-hide {
  display: none !important;
}

#disclaimer{
  width: 100%;
  display: flex;
  justify-content:center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  position: absolute;
  bottom: 20px;
  color: var(--white);
  gap: 0px 20px;
}

#disclaimer a{
  color: var(--white);
}



.ipad-answer.redacted{
  margin: 0;
  font-size: 20px;
}

.ipad-question{
  margin-top: 1px;
}

.ipad-title{
  margin-top: 0;
  color: var(--blue);
}

#insurance-submit{
  font-family: var(--videotext);
  font-size: 20px;
  color: var(--white);
  text-decoration: none;
  background-color: var(--blue);
  border: none;
  margin-top: 15px;
  padding: 5px 18px 7px;
  border-radius: 10px;
  cursor: pointer;
}

#insurance-submit:hover{
  background-color: #2d5167;
}

#email-notification{
  display: none;
}

#quiz-start{
  font-family: var(--videotext);
  font-size: 20px;
  color: var(--white);
  text-decoration: none;
  background-color: var(--light-green);
  border: none;
  margin-top: 15px;
  padding: 5px 18px 7px;
  border-radius: 10px;
  cursor: pointer;
}

#quiz-start:hover{
  background-color: var(--light-green);
}




.background-video.fade-out {
  opacity: 0;
  pointer-events: none;
}

.effects-options{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}


#results-scene {
  position: relative;
  overflow: hidden;
}

#envelope-container {
  overflow: hidden;
}

#envelope {
  height: 80vh;
  height: 80dvh;
  max-width: 95vw;
  display: block;
  
}

.background{
  transition: transform 1s ease-in-out;
}

#paper-results{
  cursor: pointer;
}

/* MOBILE */

@media screen and (max-width: 600px) {

  #menu-buttons{
    margin-bottom: 40%;
  }

  #field-office-ui {
    height: 70vh;
    height: 70dvh;
  }

  .typewriter{
    width: 80vw;
    max-width: 800px;
    font-size: 18px;
  }

  #field-office-ui {
    width: 92vw;
  }

  #field-office-header h1 {
    font-family: var(--pixelscript);
    font-size: 22px;
    color: var(--white);
    margin: 0;
  }

  #field-office-ui {
    width: 92vw;
  }

  #field-office-text{
    font-size: 14px;
    padding: 0 15px 60px;
    line-height: 21px;
  }

  #ipad-screen {
    padding: 60px 35px 0 35px;
  }

  #ipad-screen h2 {
    font-family: var(--pixelscript);
    text-align: center;
    color: var(--bright-blue);
    font-size: 19px;
  }

  .personal-information{
    width: 90%;
  }

  .ipad-answer.redacted{
    margin: 0;
    font-size: 13px;
  }

  .fake-questions{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0px 30px;
    justify-content:center;
    font-size: 10px;
  }

  #ipad-screen legend {
    font-family: var(--videotext);
    font-size: 13px;
    color: var(--black);
    padding: 0 10px;
  }

  #parent-guardian,
  #insurance-provider{
    font-size: 12px;
  }

  #insurance-submit{
    font-family: var(--videotext);
    font-size: 16px;
    color: var(--white);
    text-decoration: none;
    background-color: var(--blue);
    border: none;
    margin-top: 15px;
    padding: 5px 18px 7px;
    border-radius: 10px;
    cursor: pointer;
  }

  #google-docs-container {
    height: 75vh;
    height: 75dvh;
    width: 95%;
  }

  #doc {
    padding: 10px 12px;
    width: 95%;
  }

  #doc h1#doc-title {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .doc-question {
    font-size: 14px;
    margin-top: 10px;
  }

  .doc-input {
    font-size: 0.85rem;
  }

  .docs-button {
    font-size: 16px;
  }

  .job-line, #education-line {
    flex-direction: column;
    gap: 4px;
  }

  .job-line p, .education-line input[type="number"], #year-formatting p {
    font-size: 14px;
  }

  .year-placeholder {
    font-size: 14px;
  }

  .redacted.larger {
    font-size: 0.9rem;
  }

  .risk-text {
    font-size: 12px;
  }

  #email-ui {
    width: 95%;
  }

  #email-sidebar {
    display: none;
  }

  #email-header img#email-logo {
    height: 35px;
    width: 35px;
    margin-right: 10px;
  }

  #email-header h1 {
    font-size: 20px;
  }

  #email-container {
    padding: 10px;
  }

  .email-summary {
    font-size: 13px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .email-summary .sender {
    font-size: 15px;
    font-weight: bold;
  }

  .email-summary .timestamp {
    display: none;
  }

  .body-content {
    font-size: 15px;
    padding-left: 5px;
  }

  .email-body {
    font-size: 12px;
  }

  #spam-buttons p {
    font-size: 13px;
  }

  #chatbot-container {
    width: 95%;
    height: 70vh;
    height: 70dvh;
  }

  #chatbot-header img#chatbot-logo {
    height: 35px;
    width: 35px;
    margin-right: 10px;
  }

  #chatbot-header h1 {
    font-size: 20px;
  }

  #chatbot-message-container {
    padding: 12px;
    gap: 8px;
  }

  .chatbot-message {
    font-size: 14px;
    max-width: 85%;
    padding: 8px 12px;
  }

  #chatbot-send {
    padding: 8px 10px;
  }

  #chatbot-input {
    font-size: 14px;
    padding: 8px 10px;
  }

  #chatbot-send-button {
    font-size: 16px;
    padding: 0 14px;
  }

  #chatbot-close-button {
    font-size: 14px;
    padding: 8px 14px;
  }

  .logo {
    width: 40vw;
    max-width: 500px;
  }

  .device-icon{
    max-height: 100px;
    object-fit: contain;
    padding: 15px;
  }

}

/* TABLET */

@media screen and (min-width: 765px) and (max-width: 1024px) {



/*@media screen and (orientation: landscape) {

  #ipad-screen {
    padding: 60px 35px 0px 35px;
  }

  #ipad-screen legend {
    font-family: var(--videotext);
    font-size: 10px;
    color: var(--black);
    padding: 0 10px;
  }

  .personal-information{
    width: 95%;
  }

  .ipad-title{
    font-size: 10px;
  }

  .ipad-answer.redacted{
    margin: 0;
    font-size: 8px;
  }

  #insurance-submit{
    font-size: 10px;
  }

  #parent-guardian,
  #insurance-provider{
    font-size: 10px;
  }*/
  
}


#viewerContainer {
  height: 100vh;          
  height: 100dvh;          
  overflow-y: auto;        
  background: var(--white);
  padding: 20px;
  box-sizing: border-box;
}

.pageCanvas {
  display: block;
  margin: 0 auto 20px auto;
  background: var(--white);
  box-shadow: 0 2px 8px var(--black-transparent);
}