@font-face { font-family: 'Semana'; src: url('/fonts/SemanaSerif-Regular.woff'); } * { margin: 0; padding: 0; } body { background-color: white; font-family: 'Semana'; font-size: 14px; color: black; overflow-x: hidden; width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; } .navbar { position: fixed; top: 0; width: 100vw; height: 50px; text-align: center; background: white; z-index: 99; } .navbar a { padding: 0 10px; height: 50px; line-height: 50px; display: inline-block; } .full { width: 100%; max-width: 1200px; height: 100vh; display: flex; flex-direction: row; } .half { width: 50%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .half:first-child { border-right: 1px dashed #c0c0c0; } .box { width: 320px; } a { text-decoration: none; color: #ed1a48; } p { padding: 10px 0; text-align: justify; } img { width: 80%; max-width: 400px; outline: 10px solid white; box-shadow: 0 0 15px 0px black; transform: rotate(1deg); } h1 { font-size: 2em; font-weight: normal; padding: 20px 0; text-align: center; } h2 { font-size: 1.6em; font-weight: normal; padding: 20px 0; text-align: center; } ul { padding-bottom: 20px; list-style-type: none; text-align: center; } ul li { padding: 3px 0; } ul li p { padding: 0; } @media screen and (max-width: 800px) { #start { padding-top: 25px; } .full { flex-direction: column; height: auto; } .half { width: 100%; padding: 50px 0; } }