body{
  background-image: url('imgs/water.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  color:black;
  font-family: 'myFont';
}

@font-face {
  font-family: myFont;
  src:url("fonts/gothic.ttf?#iefix") format("truetype");
  }
h1 {
  font-family:"myFont";
  font-size:60px;
  }
h2 {
  font-size:40px;}
  p {
    font-family:"myFont";
    font-size:30px;}

.myDiv{
  border-color:teal;
  border-style:outset;
  color:teal;
  margin-left:20%;
  margin-right:20%;
  padding:3%;
  margin-top:5px;
  width:50%;
  background-color:white; }
  .div2{
  border-color:teal;
  border-style:outset;
  color:teal;
  padding:1%;
  margin-top:1%;
  margin:3%;
  background-color:white; }
.imgtxt {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.imgtxt span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 2.5rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.imgtxt:hover span, .imgtxt:focus span {
  opacity: 1;
}
.imgtxt:hover img, .imgtxt:focus img {
}