html , body{
    overflow-x: hidden;
}
body {
    margin:0;
}

.main-container {
    width:100vw;
    height:100vh;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: hsl(212, 45%, 89%);
}
.card {
    display:flex;
    justify-content:center;
    align-items: center;
    width:320px;
    height:499px;
    border-radius:21px;
    padding:16px;
    flex-direction: column;
    background-color: hsl(0, 0%, 100%);
    box-shadow: 0 4px 30px hsl(0, 0%, 69%);
    backdrop-filter: blur(5px);
}
.qr-code-img {
    width:98%;
    height:98%;
    border-radius:21px;
}

.text-container {
    display:flex;
    flex-direction: column;
    justify-content: center;
}
.title {
    font-family:  "Outfit", sans-serif;
    color:hsl(218, 44%, 22%);
    font-size: 24px;
    font-weight:700;
    text-align: center;
}
.description {
    font-family:  "Outfit", sans-serif;
    font-size:15px;
    color:hsl(216, 15%, 48%);
    font-weight: 400;
    text-align: center;
}
.attribution {
    font-family:  "Outfit", sans-serif;
    font-weight: 600;
    display:flex;
    justify-content: center;
}
.attribution a {
    text-decoration: none;
}
.attribution a:hover {
    text-decoration: underline;
    text-decoration-color: hsl(218, 44%, 22%);
    color:rgb(85, 0, 255);
    transition: color 0.4s ease-in-out;
}