img {
  width: 100%;
}

video {
  width: auto;
}

body{
  background-color: white;
}

@font-face {
  font-family: 'antiqua';
  src: url('./fonts/Antiquaregular.tff') format('truetype');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'strassburgfraktur';
  src: url('./fonts/strassburgfraktur.tff') format('truetype');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}


.empire-text-container {
  font-size: 400px ;
  font-family: strassburg fraktur;
  color: yellow;
  text-align: center;
  position: absolute;
  left: 35%;
  top:28%;
  animation: textappear 2s
}


a:link {
  text-decoration: none;
  color: black;
}

a:visited {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: none;
  color: yellow;
  cursor: pointer;
}

a:active {
  text-decoration: none;
  color: black;
}



@keyframes textappear{
  0%{
    display: none;
    opacity: 0;
  }
  99%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

.thomascole4 {
  position: relative;
  cursor: pointer;
}

.thomascole4-container{
  position: absolute;
  margin-top: 0% ;
  left: 93.5%;
  width: 8% ;
  animation: textappear 2s
}



.arena1 {
  position: relative;
  cursor: pointer;
}

.arena1-container{
  position: absolute;
  margin-top: 35% ;
  left: 38%;
  width: 6% ;
  animation: textappear 2s
}
.arena2{
  position: absolute ;
  top:0;
  left:0;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0s;
}

.arena2:hover {
  opacity:1;
  cursor: pointer;
}

.book {
  position: relative;
  cursor: pointer;
}

.book-container{
  position: absolute;
  margin-top: 35% ;
  left: 46%;
  width: 6% ;
  animation: textappear 2s
}
.book2{
  position: absolute ;
  top:0;
  left:0;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0s;
}

.book2:hover {
  opacity:1;
  cursor: pointer;
}


.me {
  position: relative;
  cursor: pointer;
}

.me-container{
  position: absolute;
  margin-top: 35% ;
  left: 46%;
  width: 6% ;
  animation: textappear 2s
}
.me2{
  position: absolute ;
  top:0;
  left:0;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0s;
}

.me2:hover {
  opacity:1;
  cursor: pointer;
}