html{ font-family: Arial, Helvetica, sans-serif; background:black; width:100%; } body{ display: grid; width:100%; grid-template-columns: 5% 1fr 5%; grid-template-rows: auto auto auto; grid-auto-rows: minmax(auto, auto); background:linear-gradient(lightgray, sandybrown); } header{ grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 1; position: static; } .rotate{ z-index:1; pointer-events: none; } .rotate2{ z-index:1; pointer-events: none; } .page{ grid-column-start: 1; grid-column-end: 4; background:linear-gradient(rgb(189, 184, 184), sandybrown); z-index:2; display: grid; grid-template-columns: 10vw, 80vw, 10vw; grid-template-rows: 5%, auto, 5%; grid-auto-rows: minmax(auto, auto); } .pubG{ grid-column-start : 1; grid-column-end: 1; grid-row-start: 2; grid-row-end: 2; z-index:3; background-color: red; margin:4%; } .pubD{ grid-column-start : 3; grid-column-end: 3; grid-row-start: 2; grid-row-end: 2; z-index:3; background-color: green; margin-top: 4%; padding-right: 4%; } main{ grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 2; width: 97%; background: rgba(255, 0, 0, 0.1); margin-left:1.5%; margin-right:1.5%; z-index:3; } @media only screen and (max-width: 600px) { main { width:100%; background: none; } } footer { font-size: 11px; grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 3; background:rgb(86, 85, 177); bottom:100vh; width:100%; } footer .divfooter{ float:left; margin:3%; } footer img{ margin-left:10%; } form input{ background-color: rgba(255, 255, 255, 0.2); border: solid; border-radius: 15px; }