span.shrink{
  font-size: 0.9em
}
ul{
  margin-top:3px;
  padding-left:20px;
}
.grid{
  display: grid;
  grid-template-columns: 1fr 800px 400px 1fr;
  grid-template-rows: 140px auto;
  grid-template-areas:
  "white header header"
  "white main sidebar";
}
h1.title{
  font-family: "Courier New", Courier, monospace;
  text-align:center;
  font-size:70px;
  margin: 20px auto;
}
div.header{
  border-bottom-style:double;
  border-width: thick;
  grid-area: header;
}
div.sidebar{
  padding: 10px;
  border-left-style:double;
  grid-area: sidebar;
}
div.main{
  grid-area: main;
  padding-bottom: 5px;
}
.project{
  font-family:"Courier New", Courier, monospace;
  background-color: #F3F3F3;
  box-shadow: -3px 5px #666;
  border-radius: 5px;
  border-color: gray;
  border-style: solid;
  margin: 10px 2.5%;
  padding: 3px;
  width: 95%;
  cursor: pointer;
}
.project:hover{
  background-color: #E3E3E3;
}
.project:active{
 box-shadow: 0px 0px #666;
 transform: translate(-3px, 5px);
}
.project img{
  border-style: solid;
  border-width: 2px;
  border-color: gray;
  border-radius: 5px;
  margin-right: 10px;
  float: left;
  width: 20%;
}
.project b{
  float:left;
}
.project p{
  margin: 0px;
  padding: 3px;
  width:20%;
  float: right;
  text-align: right;
}
.clearfix {
  clear: both;
}
.sidebar img{
  float: left;
  margin-right: 5px;
  border-style: solid;
  border-width: 2px;
}
.sidebar p{
  margin: 0px;
}
@media only screen and (max-width: 1210px) {
  .grid{
    grid-template-columns: auto 800px auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
    "white header"
    "white main"
    "white sidebar";
  }
  .project{
    margin: 10px 2.5%;
  }
  .sidebar{
    border-left:0;
    border-top:thick double black;
  }
}
@media only screen and (max-width: 810px) {
  .grid{
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
    "header"
    "main"
    "sidebar";
  }
  h1.title{
    font-size: 8.7vw;
  }
  .project{
  }
  .project b{
    text-align: center;
    float: none;
  }
  .project p{
    font-size: 3vw;
    margin: 0px;
    padding: 3px;
    width:100%;
    clear: both;
    text-align: center;
  }
  .project img{
    display:none;
  }
}
@media only screen and (max-width: 330px) {
  .sidebar{
    text-align:center;
  }
  .sidebar img{
    float:none;
    margin-left: auto;
    margin-right: auto;
  }
}