body {
    background-color: black;
}



#void {
    
    position: relative;
    /*
    display: flex;
    align-items: center; */
    height: 90vh;
    /* gap: 20px; */
    width: 90vw;
    /* font-family: monospace; */
    /* border: 1px solid #00FF00; */
}

/* span { 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  z-index: 1;


  background-image: url('empty.gif');
}    */

p {
    all: unset;
    padding: 10px;
    /* border: 1px solid #00FF00; */
}

.sequence1 {
    position: absolute;
    top: 20%;
    left: 58%;
    /* transform: translate(-50%, -50%); beware of this, not neccessary for images, messes with animations, returns the element to its initial position without this transform */
    width: 25em;
    /* height: 300px; */
    object-fit: cover;
    border: 3px solid cyan;
    /* border-radius: 10px; */
}


.dialogue-box {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%);
    width: 30em;
    font-family: monospace;
    /* flex: 1; */
    padding: 10px;
    border-left: 1px ridge cyan;
    color: cyan;
    /* border-radius: 10px; */
    /* background: #000000; */
    cursor: crosshair;
    /* user-select: none; */
}

/* Dialogbox - aufgeräumt */

.dialogue-box2 {

  position: absolute;

  left: 46%;

  top: 59%;

  transform: translate(-50%);

  width: 30em;

  font-family: monospace;

  padding: 10px;

  border-left: 1px solid violet; /* Farbe ergänzt */

  color: violet;

  cursor: crosshair;

}

.dialogue-box3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* width: 30em; */
    font-family: monospace;
    /* flex: 1; */
    padding: 10px;
    /* border: 1px solid #00FF00; */
    color: cyan;
    /* border-radius: 10px; */
    /* background: #000000; */
    cursor: crosshair;
    /* user-select: none; */
}

.dialogue-box4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* width: 30em; */
    font-family: monospace;
    /* flex: 1; */
    padding: 10px;
    border-left: 1px solid violet;
    color: violet;
    /* border-radius: 10px; */
    /* background: #000000; */
    cursor: crosshair;
    /* user-select: none; */
}

#captaincontainer {
    width: 20em;
    height: 15em;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 30%;
    left: 70%;
    transform: translate(-50%);

}

.nametagcaptain {
    position: absolute;
    top: 75%;
    /* top: 56%;
    left: 70.4%; */
    /* transform: translate(-50%, -50%); */
    width: 30em;
    font-family: monospace;
    /* flex: 1; */
    padding: 10px;
    /* border-left: 1px solid ; */
    color:lime;
    
}

.portraitcaptain {
    position: static;
    margin-bottom: 3.7em;
    /* top: 40%;
    left: 62%;
    transform: translate(-50%, -50%); */
    width: 8.5em;
    height: 8.5em;
    object-fit: cover;
    border: 3px solid #00FF00;
    /* border-radius: 10px; */
}

.dialogue-box-captain {
    position: static;
    /* top: 60%;
    left: 70.4%; */
    /* transform: translate(-50%, -50%); */
    /* width: 20em; */
    font-family: monospace;
    /* flex: 1; */
    padding: 10px;
    border-left: 1px solid ;
    color:lime;
    /* border-radius: 10px; */
    /* background: #000000; */
    cursor: crosshair;
    /* user-select: none; */
}

#counsellorcontainer {
    width: 20em;
    height: 15em;
    /* border: 1px solid violet;  */
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 30%;
    left: 40%;
    transform: translate(-50%);

}

.nametagcounsellor {
     position: absolute;
    top: 75%;
    /* top: 56%;
    left: 70.4%; */
    /* transform: translate(-50%, -50%); */
    width: 30em;
    font-family: monospace;
    /* flex: 1; */
    padding: 10px;
    /* border-left: 1px solid ; */
    color: violet;
    
}

.portraitcounsellor {
    position: static;
    margin-bottom: 3.7em;
    /* top: 40%;
    left: 62%;
    transform: translate(-50%, -50%); */
    width: 8.5em;
    height: 8.5em;
    object-fit: cover;
    border: 3px solid violet;
    /* border-radius: 10px; */
}

.dialogue-box-counsellor {
    position: static;
    /* top: 60%;
    left: 70.4%; */
    /* transform: translate(-50%, -50%); */
    width: 20em;
    font-family: monospace;
    /* flex: 1; */
    padding: 10px;
    border-left: 1px solid ;
    color: violet;
    /* border-radius: 10px; */
    /* background: #000000; */
    cursor: crosshair;
    /* user-select: none; */
}


/* .nametagcounsellor {
    position: absolute;
    top: 56%;
    left: 46.9%;
    transform: translate(-50%, -50%);
    width: 30em;
    font-family: monospace;
    flex: 1;
    padding: 10px;
    border-left: 1px solid ;
    color:violet;
    
}

.portraitcounsellor {
    position: absolute;
    top: 40%;
    left: 38%; tu diese drei attributes in die flicker animation
    transform: translate(-50%, -50%);
     width: 8.5em;
    height: 8.5em;
    object-fit: cover;
    border: 3px solid violet;
    border-radius: 10px;
}

.dialogue-box-counsellor {
    position: absolute;
    top: 60%;
    left: 42.5%;
    transform: translate(-50%, -50%);
    width: 20em;
    font-family: monospace;
    flex: 1;
    padding: 10px;
    border-left: 1px solid ;
    color:violet;
    border-radius: 10px;
    background: #000000;
    cursor: crosshair;
    user-select: none;
} */




  a {
      text-decoration: none;
      cursor: crosshair;
      display: block;
      color: inherit;
      width: 100%;
      height: 100%;
    }

    a:visited {
        color: inherit;
    }