html {
    display: table;
    margin: auto;
}

html, body {
    height: 80%;
    width: 95%;
}

body {
    background-color: rgb(0 1 179); /*old: grell: #3733E0*/
    color: white;
    font-family: OLD_BIOS;
    display: table-cell;
    vertical-align: middle;
}

h1 {
    text-align: left;
    /* font-size: 70px; */
    font-size: 4vw;
    margin-right: 1vw;
    display: inline;
}
  /* Use a media query to add a breakpoint at 800px: */
  @media screen and (max-width: 800px) {
    h1 {
        font-size: 5vw;
    }
  }

h1 a:hover{
    background-color: #0F5CBF; /*old: */
}

#bioslogo {
    display: inline;
    height: 6vw;
    width: 6vw;
    border-radius: 5vw;
    margin-top: 5vh;
    /*margin-left: 40vw; */
    
}
#instagram{
    margin-left: 30vw;
    margin-top: 10vw;
    font-size: 3em; /* Sie können den Wert nach Belieben anpassen */
}

#icon{
    font-size: 3em;
}

#abouttxt{
    padding-left: 8vw;
    padding-right: 8vw;
}

#djimg {
    height: 8vw;
    width: 8vw;
    border-radius: 6vw;
}

  /* Use a media query to add a breakpoint at 800px: */
  @media screen and (max-width: 800px) {
    #djimg {
        height: 22vw;
        width: 22vw;
        border-radius: 11vw;
    }
  }

#biostext{
    border-color: white;
    border-style: double;
    font-size: 2vw;
    border-width: 2vw;
    padding-bottom: 45vw;
    width: 95%;
    height: 40vh;
}

  /* Use a media query to add a breakpoint at 800px: */
  @media screen and (max-width: 800px) {
    #biostext {
        font-size: 2.5vw;
    }
  }

.flex-container{
    display: inline-block;
}

li{
    list-style-type: none;
    padding: 0.5vw;
}

a{
    color: white;
    text-decoration: none;
}

#status{
    /*border: solid black;*/
    padding: 3vw;
}

#names{
    /*border: solid black;*/
    padding: 3vw;
    margin-left: 4vw;
}

#bioshead {

}

.list{
     
}

#info{
    visibility: hidden;
    background: darkred;
}

a:hover{
    text-decoration: underline;
    background-color: darkred;
}

#about{
    border-color: white;
}
/*position relative as a base for non-static elements*/
#outerDiv{
    /*border: solid black;*/
    justify-content: center;
    height: 25vw;
}

/*every direct child positioned absolute*/
#outerDiv > div {
    position: absolute;
    top: 30vh;
    right: 8vw;
    background: #E04942;
    visibility: hidden;
    width: 27vw;
    font-size: 1.5vw;
    text-align: center;
    /*border: solid 0.5px white; /*evtl ohne border?*/
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
    #outerDiv > div {
      /*  width: 100%;  The width is 100%, when the viewport is 800px or smaller */
      top: 36vh;
      right: 28vw;
      font-size: 2.5vw;
      width: 43vw;
    }
  }