*, ::after, ::before { box-sizing: border-box; } body { margin: 0; } .pagehead { width: 100%; height: 100vh; position: relative; background: #111; display: flex; /*align-items: center; justify-content: center;*/ flex-direction: column; margin: 0; } .pagehead-inner { position: inherit; margin: 0; width: 24%; height: 55vh; top: 50%; left: 50%; margin-left: -12%; margin-top: -27vh; display: flex; align-items: center; justify-content: center; flex-direction: column; } .pagehead-inner > p { color: white; font-family: "Overpass Mono", monospace; font-weight: 300; margin: 0; } .btn-container { display: flex; position: inherit; flex-direction: row; } .btn-container button { width: 69px; height: 69px; margin: 10px; background: #222; color: white; border-radius: 15px; border: none; outline: none; } .btn-container button:hover { transform: scale(1.2); -webkit-transition: transform 0.5s ease-in-out; background: white; color: green; } .btn-container button:active { transform: scale(0.8); -webkit-transition: transform 0.2s ease-in-out; } .mainh { color: white; font-family: "Overpass Mono", monospace; font-weight: 700; margin: 0; } .pagebody { width: 100%; height: 100vh; position: relative; background: #222; display: flex; flex-direction: column; margin: 0; } .pagebody-inner-section { margin-top: 100px; margin-left: 300px; } .pagebody-inner-section > h1 { color: white; font-family: "Overpass Mono", monospace; font-weight: 700; } .project-container { position: inherit; display: flex; flex-direction: row; flex-wrap: wrap; } .project-container-row { display: flex; position: inherit; flex-direction: row; } .project-element { position: inherit; width: 300px; margin-right: 70px; display: flex; flex-direction: column; } .project-element > h1 { color: white; font-family: "Overpass Mono", monospace; font-weight: 700; margin: 0; } .project-element > p { color: white; font-family: "Overpass Mono", monospace; font-weight: 400; margin: 0; } .project-element > img { background: #222; margin-top: 20px; margin-bottom: 20px; } .