.hidden-qr {
  visibility: hidden;
}

#qr-page {
  position: fixed;
  height: 100vh;
  width: 100%;
  top: 0;
  background-color: #000000aa;
  z-index: 5;
  cursor: pointer;
}

#modal-container {
  position: relative;
  height: 90%;
  width: 85%;
  max-width: 85%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  flex-direction: column; 
  /* grid-template-rows: 3fr 120px 1fr auto 2fr 1fr 3fr;  */
  justify-content:space-evenly;
  align-items: center;
}

#modal-backdrop {
  position: absolute;
  background-image: url("../../assets/logo.svg");
  background-size: 6%;
  background-repeat: space;
  height: 300%;
  width: 300%;
  filter: invert() contrast(20%) brightness(220%);
  transform: rotate(-30deg) translate(20%, 0%);
  z-index: -1;
}

#qr-svg-container {
  /* position: absolute; */
  z-index: 3;
  width: 60%;
  height: auto;
  grid-row: 4;
  flex-basis: 5;
  /* right: 50%;
  top: 20%;
  transform: translateX(50%); */
}

#qr-filter {
  animation: moveAndJump 3.5s ease-in-out infinite;
}

#modal-filter {
  position: absolute;
  background-color: white;
  height: 50%;
  width: 200%;
  animation: moveAndJump2 4s ease-in-out infinite;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.5745614035087719) 0%, rgba(255, 255, 255, 0) 83%);
}

#modal-filter-2 {
  position:absolute;
  background-color: #00000016;
  height: 100%;
  width: 300%;
  transform: rotate(-50deg) translate(-20%, 70%) translateY(-10%);
}

@keyframes moveAndJump {
  0% {
    transform: translateY(-150%) translateX(-20%) rotate(0deg);
  }

  100% {
    transform: translateY(150%) translateX(-20%) rotate(0deg);
  }
}

@keyframes moveAndJump2 {
  0% {
    transform: translateY(-250%) translateX(-20%) rotate(0deg);
  }

  100% {
    transform: translateY(250%) translateX(-20%) rotate(0deg);
  }
}


#qr-name {
  font-size: 50px;
  word-break: normal;
	overflow-wrap: break-word;
  /* grid-row: 2; */
  flex-basis: 8;
}

.qr-interest-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  grid-row: 6;
  align-content: center;
  flex-basis: 4;
}

.qr-interest-background {
  position: relative;
  background-color: #222;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin: 20px;
}

.qr-interest-icon {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media only screen and (min-width: 1000px) {
  #modal-container {
    width: 800px;
  }
}

@media only screen and (max-width: 500px) {
  .qr-interest-background {
    width: 50px;
    height: 50px;
  }

  .qr-interest-icon {
    width: 28px;
    height: 28px;
  }

  #qr-name {
    font-size: 32px;
  }
}