html {
    font-family: 'FT88-Italic';
    color: 	#B71C1C;
  }
@font-face {
  font-family: "VT323";
  src: url('VT323-Regular.ttf');
} 
p {
    font-size: 18px;
    text-align: center;
    font-family: 'Director';
}
h1 {
    margin: 0;
    font-size: 45px;
    text-align: center;
    font-family: 'Director';
}
h2 {
    margin: 0;
    font-size: 30px;
    text-align: center;
    font-family: 'Director';
}
hr {
  border: none;
  height: 40px;
  background-image: url('../images/boilingflowers.gif');
  background-size: auto 100%;
    /*
    the width of the image will be automatically determined
    while the height will be 100% of the element width (in this case its 50px)
    */
    background-repeat: no-repeat; /* the bg wont repeat */
    background-position: center; /* bg will be centered */
    image-rendering: pixelated;
}
@font-face {                  
  font-family: 'FT88-Italic';
  src: url(https://humantooth.neocities.org/fonts/FT88-Italic.woff) format('woff');
  font-weight: normal;
  font-style: normal;
} 
@font-face {                  
  font-family: 'Director';
  src: url(https://humantooth.neocities.org/fonts/Director-Regular.woff) format('woff');
  font-weight: normal;
  font-style: normal;
} 
.homeimg {
    background-image: url('../images/bg.png');
    background-size: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 40vw;
    /*max-height: 1000px;*/
}
.imgtxt {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: absolute;
}
.imgtxt span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 1rem;
  color: #B71C1C;
  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 {
  /* add hover effects like transform or filter to your images here! */
}
.container{
    position: absolute;
    left: 50%;
    top: 50%;
    height: 200px;
    margin-top: -100px; /* half of you height */
    width: 400px;
    margin-left: -200px; /* half of you width */
}
.container2 {
    position: absolute;
    left: 50%;
    top: 20%;
    margin-top: -100px; /* half of you height */
    width: 400px;
    margin-left: -200px; /* half of you width */
    justify-content:center;
}
.article {
  width: 600px;
  /*background-color: #000;*/
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  text-align: center;
  font-size: 18px;
  padding: 20px;
}

.box{
  max-width: 1000px;
  margin: 100px auto;
  display: grid;
  grid-gap: 50px;
  grid-template-columns: 250px minmax(0,1fr);
}

header, nav, main{
  background-color: #000;
}

header {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  display: flex;
  justify-content: center;
  padding: 20px
}

nav {
 grid-row: 2 / 3;
 grid-column: 1 / 2;
 height: max-content;
 background-color: #000;
 padding: 20px;
}

main {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  height: max-content;
  background-color: #000;
}

footer {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
  justify-content: center;
  display: flex;
  justify-content: center;
  padding: 20px
}

/* unvisited link */
a:link {
  color: #fff;
}

/* visited link */
a:visited {
  color: purple;
}