.flex {
    width: auto;
    height: 20vh;   
    margin: 8vh;
    padding: 5vh;
}

div {
    width: auto;
    height: 20vh;   
    margin: 8vh;
    padding: 5vh;
}

.q1 {
    display: flex;
    justify-content: right;
    align-content: center;

    font-family: serif;
    color: white;
    font-size: 30pt;
    
    background-image: linear-gradient(to right, #7158a5, #ed2079, #faae1c);
}

.q2 {
    font-family: "rockwell", sans-serif;
    font-weight: 400;
    font-style: normal;

    justify-content: center;
    color: #13723a; 
    font-size: 30px;
    
    background-color: limegreen; 
}

.q3 {
    color: #70cddd;
    background-image: url(images/q7bg.png);
    text-align: center;
    align-content: center;
    font-family: "shelby";
    font-size: 40px; 
}

.q4 {

    color: white;
    font-family: "Century-Gothic", sans-serif;
    justify-content: center;
    text-align: center;
    align-content: center; 
    font-size: 22px;
    background-image: url(images/q3bg.png)

}

.q5 {
    background-image: radial-gradient(#c1282d, #684e4e);
    display: flex;              /* make q4 the flex container */
    align-items: center;
    gap: 20px;
}


.q5 .container1 {
    flex: 1;
}


.q5 .container1 img {
    width: 100%;
    height: auto;
    align-content: center;
}


.q5 .text1 {
    flex: 2;
    color: antiquewhite;
    text-align: left;
    font-size: 15px;
    align-content: center;

}

.q6 {
    color: white;
    font-size: 25px;
    font-family: "PT Serif", sans-serif;
    align-content: center;
    background-image: url(images/q5bg.png)
    
}

.q7 {
    background-color: #cccccc;
    font-size: 26px;
    color: darkslategray;
    font-family: "brooklyn-heritage-script";
    text-align: center;
    align-content: center;
}

.q8 {
    background-image: url(images/q8bg.png);
    text-align: right;
    align-content: center;
    color: white;
    font-family: "refrigerator-deluxe";
    font-size: 33px;
}

.q9 {
    font-family: "new-science", sans-serif;
    align-content: center;
    text-align: center;
    background-color: orange;
}

.gradient-text {
  font-size: 25px;
  font-weight: 600;

  background: linear-gradient(90deg, black, gray, lightgray);
  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.q10 {
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    align-content: center;
    color: white;
    background-color: #a3c2e6;
    font-size: 40px;
}