* { padding:0; margin:0; font-family: trebuchet ms; arial; calibri; gill sans; helvetica neue; candara; geneva; verdana; sans-serif; } a { text-decoration: none; } ul { list-style-position: inside; } .textbox { margin: 20px; padding: 20px; background-color: #C9C2D6; color: #080410; } .grid { display: grid; grid-template-columns: auto 800px auto; grid-template-rows: 25px 90px 1fr 100px; grid-column-gap: 0px; grid-row-gap: 0px; } .whitespace { grid-area: 1 / 1 / 2 / 4; align-items: center; background-color: #900C3F; } .blessfrey-logo { grid-area: 1 / 2 / 2 / 3; padding-top: 5px; color: #FBDAEC; } /* navigation pane */ .nav-row { grid-area: 2 / 1 / 3 / 4; background-color: #900C3F; } .nav-grid { grid-area: 2 / 2 / 3 / 3; 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: 18px; } .nav-link a:link { color: #66C7F4; } .nav-link a:visited { color: #CB9CF2; } .nav-link a:hover { color: #F9B3D7; } .nav-link a:active { color: #f463ad; } /* Body */ .body-row { grid-area: 3 / 1 / 4 / 4; background-color: #080410; } .pages { grid-area: 3 / 2 / 4 / 3; display: grid; grid-template-columns: 800px; grid-template-rows: repeat(9, auto); grid-column-gap: 0px; grid-row-gap: 0px; background-color: #; word-wrap: break-word; } .fact { grid-area: 1 / 1 / 2 / 2; } .desc { grid-area: 2 / 1 / 3 / 2; } .features { grid-area: 3 / 1 / 4 / 2; } .dev { grid-area: 4 / 1 / 5 / 2; } .videos { grid-area: 5 / 1 / 6 / 2; } .graphics { grid-area: 6 / 1 / 7 / 2; justify-content:center; align-items: center; } .contact { grid-area: 7 / 1 / 8 / 2; } .credits { grid-area: 8 / 1 / 9 / 2; } .permissions { grid-area: 9 / 1 / 10 / 2; } .footer-row { grid-area: 4 / 1 / 5 / 4; background-color: #080410; } .footer-content { background-color: #080410; color: #F9B3D7; padding-top: 5px; text-align: right; overflow: hidden; box-shadow: 0 100vh 0 100vh #581845; }