body {
    font: normal 100.01% Helvetica, sans-serif;
    color: black;
    background-color: #ddf0ff; /* #cceeff; */
}

div.leftbox {
position:fixed; width:10em; padding:1ex;border:none;background-color#cceeff:
}

div.rightbox {
margin-left:12em;
}

div.top {
  font-size: 64;
  font-weight: bold;
  color: darkblue;
  text-align: right;
  background-color: #bbddff;

}

img {max-width:100%; height:auto; }

:hover {
   text-decoration: overline underline;
   background-color: #bbccff;
}

.person {
color: #BBEEFF;
font-size: 32;
line-height: 1pt;
}

aside {float:left;
        width:20%;}

main {
        float:left;
        width:80%;}


@media (max-width: 640px) {
aside {
    text-align:center;
        width:100%;
      }
     .left { clear:both; }
     .right { clear:both; }

main {
        color: #000000;
        width:100%;}

ul {
        font-size:large;
}
ul li {
    padding: 5px 5px;
      }
nav {
     background-color:#ffffcc;
    }

.nav {
    float:left;
    width:15%;
    padding:1ex;
    background-color:yellow;
     }
.rowleft {
     margin-left:0px;
     float:left;
     width:38%;
     padding:1ex;
         }
}


@media (min-width: 640px) {

.divleft { float:left;width:200px; padding:1ex;border:outset; }
.divright {
    margin-left:230px;
    width:100%-230px;
    }
.left { position:fixed; float:left; width:20%; padding:1ex;border:outset; }
.main { margin-left:24%;  }
.right { margin-left:26%; width:70%; }
.colleft { float:left; width:45%; padding:1ex;}
.colright { margin-left:50%; width:45%; padding:1ex;}
}