@media all and (max-width: 1023px)
  {
  html
      {
   font-size: 24px;
   }
  }

@media all and (min-width: 1024px)
  {
  html
      {
   font-size: 16px;
   }
  }
  
body {
  background-image: url("BackgroundZHGA3.png");
  background-repeat: no-repeat;
  background-color: #a6a9ad;
  /* background-color: #e3fcff; */
  background-size: 1000px 820px;
  margin: 5%;
  color: #3d3d5c;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  }

bg-img {
  opacity: 0.2;
  }
  
a {
  color: #69727a;
}

a:link { color:#69727a }
a:visited { color:#69727a; }
a:hover { color:#000000; }
a:active { color:#69727a; }
	
h2 {
  color: #3d3d5c;
  font-size: 2rem;
  }

input[type=text] {
  width: 300px;
  padding: 3px 3px;
  margin: 2px 0;
  box-sizing: border-box;
  border: 1px solid blue;
  background-color: #a2c4fa;
  color: #000000;
  font-size: 1.1rem;
}

input[type=password] {
  width: 300px;
  padding: 3px 3px;
  margin: 2px 0;
  box-sizing: border-box;
  border: 1px solid blue;
  background-color: #a2c4fa;
  color: #000000;
  font-size: 1.1rem;
}

input[type=submit] {
  padding: 3px 3px;
  margin: 2px 0;
  box-sizing: border-box;
  border: 1px solid blue;
  background-color: #b5cbdd;
  color: #000000;
  font-size: 1.1rem;
 }