html {
  --zoom-scale: 1;
  /*TODO add code for this*/
}

html, body {
  margin: 0;
  padding: 0;
  color: whitesmoke;
  font-family: 'Courier New Bold', monospace;
}

body {
  background-color: #FFFFFF;
}

img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

a {
  display: block;
  width: 100%;
}

.root {
  position: relative;
}

.link-map {
  position: absolute;
  top: calc( 2vw * var(--zoom-scale) );
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: calc( 50vw * var(--zoom-scale) );
  height: calc( 60vw * var(--zoom-scale) );
  display: flex;
}

.link-map-bg {
  position: absolute;
  width: calc( 50vw * var(--zoom-scale) );
}

.link-commissions {
  position: absolute;
  width: calc( 23.60vw * var(--zoom-scale) );
  top: calc( 70.15vw * var(--zoom-scale) );
  left: calc( 6.45vw * var(--zoom-scale) );
}

.link-donate {
  position: absolute;
  width: calc( 18.1vw * var(--zoom-scale) );
  top: calc( 46.29vw * var(--zoom-scale) );
  left: calc( 19.1vw * var(--zoom-scale) );
  
}

.link-patreon {
  position: absolute;
  width: calc( 10vw * var(--zoom-scale) );
  top: calc( 12.1vw * var(--zoom-scale) );
  left: calc( 19.3vw * var(--zoom-scale) );
}

.link-subscribestar {
  position: absolute;
  width: calc( 10vw * var(--zoom-scale) );
  top: calc( 12.35vw * var(--zoom-scale) );
  left: calc( 4vw * var(--zoom-scale) );
}

.invisible {
  opacity: 0;
}

.invisible:hover {
  opacity: 1;
}

#unfinishedmeme {
  width: 30vw;
  height: 30vw;
}