html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}

.profile-container {
  position: relative;

  width: min(100vw, 177.86vh);
  aspect-ratio: 1366 / 768;

  container-type: inline-size;
}

.bg {
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 100%;
}
  .hotspot {
  position: absolute;
  cursor: pointer;

  font-family: "Geist Pixel", monospace;
 font-size: 2.2cqw;

  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}


.hotspot:visited {
  color: white;
}
  .profile{
    left:13.8%;
    top: 26%;
    width:11.9%;
    height:10%;

   background: transparent;
}

.history{
    left:14%;
    top: 37%;
    width:11.9%;
    height:10%;

   background: transparent;
}

.bnotes{
    left:14.8%;
    top: 47%;
    width:11.9%;
    height:10%;

  background: transparent;
}

.aff {
    left:16%;
    top: 57%;
    width:11.9%;
    height:10%;

    background: transparent;
}

.docs{
    left:15.6%;
    top: 67%;
    width:11.9%;
    height:7%;

  background: transparent; }

.notes{
    left:13%;
    top: 75%;
    width:11.9%;
    height:7%;

    background: transparent;
}

.screen-text {
  position: absolute;
  left: 32%;
  top: 15%;
  width: 52%;
  height: 69%;
overflow: auto;
  background-color: transparent;
  font-family: "Geist Pixel", monospace;
 font-size: 2cqw;
   color: white;
}

.title {
  position: absolute;
  left: 35%;
top: 1.8%;
  width: 44%;
  height: 13.2%;
 
   display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Geist Pixel", monospace;
font-size: 5cqw;
  color: white;
 
}