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

.bg {
    position: relative;
    width: 100vw;
    height: 100vh;
    
    
  }
.hotspot {
    position: absolute;
    cursor: pointer;
}
.aboutme{
     left:65.6%;
    top:39%;
    width:11%;
    height:19%;

    background:transparent;
}
.aboutme:hover {
    background: rgb(0 193 83 / 33%);
}

.aboutallanon{
     left:65.6%;
    top:13.9%;
    width:11%;
    height:19%;

    background:transparent;
}
.aboutallanon:hover {
    background:#ff00825c;
}

.creative{
     left:15.7%;
    top:41%;
    width:10.5%;
    height:19%;
      transform: rotate(3deg);

    background: transparent;
}
.creative:hover {
    background: #005aff4d;
}
.navigate{
     left:16%;
    top:66%;
    width:11%;
    height:20%;
     transform: rotate(3deg);

    background: transparent;
}
.navigate:hover {
    background: #ff99004a;
}

.relationship{
     left:67.68%;
    top:60.5%;
    width:11.2%;
    height:19.9%;
     transform: rotate(1deg);

    background: transparent;
}
.relationship:hover {
    background: #c27c4e61;
}