/* General styles */

  @import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');

body {
  margin: 0;
  padding: 0;
  font-family: 'Space Mono', monospace;
  background-color: #000000;
}

.contnair {
  width: 80%;
  height: 70vh;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid blue;
  margin-top: 20px;
  border-radius: 1rem;
 
  background-size: cover;
  background: linear-gradient(56deg, #686B88, #2735D8,#595D86,#9B7CEC);
  overflow: hidden;
}
.bb{
    text-decoration: none;
    border: none;
}
a{
    
    text-decoration: none;
    width: 200px;
    height: 30px;
    border: 1px solid #847F8F;
    border-radius: 10px;
    color: #FFFFFF;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: bolder;
    font-size: 25px;
    transition:  0.9s;
    backdrop-filter: blur(5000px);
}

a:hover{
    transform: translateY(15px);
}
h3{
  color: white!important;
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
  
}
#url-input {
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  background-color: transparent;
  backdrop-filter: blur(800px);
  margin-bottom: 10px;
  border-left: none;
  
  border-top: 10px solid white;
  
}
#url-input:hover{
    border: none;
    outline: none;
    
}

#url-input{
    border:none;
    outline: none;
}


button {
  padding: 10px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0062cc;
}

#qr-code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
}

#qr-code-container img {
  max-width: 80%;
  
}

#qr-code-container a {
  margin-top: 5px;
}

/* Media queries */
@media screen and (max-width: 580px) {
  .contnair{
      height: 55vh;
  }
  
  h1{
      margin-top: 5px;
  }
  #qr-code-container img {
  max-width: 40%;
  
}
  input[type="text"] {
    font-size: 17px;
  }
  
  button {
    font-size: 18px;
   
  }
  a{
      width: 150px;
      font-size: 15px;
      height: 20px;
  }
}



.focus-in-expand {
	-webkit-animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-3-7 14:18:10
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation focus-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}