* { padding:0; margin:0; font-family: trebuchet ms; arial; calibri; gill sans; helvetica neue; candara; geneva; verdana; sans-serif; background-color: black; color: gray; } a { text-decoration: none; } .grid { display: grid; grid-template-columns: auto 60% auto; grid-template-rows: 5% 15% 50% 20%; grid-column-gap: 0px; grid-row-gap: 0px; } .top-row { grid-area: 1 / 1 / 2 / 4; display: flex; flex-direction:column; justify-content:center; align-items: center; background-color: red; } .nav-row { grid-area: 2 / 1 / 3 / 4; background-color: orange; } .content-row { grid-area: 3 / 1 / 4 / 4; background-color: yellow; } .latest-row { grid-area: 4 / 1 / 5 / 4; background-color: green; } .logo { grid-area: 1 / 2 / 2 / 3; padding-top: 5px; color: #FBDAEC; } .nav-grid { grid-area: 2 / 2 / 3 / 3; display: flex; flex-direction:row; justify-content:flex-end; display: grid; grid-template-columns: auto repeat(5, 1fr) auto; grid-template-rows: 90px; grid-column-gap: 17px; grid-row-gap: 0px; align-items: end; justify-items: center; } .nav-home { grid-area: 1 / 2 / 2 / 3; padding-bottom: 3px; position: relative; } .nav-blessfrey { grid-area: 1 / 3 / 2 / 4; } .nav-lemonland { grid-area: 1 / 4 / 2 / 5; } .nav-diary { grid-area: 1 / 5 / 2 / 6; } .nav-about { grid-area: 1 / 6 / 2/ 7; } .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; } .content-grid { grid-area: 3 / 2 / 4 / 3; background-color: black; background-image: url(../img/bg/homeBG.png); display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; grid-column-gap: 0px; grid-row-gap: 0px; } .content-left { grid-area: 1 / 1 / 2 / 2; } .content-right { grid-area: 1 / 2 / 2 / 3; } .latest-grid { grid-area: 4 / 2 / 5 / 3; } .footer-content { background-color: blue; color: #F9B3D7; padding-top: 5px; text-align: right; overflow: hidden; box-shadow: 0 100vh 0 100vh black; } #poltics { height: auto; width: 100%; }