:root {
    --White: hsl(0, 0%, 100%);
    --Light_gray: hsl(212, 45%, 89%);
    --Grayish_blue: hsl(220, 15%, 55%);
    --Dark_blue: hsl(218, 44%, 22%);

    --off-white: rgba(255, 255, 255, 0.5); 
    --blue: hsl(217, 87%, 57%);
}

* {
    margin: 0;
    font-family: Outfit;
}

body {
    font-size: 15px;
}

.main-container {
    background-color: var(--Light_gray);
    width: 1440px;
    height: 670px;
}

.card {
    background-color: var(--White);
    width: 270px;
    height: 430px;
    margin: auto;
    top: 110px;
    position: relative;
    border-radius: 15px;
}


.qr {
    background-color: green;
    width: 240px;
    height: 240px;
    position: relative;
    margin: auto;
    top: 15px;
    border-radius: 10px;
}

.qr img {
    top: 0px;
}

/* .top-circle {
    background-color: var(--off-white);
    width: 300px;
    height: 300px;
    border-radius: 100%;
    position: relative;
    bottom: 350px;
    right: 130px;
}

.bottom-circle {
    background-color: var(--off-white);
    width: 300px;
    height: 300px;
    border-radius: 100%;
    position: relative;
    bottom: 360px;
    left: 110px;
} */

.card-text {
    margin: 35px auto;
    padding: 0 25px;
    text-align: center;
}

h2 {
    font-size: 1.2rem;
    font-weight: 700;
}

p {
    font-size: 0.85rem;
    font-weight: 400;
}

.card p {
    color: var(--Grayish_blue);
    margin-top: 15px;
    
}


.attribution { 
    width: 1440px;
    font-size: 11px; text-align: center; 
}

.attribution a { 
    color: hsl(228, 45%, 44%); 
}