@font-face {
  font-family: Dosis;
  src: url("../fonts/Dosis-Regular.woff2");
}

@font-face {
  font-family: Dosis-Bold;
  src: url("../fonts/Dosis-Bold.woff2");
}

@font-face {
  font-family: Dosis-SemiBold;
  src: url("../fonts/Dosis-SemiBold.woff2");
}

:root {
  --primary-blue: #578FFE;
  --primary-pink: #FF0082;
  --cotton-candy: #F7CFE5;
  --apricot: #F9E6E0;
  --blush: #EEB4A3;
  --orange: #F47D61;
  --md-yellow: #FFD208;
  --lg-yellow: #FDFAF1;
  --white: #FFFFFF;
}

#metadata {
  display: none !important;
}

#_topFrame {
  container-name: interactiveWindow;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  container-type: size !important;
}

#gameStart>svg,
#gameIntroduction>svg,
#gameEnd>svg {
  height: 75vh;
  width: 80vw;
  max-width: 591px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.custom-container {
  background-color: var(--lg-yellow);
  color: var(--primary-blue);
  font-family: Dosis-SemiBold;
  border-radius: 20px;
  box-shadow: 5px 5px 0px 0px var(--primary-pink);
}

#startBtn {
  bottom: 7%;
  right: 5%;
}

.custom-button {
  width: min(30%, 80px);
  border-radius: 0px 7px;
  border: 1px solid var(--cotton-candy, #F7CFE5);
  background: rgb(253, 250, 241);
  box-shadow: 3px 3px 0px 0px var(--primary-pink);
  font-size: min(5.5vw, 1rem);
}

#copyright {
  bottom: 2%;
  right: 2%;
  color: var(--primary-pink);
  font-family: Dosis-Semibold;
  font-size: min(2vw, 1rem);
}

#overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
}

#gameScreen {
  width: 100vw;
  height: 100vh;
  max-width: 980px;
  gap: 5%;
}

@container interactiveWindow (width >=1000px) {
  #gameScreen {
    width: 70vw;
    max-width: 1200px;
  }
}

#stage1>.container {
  max-width: 90vw;
}

input {
  opacity: 0;
}

input+label {
  top: 1rem;
  height: min(5.5vw, .75rem);
  width: min(5.5vw, .75rem);
  border-radius: 50%;
  border: 0.15vw solid var(--primary-pink);
  color: transparent !important;
}

/* For larger viewport window like tablets and desktop screens (not SLS preview window) */
@container interactiveWindow (width >=1000px) {
  input+label {
    top: 1rem;
    height: min(5.5vw, 1rem);
    width: min(5.5vw, 1rem);
    border-radius: 50%;
    border: 0.15vw solid var(--primary-pink);
    color: transparent !important;
  }
}

input:checked+label {
  border-radius: 50%;
  background-color: var(--primary-pink);
  color: transparent !important;
}

input.correctly-matched+label {
  background-color: var(--primary-pink) !important;
}

.speech-bubble {
  width: 50%;
  z-index: 2;
}

.religion-names,
.religion-images {
  width: 85%;
}

#religionDescriptionModal {
  height: 85% !important;
  width: 80% !important;
  max-height: 1000px;
  padding: min(5vw, 29px) !important;
}

/* For larger viewport window like tablets and desktop screens (not SLS preview window) */
@container interactiveWindow (width >=1000px) {
  #religionDescriptionModal {
    padding: min(10vw, 75px) !important;
  }
}

#rdTitle {
  color: var(--primary-pink);
  margin-bottom: 3% !important;
  font-family: 'Dosis-Bold';
}

#rdBodyWrapper {
  border: 1px solid var(--orange);
  border-radius: 10px;
  height: 80%;
  padding: 0 25px !important;
}

#rdBody {
  font-size: min(5.5vw, .8rem);
}

/* aprostrophies */
#rdBody>img {
  width: min(4%, 1.5vw);
  position: relative;
  top: -6px;
}

#rdBtn {
  color: var(--primary-pink);
  margin-top: 4% !important;
  padding: 1.5% !important;
  width: 80px;
  font-size: min(4.5vw, .8rem);
}

/* For larger viewport window like tablets and desktop screens (not SLS preview window) */
@container interactiveWindow (width >=768px) {
  #rdTitle {
    font-family: 'Dosis-Bold';
    font-size: min(5.5vw, 2rem);
  }

  #rdBody {
    font-size: min(7.5vw, 1.5rem);
  }

  #rdBtn {
    padding: .5% 1% !important;
    font-size: min(4.5vw, 1.05rem);
    width: 100px;
  }

  #rdBody>img {
    width: min(10px, 1.5%);
    top: -10px;
    left: -1.5px;
  }
}



#stageClearedModal {
  height: min(65vh, 500px) !important;
  width: min(65vh, 500px) !important;
  max-height: 1000px;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  padding: 1rem 3rem !important;
  background-color: var(--apricot);
  box-shadow: 3px 3px 1px var(--orange);
}

#gameEnd {
  z-index: 3;
}

#scTitle,
#scBody,
#scBtn {
  color: var(--primary-pink);
}

#scTitle {
  font-size: min(5.5vw, 1.3rem);
  font-family: 'Dosis-Bold';
}

#scBody {
  font-size: min(4.5vw, .85rem);
}

#scBtn {
  font-size: min(5.5vw, .8rem);
}

#gameEndTitle {
  margin-bottom: 10px !important;
}

#scBtn {
  background-color: #FDFAF1;
  padding: 2px 12px !important;
  width: fit-content;
}

/* For larger viewport window like tablets and desktop screens (not SLS preview window) */
@container interactiveWindow (width >=768px) {
  #scTitle {
    font-size: min(5.5vw, 2.5rem);
    font-family: 'Dosis-Bold';
  }

  #scBody {
    font-size: min(5.5vw, 1.5rem);
  }

  #scBtn {
    font-size: min(5.5vw, 1.25rem);
    width: fit-content;
    min-width: 85px;
  }
}

#bottomInfo {
  align-items: center;
  flex-direction: column;
  display: flex !important;
  margin: 3vw !important;
  justify-content: center;
}

#_21CCName {
  width: 30vw;
}

#_21CCName>svg {
  width: 100%;
}

#progressBarContainer {
  border: 1.5px solid rgb(202, 197, 255);
  border-radius: 3rem;
  box-shadow: 2px 2px 1px var(--orange);
  color: white;
  height: min(4.5vh, 2.75rem);
  width: 95%;
  margin: 0px !important;
}

#progressBar {
  background: white;
  display: flex;
  position: relative;
  border: 1px solid var(--cotton-candy);
  border-radius: 3rem;
  height: 100%;
}

/* progressbar checkmarks */
#progressBar img {
  height: min(8vh, 1.65rem);
  top: -2px;
  position: relative;
}

/* For larger viewport window like tablets and desktop screens (not SLS preview window) */
@container interactiveWindow (width >=768px) {
  #_21CCName {
    width: 25vw;
  }

  #progressBarContainer {
    height: min(3.25vh, 2.5rem);
  }

  #progressBar img {
    height: 125%;
  }
}

#progressLevel {
  height: 100%;
  border-radius: 3rem;
  transition: all 0.1s linear 0s;
  margin-bottom: 40px;
  background: var(--md-yellow);
  position: absolute;
  border: 1px solid rgb(202, 197, 255);
  left: -1px;
  top: -1px;
  height: 110%;
}

.divider {
  width: 33%;
  position: relative;
}

.divider>svg {
  position: absolute;
  right: -4%;
  top: -10%;
}

.emptybar {
  border: 0px !important;
}

.fullbar {
  border-radius: 3rem !important;
}

#percentage {
  display: flex;
  margin-left: 0%;
  transition: all 0.1s linear 0s;
}

@container interactiveWindow (width >=600px) {

  .religion-names,
  .religion-images {
    width: 75%;
  }

  #bottomInfo {
    flex-direction: row;
    gap: 3%;
  }
}

@container interactiveWindow (width >=1000px) {

  .religion-names,
  .religion-images {
    width: 55%;
  }

  #bottomInfo {
    flex-direction: row;
    gap: 3%;
    /* width: 80vw; */
    /* position: absolute; */
    bottom: 0;
    left: 50%;
    /* transform: translateX(-50%); */
  }
}

/* game end */
.modal-tl {
  width: 2.5rem;
  max-width: 100px;
  position: absolute;
  top: 3px;
  left: 5%;
}

.modal-br {
  width: 3rem;
  max-width: 100px;
  position: absolute;
  bottom: 6px;
  right: 8%;
}

#confetti img {
  width: 100%;
  height: 80%;
}