@font-face {
  font-family: 'Impact';
  src: url('impact.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

img {
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

html,
body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.page {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* parliament section */

.page.parliament {
  --bg: #141414;
  justify-content: flex-end;
  align-items: center;
  padding: 0px;
  background-color: var(--bg);
  position: sticky;
  bottom: 0;
}


.building {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  z-index: 2;
}

.building svg {
  width: 95vw;
  height: auto;

}

.star-container {
  position: absolute;
  top: -13vw;
  z-index: -1;
}

.star-container .star {
  width: 24vw;
  height: auto;
  transition: transform 0.3s ease-out;
}

.rotate {
  transform: rotate(180deg);
}

.background.rotate {
  background-color: #660000;
}

.star-container.rotate .star-container {
  transform: rotate(180deg);
}

.flame-container {
  position: absolute;
  top: -1.8vw;
  left: 8vw;
  z-index: -1;
}

.flame-container .flame {
  height: 17vw;
  transition: transform 0.3s ease-out;
}

.flame-container.rotate .flame-container {
  transform: rotate(180deg);
}

.flame-container2 {
  position: absolute;
  top: -2.5vw;
  right: 8.4vw;
  z-index: -1;
}

.flame-container2 .flame2 {
  height: 17vw;
  transition: transform 0.3s ease-out;
}

.flame-container2.rotate .flame-container2 {
  transform: rotate(180deg);
}

h1 {
  font-size: 3vh;
  /*font-weight: 100;*/
  font-family: Impact, sans-serif;
  text-transform: uppercase;
}

.prisoners {
  font-family: Impact, sans-serif;
  font-weight: 0;
  color: #ffffff;
  letter-spacing: 1px;
  position: absolute;
  margin-top: 10vh;
}

/* Introduction page section */

.page-intro {
  position: relative;
  background-color: #660000;
  padding: 0px;
  bottom: 0;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Ensure the container is positioned relative */
.background-container {
  position: relative;
  width: 100%;
  height: auto;
}

/* Make the background image responsive */
.background-img {
  height: 100%;
  width: auto;
}

/* Position the timer element absolutely relative to the background-container */
.timer {
  position: absolute;
  top: 7%;
  /* Adjust this value to control vertical positioning */
  left: 50%;
  /* Center horizontally */
  transform: translateX(-50%);
  /* Center horizontally */
  text-align: center;
  width: 100%;
  /* Optional: Ensure it spans the container */
}

/* Scale the font size using viewport width */
.all-caps {
  font-size: 2.8vw;
  /* Adjust based on your design */
  font-family: Impact, sans-serif;
  text-transform: uppercase;
  color: white;
}

/* numbers section */

#numbers-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 24px;
}

.number {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  gap: 0px;
  transition: 75ms;
  min-width: 8vw;
  height: auto;
  padding: 36px 36px;
}

.number:hover {
  transform: scale(1.3);
}

.number:active {
  opacity: 0.5;
}

.number img {
  width: 2.8vw;
  max-height: 3.8vw;
}

/*  reveal section */

p {
  text-align: center;
  font-size: 20px;
  margin-top: 30px;
}

#reveal {
  background-color: #660000;
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  min-width: 100vw;
}

#back {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 32vh;
  left: 3vw;
  color: white;
  cursor: pointer;
}

#back img {
  width: 40px;
}

#back:hover {
  transform: scale(1.2);
}

#back:active {
  opacity: 0.5;
}

/* info section */
#info {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  background-color: #660000;
}

#info p {
  font-family: 'degular', sans-serif;
  font-size: 24px;
  width: 100%;
  max-width: 750px;
  margin-bottom: 0;
  line-height: 125%;
  align-items: center;
  letter-spacing: 0.2px;
}

#info .source {
  font-family: 'degular', sans-serif;
  font-size: 15px;
  margin-top: 2vh;
  color: white;
  font-weight: 400;
  align-items: center;

}

#info .source a {
  color: inherit;
}

.digits-container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 32 32px;
  margin-top: 10vh;
}

.digits-container img {
  height: 350px;
}

.digits-container .percentage-sign {
  width: 100px;
}


/* Image links-motivation section */

.motivation {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 10vh;
  color: #fff;
}

.motivation div {
  text-align: center;
  font-size: 8px;
}

.motivation h2 {
  text-align: center;
  font-size: 35px;
  font-family: "impact", sans-serif;
  src: url('impact.ttf');
  font-weight: 400;
  font-style: normal;
  letter-spacing: 2px;
  margin: 0px;
  color: #fff;
}

.motivation p {
  font-family: 'degular', sans-serif;
  font-size: 15px;
  max-width: 240px;
  align-self: center;
  margin-top: 0%;

}

.motivation h2:hover {
  cursor: pointer;
  transform: scale(1.2);
}

.page-stats {
  background-color: #660000;
  height: auto;
  min-height: 100vh;
  justify-content: center;
}


@media screen and (min-width: 769px) {
  .mobile-parliament {
    display: none;
  }

  .intro-mobile {
    display: none;
  }

}

@media only screen and (max-width: 768px) {
  .page.parliament {
    display: none;
  }

  .page.spacing {
    display: none;
  }

  .background-img {
    display: none;
  }


  .mobile-parliament-texts {
    --bg: #141414;
    background-color: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 30px;
    position: sticky;
    width: 100vw;
  }

  .how {
    align-items: center;
    padding-top: 30px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .government {
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
  }

  .government_build {
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
  }

  .turned {
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
  }

  .the {
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
  }

  .country {
    align-items: center;
    padding-bottom: 50px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .into {
    align-items: center;
    padding-left: 140px;
    padding-right: 140px;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .fire {
    align-items: center;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 265px;
    padding-top: 265px;
    ;
  }

  .shit {
    align-items: center;
    padding-left: 140px;
    padding-right: 140px;
    padding-bottom: 100px;
    padding-top: 50px;
  }

  .intro-mobile {
    padding:20px;
    max-width: 768px;
    min-height: min-content;
  }

  .background_mobile img {
    max-width: 90%;
    height: auto;
    padding: 30px;
  }

  .timer {
    position: absolute;
    top: 5px;
    /* Adjust this value to control vertical positioning */
    left: 50%;
    /* Center horizontally */
    transform: translateX(-50%);
    /* Center horizontally */
    text-align: center;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px
  }

  .all-caps {
    font-size: 25px;
    /* Adjust based on your design */
    font-family: Impact, sans-serif;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
  }

  #numbers-container {
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping to create multiple rows */
    justify-content: space-between;
    /* Add spacing between columns */
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 25px;
  }

  .number {
    flex: 0 0 50%;
    /* Each number takes up 48% of the container width (2 columns) */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 50px;

  }

  .number img {
    width: 50px;
    /* change size as you please mlady */
    max-height: none;
    height: auto;
  }

  .reveal {
    padding: 20px;
    max-width: 768px;
    min-height: min-content;
  }

  .page-stats {
    padding-top: 100px;
  }

  .digits-container img {
    height: 20vw;
  }

  .digits-container .percentage-sign {
    width: 10vw;
  }

  #back {
    top: 5px;
  }

  #back img {
    width: 30px;
  }

  #info p {
    font-size: 16px;
    margin-top: 24px;
  }

  #info .source {
    margin-top: 8px;
  }

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

  .motivation p {
    font-size: 12px;
  }

  .motivation a {
    margin-top: 8px;
    height: 28px;
  }

}


/* Imprint section */

footer {
  font-family: 'degular', sans-serif;
  font-size: 15px;
  text-align: center;
  padding: 16px;
  background-color:#660000;
  color: white;
  width: 100%;
  margin-top: auto;
  font-size: 14px;
}