stylesheet.css

*, *:before, *::after {
    box-sizing: border-box;
    font-family: 'Bogart', sans-serif; 
}

body {
    padding: 0; 
    margin: 0; 
    display: flex; 
    justify-content: center;
    align-items: center;
    width: 100vw; 
    height: 100vh; 
    background-image: url(https://lh3.googleusercontent.com/LunxEOYeQAvZ2iXZMSAyMZxBgHRheVx7ysuzRkHq3Uku17obc6xP_yZSshCo6aO7M210YNlC1kpP2vzf9I5MYgrfcJjjTdN3_s2YCpol4CS9UxLL72qsC2MiZ9MCxT5VsiNfhdORkOf_VhJBNqH4JoNI_IKiqusDfhW3DE-VuIodaxfe8IlyVNfL9kWN8QdghYzZ6MTUVYhLfXCRBJDdvlKbVg_U40LQvLqbFCa7m3DFAIed5ldBQobvD731irr_FWaFAOEik7681vAs9o1Q6nNZQ_nO0yx05Ictjoh3_rXFJWCy5oETvtQ5Hnxi32hwSzO3MdSrVIv06rM4Werg7qD2lTgLiMRN_nbo5WBs_AjrUXfVd_nCtJJabjZ2AFixs7yXlOKY0rY1DDNxhYWi2iauWZ0a4gNG38LrkgM5DHyM0Q_Zabf9seDWcXa9-8QV8MJlLzXpnUYq_zswLOG_wy7cDFlakrpFDXxfctiLozIOe6D5HyuczuZSHXu1sqMhgodZGBIaZcYLc1Xp78Wje2A3hnUGlqBFb75FOvdrSB5a8jQ5wZYfrTdJwt518JEHT_cLMmfAtTaYMHVFD-rcD2AT9_BpjOgB3PQbc5VMGMIzccnIpmjbkH7SICaH3cuHfOQslYJy5_LdSWZm5K-mXSkWiub_sF6Pv9iG8vDCrYYF3ogOUmKtAx9EVoaR_61ZSIQRYvYq41pnY3qVBOhgaM_17eOBJcrv69tVYuqclK0n0BDcc1R3ukTKcNvc=w1306-h721-no?authuser=0);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
}

.container {
    width:300px; 
    max-width: 100%;
    background-color: lightpink;
    padding: 10px; 
    border-radius: 5px; 
    box-shadow: 0 0 10px 2px white; 
    text-align: center; 
    margin: 0 auto; 
    display: block; 
}


.buttonOptions {
    width:300px; 
    max-width: 100%;
    background-color: lightpink;
    padding: 10px; 
    border-radius: 5px; 
    box-shadow: 0 0 10px 2px white; 
    text-align: center; 
    position: absolute; 
    bottom: 25px;
    display: block; 
}


.btn-grid {
    margin-top: 20px; 
    
}

.btn {
    background-color: hsl(248, 53%, 58%);
    border: 1px solid hsl(248, 53%, 30%);
    border-radius: 5px; 
    padding: 5px 10px; 
    color: white; 
    outline: none; 
    margin: 5px; 
}
  
.btn:hover {
    border-color: white; 
}

.reset-btn {
    background-color: hsl(248, 53%, 58%);
    border: 1px solid hsl(248, 53%, 30%);
    border-radius: 5px; 
    padding: 5px 10px; 
    color: white; 
    outline: none; 
    margin: 5px;
}

.reset-btn:hover {
    border-color: white; 
}

#text {
    color: hsl(248, 53%, 30%);
}

.titleImage { 
position: absolute; 
top:0px;
right:0px;
bottom:0px;
left:0px;
overflow-x: hidden;
overflow-y: auto;
}