/* This gives the default text, as a test, which will be changed when hovered over. I used this process to populate the table rows and columns in the jeapordy game, having the text change to give the answers */
.simple-swap::before {
  content: "Hover over me!";
}

/* when the text is hovered over it changes. The css for the next few lines are now populated with questions and answers for jeopardy */
.simple-swap:hover::before {
  content: "Thank you!";
}


.simple-swap1::before {
  content: "He walked on Water";
}


.simple-swap1:hover::before {
  content: "Who is Jesus";
}


.simple-swap2::before {
  content: "He was a short tax collector";
}


.simple-swap2:hover::before {
  content: "Who is Zaccheus";
}

.simple-swap3::before {
  content: "He denied Jesus three times";
}


.simple-swap3:hover::before {
  content: "Who is Peter";
}

.simple-swap4::before {
  content: "He led Israel into the Promised Land after Moses";
}


.simple-swap4:hover::before {
  content: "Who is Joshua";
}

.simple-swap5::before {
  content: "They were a tribe that resisted Moses";
}


.simple-swap5:hover::before {
  content: "Who are the Amelkites";
}

.simple-swap6::before {
  content: "He was a judge that had a lot of strength";
}


.simple-swap6:hover::before {
  content: "Who is Samson";
}

.simple-swap7::before {
  content: "He wrote about joy during trials";
}


.simple-swap7:hover::before {
  content: "Who is James";
}

.simple-swap8::before {
  content: "She gave Solomon a lot of gold and gifts";
}


.simple-swap8:hover::before {
  content: "Who is Queen of Sheba";
}
.simple-swap9::before {
  content: "He was the youngest child of Jacob";
}


.simple-swap9:hover::before {
  content: "Who is Benjamin";
}
/* setting the background color to gold for whole text, and changing a few properties for h1 and h3 */
body {background-color: gold;}
h1 {color:blue;}
h3 {color: Pink; background-color: black; border: 30px dotted gold; font-size: 33px;}

/* This styles the top box about Dog Breeds*/
caption {color: green; font-size: 33px; background-color: gold; border: 3px solid red;}
section {
    background: lightblue;
    margin-bottom: 10px;
    vertical-align: left; 
}
/* This makes the element fill the entire width, and the margins add spacing */

class1 {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
    vertical-align: middle;
}
/* This stylizes the  individual table boxes to give them a green border, and aligning the text left, as well as some extra space with padding*/
th, td {
    border: 5px solid green; 
    padding: 20px;
    text-align: left;
    vertical-align: middle;
    
}

/* For game 1 the text is set to white, background color pink, going for a larger font,  and experimenting with a sort of glimmer shadow effect. The final piece of css is from chatGPT when I asked how to give the text an outline- so I am using what they suggested. */

.Game1  { color: white;
           background-color: pink;
             font-size: 23px;
            text-align: right;   
  text-shadow: 0 0 50px white;
  -webkit-text-stroke: 0.8px black;
  
}
 /*Game Two uses the same settings as Game1. I just made a different CSS tag in case I want to change it later */
.Game2  { color: white;
           background-color: pink;
             font-size: 23px;
            text-align: right;   
  text-shadow: 0 0 50px white;
  -webkit-text-stroke: 0.8px black;
  
}