html { background: #fafafa; } body { font-family: "Roboto", sans-serif; display: flex; flex-direction: column; min-height: 100vh; margin: 0; } #main { flex-grow: 1; width: 80%; margin: 0 auto; } h1 { text-align: center; font-size: 4em; font-weight: 200 !important; } h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", "Roboto", sans-serif; font-weight: 400; } #bune { height:200px; min-height: 15vh; margin: 50px auto 0; display: block; } p, ul { margin: 20px auto; line-height: 1.3em; } p, ul { font-size: 120%; } li { margin-top: 3px; } ul { list-style-type: "- "; } a { color: mediumpurple; text-decoration: none; } #projects, #screenshots { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } .project { flex: 1 0 400px; background: linear-gradient(to bottom, #0dd, mediumpurple) no-repeat; background-size: 2px; padding: 10px; padding-bottom: 20px; margin: 10px; position: relative; } .project::before { top: 0; left: 0; right: 0; bottom: 0; content: ""; z-index: -1; position: absolute; background: linear-gradient(to bottom right, #00000003, #0000000c); } .project .footer { position: absolute; bottom: 0; margin: 10px 0; font-style: italic; } .project .footer a:not(:last-child)::after { content: " - "; } .project h2 { margin-top: 0; } .subheading-links { font-style: italic; text-align: center; } #screenshots a { display: block; flex: 1 1 600px; max-width: 80%; margin: 10px; } #screenshots a img { width: 100%; } header { background: mediumpurple; padding: 0 30px; display: flex; justify-content: space-between; } header span { display: inline-block; } header a { color: white; display: inline-block; padding: 5px 15px; transition: 0.2s all; } header a:hover { background-color: #fff8; } @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { #main { width: 95%; } p, ul { line-height: 1.6em; } header { padding: 0; } h1 { margin-top: 0; } #screenshots a { max-width: 100%; } }