#lyphebig { display: grid; margin: 7% auto; grid-auto-flow: column; width: 55%; } #alyphebig { margin: auto; } @media screen and (max-width: 800px) { #lyphebig { grid-auto-flow: row; } } #lyphetitle { display: grid; margin-left: 5px; padding-top: 20%; } @media screen and (max-width: 800px) { #lyphetitle { padding-top: 0; } } .bent-surrounding { background: url("/static/img/borderbent.png") no-repeat center; background-size: 90%; display: grid; height: auto; } #lypheimg { width: 90%; margin: auto; } #lyphetitle > img { width: 100%; margin: 0; } #lyphetitle > p { font-family: NanumGothicCoding, monospace; font-size: 175%; color: #9baba4; } @media screen and (max-width: 800px) { #lyphetitle > h2 { font-size: 100%; } } form { margin-top: 10%; display: flex; flex-direction: column; } .form-buttons { display: flex; flex-direction: row; margin-top: 25px; } @media screen and (max-width: 800px) { .form-buttons { flex-direction: column; align-items: center; } } .pagecontent { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0) 50px); margin: 0; min-height: 100vh; width: 100%; } td { margin: auto; display: flex; flex-direction: row; align-items: center; justify-content: center; } td > label { width: 70px; }