html {
 scrollbar-color: #ff00dc #222222;
}

body {
 background-image: url("bg2.png");
 background-size: 100%;
 margin: 0;
 padding: 0;
 font-family: Roboto;
 font-weight: 900;
 text-align: center;
 color: #FFFFFF;
 width: 700px;
 margin: auto;
}
.imageButton {
 background-color: #FFFFFF20;
 outline: 1px solid #999999;
 height: 50px;
 width: 500px;
 font-size: 32px;
 font-weight: 100;
 display: block;
 text-decoration: none;
 color: #FFFFFF;
 margin: auto;
 line-height: 50px;
}
.imageButton.project{
 line-height: 30px;
 height: 80px;
}
.imageButton.enabled{
 outline: 1px solid #FF00DC;
}
.imageButton.enabled:hover{
 transform: scale(1.05);
}
.imageButtonImage {
 height: 32px;
 width: 32px;
 object-fit: none;
 transform: translate(0px, 5px);
}
.imageButtonImage2 {
 height: 64px;
 width: 64px;
 object-fit: none;
 margin: 5px;
 transform: translate(0px, 5px);
}
.projectName {
 margin-top: 5px;
 margin-left: 10px;
 font-size: 30px;
}
.projectName.small {
 color: #EEEEEE;
 font-size: 20px;
 width: 410px;
 line-height: 20px;
 margin-top: 0;
}
.projectName.date {
 font-size: 16px;
 color: #FFFFFFAA;
 text-align: right;
}
.column {
 float:left;
 text-align: left;
}
.pfp {
 height: 100px;
 width: 100px;
 border-radius: 10px;
 margin-left: 10px;
 margin-bottom: -5px;
}
.headerLink{
 color: #FFFFFF;
 font-family: Roboto;
 font-size: 32px;
 margin-left: 10px;
 margin-right: 10px;
}
.headerLink.small{
 color: #FFFFFFFF;
 font-size: 16px;
}
.headerLink.selected{
 color: #87CDFF;
 text-decoration: underline #FF00DC;
}
h1 {
 font-weight: 100;
}
footer {
 margin-top: 30px;
 text-align: left;
 color: #FFFFFF55;
 border-top: 1px solid #FF00DC;
}
header {
 margin-top: 30px;
 margin-bottom: 30px;
 padding-bottom: 0px;
 color: #FFFFFF;
 border-bottom: 1px solid #FF00DC;
}
header.sub{
 margin-top: -20px;
 border-bottom: 1px solid #FF00DCAA;
}