* { padding:0; margin:0; font-family: trebuchet ms; arial; calibri; gill sans; helvetica neue; candara; geneva; verdana; sans-serif; font-size: 18px; } a { text-decoration: none; } a:link { color: red; } a:visited { color: hotpink; } a:hover { color: green; } a:active { color: blue; } mark { background-color: #900C3F; color: hotpink; } ul { list-style-position: inside; } h1 { font-size: 30px;} h2 { font-size: 25px;} .grid { display: grid; grid-template-columns: auto 800px auto; grid-template-rows: 25px 90px auto; grid-column-gap: 0px; grid-row-gap: 0px; } body { background-color: #e5c5d1; color: #900C3F; } .whitespace { grid-area: 1 / 1 / 2 / 4; } .blessfrey-logo { grid-area: 1 / 2 / 2 / 3; } .body-row { grid-area: 3 / 1 / 4 / 4; } .content { grid-area: 3 / 2 / 4 / 3;} .nav-row { grid-area: 2 / 1 / 3 / 4; } .nav-grid { grid-area: 2 / 2 / 3 / 3; display: flex; flex-direction:column; justify-content:flex-end; display: grid; grid-template-columns: auto repeat(4, 70px) auto; grid-template-rows: 90px; grid-column-gap: 17px; grid-row-gap: 0px; align-items: end; justify-items: center; } .nav-bar { grid-area: 1 / 1 / 2 / 7; background-image: url(../img/ele/navbar.png); height: 86px; width: 800px; } .nav-index { grid-area: 1 / 2 / 2 / 3; padding-bottom: 3px; position: relative; } .nav-game { grid-area: 1 / 3 / 2 / 4; padding-bottom: 3px; position: relative; } .nav-diary { grid-area: 1 / 4 / 2 / 5; padding-bottom: 3px; position: relative; } .nav-presskit { grid-area: 1 / 5 / 2 / 6; padding-bottom: 3px; position: relative; } .nav-link { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%) } .nav-link a { font-size: 21px; color: #E6E8EF; font-weight: bold; text-shadow: -1px -1px 1px black, 0 -1px 1px black, 2px -1px 1px black, 2px 0 1px black, 2px 2px 1px black, 0 2px 1px black, -1px 2px 1px black, -1px 0 1px black; } .footer-content { padding-top: 5px; text-align: right; overflow: hidden; }