@import url('https://fonts.google.com/specimen/Outfit');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: lightblue;
    height: 100%;
    font-family: outfit, sans-serif; /* uses the imported font */
}

.container{
    display: flex;
    justify-content: center; /* centers horizontally */
    align-items: center;     /* centers vertically */
    width: 100%;
    height: 100vh;          /* full viewport height */
    padding: 50px;
}

.qr-code{
    background-color: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 40%;
    min-width: 300px; /* ensures the QR code component is not too small */
    max-width: 500px; /* ensures the QR code component does not exceed this width */
}

.qr-code img{
    max-width: 500px; /* ensures the image does not exceed this width */
    width: 100%;      /* makes the image responsive */
    max-width: 500px;
    border-radius: 20px;
    margin-bottom: 20px; /* adds space below the image */
}

.qr-code h1{
    margin-bottom: 10px;
    padding: 10px 0;
    font-size: 1.5rem; /* sets the font size */
}

.qr-code p{
    margin-bottom: 10px;
    padding: 10px 0;
    font-size: 15px; /* sets the font size */
}

.main-footer{
    text-align: center;
    padding: 20px 0;
    font-size: 16px; /* sets the font size */
    color: white;
    background-color: hsl(0, 0%, 0%); /* sets the text color */
    margin: 20px 0; /* adds space above and below the footer */
}

a{
    text-decoration: none; /* removes underline from links */
    color: silver; /* sets the link */
}

a:hover{
    cursor: pointer; /* changes cursor to pointer on hover */
    color: hsl(228, 45%, 44%); /* changes link color on hover */
}