:root {
  --color1:#0d1b2a; 
  --color2:#1b263b; 
  --color3:#415a77; 
  --color4:#778da9; 
  --color5:#e0e1dd; 
}

h1  {
  font-family:monospace;
    color: var(--color4);
    margin-left:2%;
    width: 100%;
}

p {
    font-family:monospace;
    color: var(--color4);
    font-size: 1.4em; 
}

.itemname {
  margin-left:0%;
}

.profilepic {
  border-radius: 9px;
}

pre {
  white-space: pre-wrap;       
  white-space: -moz-pre-wrap;  
  white-space: -pre-wrap;      
  white-space: -o-pre-wrap;   
  word-wrap: break-word;       
}

.info {
  margin:1%;
  margin-top:0;
  margin-bottom:0;
  width:60%;
  flex-grow: 9;
  vertical-align: top;
  padding:15px;
  border-radius: 9px;
  font-family:monospace;
  color: var(--color4);
  font-size: 1.40em;
}

.bio {
  margin:1%;
  margin-top:15px;
  margin-bottom:0;
  width:150px;
  max-width:40%;
  vertical-align: top;
  background-color: var(--color3);
  padding:15px;
  border-radius: 9px;
  flex-grow: 1;
  height:100%
}

.box {
  margin:1%;
  margin-top:15px;
  margin-bottom:0;

  max-width:100%;
  vertical-align: top;
  background-color: var(--color2);
  padding:15px;
  border-radius: 9px;
  flex-grow: 1;
  height:100%
}

.content {
  margin:1%;
  margin-top:15px;
  margin-bottom:0;
  width:250px;
  max-width:100%;
  vertical-align: top;
  padding:15px;
  border-radius: 9px;
  flex-grow: 1;
  height:100%
}

.biotext {
    color: var(--color1);
    font-size: 1.2em;
    text-align: center;
}

.nametext {
   color: var(--color1);
   text-align: center;
}

body {
  background: var(--color1)
}

.disp {
    display: flex;
    flex-wrap: wrap;
    justify-content:space-evenly;
    margin-right:2%;
    margin-left:2%
  }

  li {
    color: var(--color4);
  }

  li a {
    font-family:monospace;
    display: inline-block;
    padding: 5px;
    font-size: 1.35em;
    color: var(--color4);
  }

  ul.topnav {
    border-radius: 9px;
    list-style-type: none;
    margin: 10px;
    padding: 0;
    overflow: hidden;
    background: var(--color4);
  }
  
  ul.topnav li {float: left;}
  
  ul.topnav li a {
    font-size: 1.45em;
    display: block;
    color: var(--color1);
    text-align: center;
    padding: 5px 16px;
    text-decoration: none;
  }
  
  ul.topnav li a:hover:not(.active) {background-color: var(--color3);}
  ul.topnav li a.active {background-color: var(--color3);}
  
  ul.topnav li.right {float: right;}
  
  @media screen and (max-width: 700px) {
    ul.topnav li.right, 
    ul.topnav li {float: none;}
  }

  ul {
    list-style: none;
    padding:5px;
  }