main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
    margin: 0;
    padding: 10px 0;
}
body {
    overflow: auto;
    margin: 0;
    padding: 0;
}

.iframe-container {
    width: 90%;
    max-width: 1200px;
    height: 100%;
    border-radius: 20px;
    border: 2px  #ccc;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .iframe-container {
        width: 100%;
        height: 70vh;
        border-radius: 10px;
    }
}

/* Shortened URL */

.qr-container { max-width: 400px; margin: 40px auto; background: #00000000; padding: 2em; border-radius: 16px; box-shadow: 0 2px 16px #0004; }
        .qr-container h1 { color: #00fdcb; font-family: 'Doto', sans-serif; text-align: center; }
        .qr-form { display: flex; flex-direction: column; gap: 1em; }
        .qr-form input[type="text"] { padding: 0.7em; border-radius: 2em; border: 1px solid #333; background: #222; color: #fff; font-size: 1em; width: 11em; }
        .button { 
  --white: #880088; 
  --bg: #080808; 
  --radius: 60px; 
  outline: none; 
  cursor: pointer; 
  border: 0; 
  position: relative; 
  border-radius: var(--radius); 
  background-color: var(--bg); 
  transition: all 0.2s ease; 
  box-shadow: 
    inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3), 
    inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7), 
    inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5), 
    0 1.5rem 1.5rem rgba(0, 0, 0, 0.3), 
    0 0.6rem 0.6rem -0.6rem rgba(0, 0, 0, 0.8); 
} 
.button .wrap { 
  font-size: 16px; 
  font-weight: 500; 
  color: rgba(255, 255, 255, 0.548); 
  padding: 18px 28px; 
  border-radius: inherit; 
  position: relative; 
  overflow: hidden; 
} 
.button .wrap p span:nth-child(2) { 
  display: none; 
} 
.button:hover .wrap p span:nth-child(1) { 
  display: none; 
} 
.button:hover .wrap p span:nth-child(2) { 
  display: inline-block; 
} 
.button .wrap p { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  margin: 0; 
  transition: all 0.2s ease; 
  transform: translateY(2%); 
  mask-image: linear-gradient(to bottom, white 40%, transparent); 
} 
.button .wrap::before, 
.button .wrap::after { 
  content: ""; 
  position: absolute; 
  transition: all 0.3s ease; 
} 
.button .wrap::before { 
  left: -15%; 
  right: -15%; 
  bottom: 25%; 
  top: -100%; 
  border-radius: 50%; 
  background-color: rgba(255, 255, 255, 0.12); 
} 
.button .wrap::after { 
  left: 6%; 
  right: 6%; 
  top: 12%; 
  bottom: 40%; 
  border-radius: 22px 22px 0 0; 
  box-shadow: inset 0 10px 8px -10px rgba(255, 255, 255, 0.8); 
  background: linear-gradient( 
    180deg, 
    rgba(255, 255, 255, 0.3) 0%, 
    rgba(0, 0, 0, 0) 50%, 
    rgba(0, 0, 0, 0) 100% 
  ); 
} 
.button:hover { 
  box-shadow: 
    inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.4), 
    inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7), 
    inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.7), 
    0 3rem 3rem rgba(0, 0, 0, 0.3), 
    0 1rem 1rem -0.6rem rgba(0, 0, 0, 0.8); 
} 
.button:hover .wrap::before { 
  transform: translateY(-5%); 
} 
.button:hover .wrap::after { 
  opacity: 0.4; 
  transform: translateY(5%); 
} 
.button:hover .wrap p { 
  transform: translateY(-4%); 
} 
.button:active { 
  transform: translateY(4px); 
  box-shadow: 
    inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.5), 
    inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.8), 
    inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.4), 
    0 3rem 3rem rgba(0, 0, 0, 0.3), 
    0 1rem 1rem -0.6rem rgba(0, 0, 0, 0.8); 
}
        .qr-form { flex-direction: row; align-items: center; }
        @media (max-width: 700px) {
          .qr-form { flex-direction: column; }
          .btn { width: 100%; height: 2.5em; border-radius: 1.2em; }
          .qr-form input[type="text"] { width: 100%; padding: 1.1em; font-size: 1.1em; border-radius: 2em; }
        }
        #qrcode { display: flex; justify-content: center; margin-top: 2em; }
        @media (max-width: 500px) { .qr-container { padding: 1em; } }