body {
    text-align: center;
}

#container {
    border-radius: 20px;
    background: white;
    width: 50%;
    padding-top: 20px;
    width: fit-content;
    margin: 0 auto; /* Horizontally center the container */
    display: flex; /* Use flexbox for centering */
    flex-direction: column; /* Stack child elements vertically */
    align-items: center; /* Center child elements horizontally */
    justify-content: center; /* Center child elements vertically */
}

#bkgrndColor {
    background-color: hsl(212, 45%, 89%);
}

#boldText {
    color: hsl(218, 44%, 22%);
    padding: 20px;
    font-weight: bolder;
    font-family: Outfit, sans-serif; /* Specify a fallback font */
    src: url(./Outfit-VariableFont_wght.ttf);
}

#grayText {
    color: hsl(220, 15%, 55%);
    font-weight: 400; /* Font weight should be a single value */
    padding: 10px;
    margin-left: 30px;
    margin-right: 30px;
    padding-bottom: 40px;
    font-family: Outfit, sans-serif; 
    src: url(./Outfit-VariableFont_wght.ttf);
}

#img {
    border-radius: 20px;
    max-width: 90%; /* Ensure the image doesn't exceed the container width  */
}