/* Here is a very thought-provoking comment */

/* <img src="images/PETA_backimage.jpg" alt="Sad Dog"> */
h1 {
    text-align: center;
    text-transform: uppercase;
    color: rgb(63, 127, 224);
}
h2 {
    background-color:blue;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
p {
    color: rgb(93, 203, 220);
    font-size: medium;
    font-style: italic;
    font-family: fantasy;
} 
/* This css applies to the wrapper div */ 
.wrapper{
      max-width: 1000px;
      margin: 0px auto;
      /* Display this div as a grid */
      display: grid;
      /* Create two columns, each with a width of auto */
      grid-template-columns: 2fr 2fr 2fr;
      /* Create two rows each defined as 1fr (fractional unit) */
      grid-template-rows: 2fr 2fr;
      /* The space between each row and column (print designers call this the gutter) */
      grid-template-areas: 
      'item1 item2 item3'
      'item1 item5 item6';
      gap: 10px;
      /* Set the background color to purple */
      background-color: rgb(112, 3, 166);
      /* Add 10px of padding around the grid */
      padding: 10px;
    }

/* This css applies to each div that is a child of .wrapper */
.wrapper > div {
      /* Each child div has a white background color */
      background-color: rgb(255, 255, 255);
      /* The text within each child div is centered */
      text-align: center;
    }
.item1 { grid-area: item1; }
.item2 { grid-area: item2; }
.item3 { grid-area: item3; }
.item4 { grid-area: item4; }
.item5 { grid-area: item5; }
.item6 { grid-area: item6; }

.item4 {display: none;}

.quizh2 {
    background-color: transparent;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
}

.quizp {
    font-family: 'Times New Roman', Times, serif;
    color:black;
    font-size: medium;
    font-style: normal;
}

form {
    background-color: #f7f7f7;
}