/* Add GG Ampion Font */

@font-face {font-family: ggampion; src: url(https://phuwatthepro.github.io/montetesting/gg_ampion-v1.ttf);}

body {font-family: ggampion;}

/* Font styling */

h1 {font-size: 3em;}

h2 {font-size: 2.25em;}

h3 {font-size: 1.75em;}

p {font-size: 1.5em;}

/* Link coloring */

a:link {color: blue;}

a:visited {color: blue;}

a:hover {color: blue;}

a:active {color: blue;}

      .square2 {
      background-color: white;
      width: 1000px;
      height: 150px;
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: -1;
      border-radius: 20px;
      }
       a {
      text-align: center;
      display: block;
      }
       h1 {
      text-align: center;
      }
       .center {
      margin: auto;
      display: block;
      width: 800px;
      height: 2000;
      border-radius: 20px;
      }
      .square {
      background-color: white;
      width: 800px;
      height: 2000px;
      margin: auto;
      text-align: center;
      padding: 20px;
      border-radius: 20px;
      z-index: -1;
      }
       body {
      background-image: url('https://phuwatthepro.github.io/montetesting/AB2.png');
      background-size: cover;
      background-repeat: repeat-y;
      }
      h2 {
      text-align: center;
      }
       td {
      text-align: center;
      }
       tr {
      text-align: center;
      }
       th {
      text-align: center;
      }
       h3 {
      text-align: center;
      }
       ul {
      text-align: center;
      }
       li {
      text-align: center;
}
#target { 
position: absolute; 
width: 50px;
 height: 50px;
 background-color: red; 
 border-radius: 50%;
 }
#circle { 
width: 100px; height:
 100px; border-radius: 50%;
 background-color: black;
 cursor: pointer;
 margin: auto;
 display: block;
 }
.container {
 display: flex;
 flex-direction: column;
 align-items: center;
 } 
.choices { 
display: flex;v
 } 
.choice1 { 
height: 100px; 
width: 100px; 
border: 1px solid black; 
display: flex;
 justify-content: center;
 align-items: center; 
font-size: 24px;
 cursor: pointer;
 background-color: white;
 }
 .choice:hover { 
background-color: lightgray;
 }
 .result {
 margin-top: 20px; 
font-size: 24px;
 }
 .scores { 
margin-top: 20px;
 font-size: 18px;
 }
canvas {
        border: 1px solid black;
        margin: auto;
        display: block;
      }
#ip-address {
      text-align: center;
    }
body {
        margin: 0;
        padding: 0;
      }
      canvasred {
        display: block;
      }
   #circle1 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: black;
        cursor: pointer;
        margin: auto;
        display: block;
      }
      .choice {
        height: 100px;
        width: 100px;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        cursor: pointer;
        background-color: white;
      }
.textbox {
  position: relative;
  z-index: -1;
}

img.textbox {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.content {
  position: relative;
  z-index: 1;
  padding: 20px;
}