.article {
  margin:auto;
  width:85%;
}
@media only screen and (max-width: 46em) {
  .article {
    width:95%;
  }
}

.article .container {
  padding: 3%;
}

.article code {
  margin:auto;
  background:none;
}

.header {
    display:inline-block;
    margin-left:7%;
    padding:1%;
    width:auto;
    word-wrap: break-word;
/*     border:1px solid red; */
}

.header-wrap{
    width:100%;
/*     display:inline-block; */
    display:flex;
/*     border: 1px solid red; */
}

.avatar {
    height:6em;
}

.image-wrapper {
    display:inline-block;
    vertical-align:bottom;
}

.header-text{
  display:inline-block;
  padding-bottom:1%;
  margin-left:3%;
/*   width:40%; */
/*   border: 1px solid red; */
}

/*ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type:none;
  width:100%;
}

li {
  height: 40vh;
  flex-grow: 1;
}

li img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
  border:1px solid #ccc
}
img:hover {
  border:1px solid #777;
}

ul:after {
  content: "";
  display: table;
  clear: both;
}*/

@media screen and (min-width: 46em) {
  .header-text-right {
  /*   width:30%; */
    float:right;
    text-align:right;
    display:inline-block;
/*     border: 1px solid red; */
  }
}

@media screen and (max-width: 45em) {
  .header-text-right {
    width:100%;
    margin:auto;
    text-align:center;
    display:inline-block;
/*     border: 1px solid red; */
  }
}

.mininav{
    list-style-type: none;
}

.screenname {
  font-size:200%;
  font-weight:bold;
}