/* **********************************************************
 * add custom styles after imports below
 * ********************************************************** */

@import "default.css";
@import "layout.css";
@import "menu.css";
@import "queries.css";

/* **********************************************************
 * to import a font, use the @import option, you can find
 * lots of font options at fonts.google.com for example.
 * ********************************************************** */

@import url(https://db.onlinewebfonts.com/c/4c4a87973ef80fc72049e01b9085fadc?family=ABC+Diatype);

@import url(https://db.onlinewebfonts.com/c/fbee28f49e99c472f1f569c6ddc24ebe?family=ABC+Diatype+Mono);

/* @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Sawarabi+Gothic&family=Syne+Tactile&family=Syne:wght@400..800&display=swap'); */

@font-face {
  font-family: "myfont";
  src: url("../wkgothic_abc-webfont.woff") format('woff');
  /* font-weight: bold; */
}





* {
  margin: 0;
  padding: 0;
}

.webcam-container-container {
  position: relative;
}

/* Style for the live camera feed */
#webcam-container {
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

/* Ensure the webcam canvas scales to fit its parent container */
#webcam-container canvas {

  width: calc(100% - var(--spacing-l)); /* Reduce the width by var(--spacing-l) */
  margin-left: var(--spacing-m);
  margin-bottom: var(--spacing-m);
  height: auto; 
  display: block; /* Remove any extra spacing caused by inline elements */
  /* border-radius: 8px; */
  border: 2px solid black;
}

#startButton {
  max-width: 300px;
  margin-top: 20px;
  margin-bottom: 40px;
  padding: 20px;
  align-self: center;
  background-color: white;
  border: 2px solid black;
  border-radius: 50%;
  color: black;
}

#flipButton {
  position: absolute; /* Position it relative to the webcam container */
  bottom: 40px; /* Adjust the distance from the bottom */
  left: 40px; /* Adjust the distance from the left */
  top: unset;
  right: unset;
  background: none; /* Remove default button background */
  border: none; /* Remove default button border */
  padding: 0; /* Remove padding */
  cursor: pointer; /* Change cursor to pointer */
  z-index: 10; /* Ensure it appears above the webcam canvas */
 
}

#flipButton img {
  width: 40px; /* Set the size of the flip icon */
  height: 40px; /* Maintain aspect ratio */
  border-radius: 50%; /* Optional: make the icon circular */
  padding: 5px; /* Optional: add padding inside the circle */
  background-color: blue;
}


/* #flipButton {
  max-width: 300px;
  margin-bottom: 40px;
  padding: 20px;
  align-self: center;
  background-color: white;
  border: 2px solid black;
  border-radius: 50%;
  color: black;
} */



/* Style for the GIF overlay text */
#overlayText {
  font-family: 'ABC Diatype Mono', monospace;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  color: white;
  font-weight: 100;
  text-align: center;
  /* text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); */
}

#label-container {
}

#gifBackground {
  width: 100%; 
  height: auto;
  
}

/* Ensure the popup covers the entire screen */
.popup {
  display: none; /* Initially hidden */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  z-index: 1000; /* Ensure it appears above all other elements */
}

/* Center the popup content */
.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  box-shadow: 0 4px 8px var(--color-11);
  text-align: center;
}

/* Close button styling */
.popup-close {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 24px;
  font-weight: bold;
  color: white;
  cursor: pointer;
}

/* Show the pop-up */
.popup.show {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 768px) {
  .row {
    /* flex-direction: column; 
    gap: var(--spacing-m); */
  }

  .column__2 {
    width: 100%; /* Ensure columns take full width */
    margin: 0 auto; /* Center the columns */
  }


  #webcam-container {
    width: 100%; /* Ensure the webcam container takes full width */
    max-width: 100%; /* Override any inherited max-width */
    /* margin: 0 auto; Center the container */
    box-sizing: border-box; /* Include padding and borders in the width */
  }

  #webcam-container canvas {
    width: 100%; /* Ensure the webcam scales to fit the parent container */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto;
    border-bottom: 0;
  }

  #overlayText {
    font-size: 2rem;
  }

  .webcam-container-container {
    margin:0;
  }

  #flipButton {
    bottom: 10px; /* Adjust the distance from the bottom */
  left: 10px; /* Adjust the distance from the left */
  }
}