html, body {
    margin: 0;
    height: 100%;
    font-family:Tahoma, Arial;
    font-kerning:auto;
    line-height:1.6;
}

body {
    background-color:#1a1a1a;
    color:#FFF;
}

.flex-container {
    display: flex;
    box-sizing:border-box;
    background-color:#2F2E30;
    min-height:100%;
}

nav ul {
    list-style-type:none;
}

.sidenav {
    flex: 0;
    margin-left:5px;
    min-height: 100%;
    height:auto;
}

.logo {
    background-image:url(images/logo.png);
    background-repeat: no-repeat;
    background-position:center;
    height:200px;
    width:auto;
}

.links {
    margin-top:0.5em;
    background-position: bottom left;
    background-repeat:no-repeat;
    background-color:#FF2EBE;
    font-family:Impact;
    text-align:end;
    color:#FFF;
}

a:visited {
color: lime;
}

.links a {
    color:#FFF;
    padding-right:5px;
    font-size:1.2em;
    letter-spacing:.4em;
    line-height:2em;
    background-color:#FF2EBE;
    text-decoration:none;
}



.links a:hover {
    color:#000;
    text-decoration:none;
}


.content {
    background-color:#434243;
    padding:10px;
    padding-bottom:0;
    flex: 1;
}

.frontpagegrid {
    display: grid;
    width:100%;
    grid-template-columns: 5% 40% 10% 40% 5%;
    grid-auto-rows:auto;
}

.leftbox {
    box-sizing:border-box;
    background-color:#5B5B5B;
    grid-column: 2;
    grid-row: 1;
    width:100%;
    max-width:auto;
}

.rightbox {
    box-sizing:border-box;
    background-color:#5B5B5B;
    grid-column: 4;
    grid-row: 1;
    width:100%;
    max-width:100%;
}

.contentgrid {
    display:grid;
    width:100%;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows:auto;
    grid-gap:20px;
    border:0;
    position:relative;
    margin-left:2%;
}

.contentgrid2 {
    background-color:#2e2e2e;
    display: grid;
    width: 70%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: auto;
    grid-template-areas:
        "image description description info info";
    grid-row-gap:20px;
    place-items: center;
    margin:auto;
    margin-top: 10px;
}

.cg2image {
    grid-column: image;
}

.cg2description {
    grid-column: description;
}

.cg2info {
    grid-column: info;
}

.downloadlink a {
    color: goldenrod;
}

td {
padding-bottom:20px;
padding-top:20px;
}

.griditem {
    display:flex;
    background-color:#2E2E2E;
    border:none;
    grid-column:auto;
    grid-row:auto;
    align-items: center;
    text-align:center;
    width:100%;
    max-width:auto;
}

.griditem .textbox {
    max-width:300px;
}

.descriptionbox {
    display:block;
    box-sizing:border-box;
    background-color:#5B5B5B;
    position:absolute;
    width:inherit;
    max-width:500px;
    margin:auto;
    height:inherit;
    padding:70px;
    opacity:0;
}

.boundingbox {
    display:block;
  background-repeat: no-repeat;
  background-size: cover;
    background-position: center;
    clear:both;
    float:left;
    position:relative;
    left:0;
    top:0;
  width:300px;
  height:250px;
    margin-right:10px;
}

.griditem h2 {
    letter-spacing: .1em;
}

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

.griditem:hover h2 {
    opacity:50%;
    filter:blur(1px);
}

.griditem:hover .boundingbox {
    filter:blur(1px);
    transition: 0.5s;
}

.griditem:hover .descriptionbox {
    transform:translatex(140%);
    opacity:100;
    transition: 1s;
}

.divider {
    background-image:url(images/divider.png);
    height:52px;
    width:auto;
}

.scrungle img {
border-radius: 25%;
}

#frontpagetitle {
    margin-top:10px;
    background-image:url(images/typelogo.png);
    background-repeat:no-repeat;
    background-position: top center;
    height:210px;
}

hr {
    border-top: 5px solid;
    border-left:none;
    border-right:none;
    border-bottom:none;
}

h1 {
    font-family:Impact;
    font-weight:normal;
    font-size:70px;
    text-decoration: none;
    letter-spacing:0.2em;
    text-align:center;
    color:#FFF;
    margin-bottom:10px;
}

h2 {
    font-family:Impact;
    font-weight:normal;
    font-size:40px;
    text-decoration: none;
    letter-spacing:1em;
    text-align:center;
    color:#FFF;
    margin:0;
}

.innerheader {
    box-sizing:border-box;
    margin-bottom:5px;
    background-color:#2E2E2E;
}

.textbox {
    padding:20px;
    margin:auto;
    max-width:900px;
}

.bodytext {
    text-align: justify;
    max-width:1000px;
    margin:20px;
}

h2 {
    font-family:Impact;
    font-size:45px;
    text-align:center;
    letter-spacing:0.5em;
    color:#FFF;
}

h3 {
  font-family:Impact;
  font-size:35px;
  text-align:center;
  letter-spacing:0.5em;
  color:#FFF;
}

h4 {
    margin:0;
    font-size:25px;

}

.harukainfodeskbottom {
    background-image:url(images/HarukaInfoDesk.png);
    background-size: contain;
    background-repeat: no-repeat;
    position:relative;
    bottom:0;
    margin:auto;
    margin-bottom:0;
    padding-bottom:0;
    height:441px;
    width:530px;
}

footer {
    font-size: 12px;
    position: absolute;
    bottom: 0;
    width: 250px;
    color: #FFF;
}

.container img {
  max-height: 50%;
  max-width: 50%;
}

.footer-box {
    box-sizing: border-box;
    padding-left: 1em;
    padding-bottom: 0.5em;
}


footer a {
    color:limegreen;
}

;sonic

@media (max-width: 600px) {
    .logo {
        height:100px;
        width: auto;

}