body {
    background: #212121;
    font-family: Arial, Verdana, Helvetica, sans-serif;
}
h1 {
    font-size: 15px;
    font-weight: bold; 
    text-transform: uppercase;
    color: #212121;
}
p {
    font-weight: bold;
    font-size: 11px;
}
table {
    height: 100%;
}
@font-face {
    font-family: linkitalic;
    src: url(src/roboto/Roboto-LightItalic.ttf) format("truetype");
}
/* LINKS */
a {
    text-decoration: none;
    transition: all 0.2s, font-size 0.2s;
}
a:link {
    color: #74959A;
}
a:visited {
    color: #74959A;
}
a:hover {
    color: #40a2c8;
}
a:active {
    color: #3bb2e0;
    font-style: italic;
}

.itemheader { 
    color: #a8b2c0; 
    border-bottom: 1px solid #495371;
}
.colorbars {
    border-top: 7px solid #212121;
    border-bottom: 7px solid #212121;
    background-color: #495371;
    height: 35px;
    width: 50% !important;
}
.topinfo {
    height: 100px;
    width: 50%;
    text-align: left;
    background-color: #bdb6c5;
}
.topborder {
    border-top: 7px solid #212121;
}
.mleft {
    margin-left: 5px;
}
.topheader {
    font-size: large;
    font-weight: 600; 
    text-transform: uppercase;
    color: #212121;
}
.middleport {
    height: 100%;
    border-top: 7px solid #212121;
    padding: 5px;
    vertical-align: top;
}
.middleportleft {
    background-color: #2f3033;
    /* border-right: 7px solid #212121; */
    text-align: center;
    width: 70%;
}
.item {
    display: inline-block;
    margin: 7px;
}
.imcap {
    display: block;
    text-align: center;
    font-family: linkitalic;
    font-size: 11px;
    transition: all 0.1s;
}
.imgexp:hover{
    height: calc(140px + 2px);
    filter: brightness(1.15);
    transition: filter ease 0.1s border-radius ease 1s;
    border-radius: 12px;
}
.imgexp {
    height: 140px;
    transition: all ease 0.3s;
    border-radius: 5px;
}
.other { 
    font-size: 15px !important;
}