.content { flex: 1; margin-top: 1.6rem; margin-bottom: 3.2rem; article { header { margin-top: 3.2rem; margin-bottom: 3.2rem; h1, h2 { margin: 0; } h2 { margin-top: 1.0rem; font-size: 1.8rem; color: $fg-color; @media only screen and (max-device-width : 768px) { font-size: 1.6rem; } } } } } .avatar img{ width: 20rem; height: auto; border-radius: 50%; @media only screen and (max-device-width : 768px) { width: 10rem; } } .list { ul { margin: 3.2rem 0 3.2rem 0; list-style: none; padding: 0; li { font-size: 1.6rem; @media only screen and (max-device-width : 768px) { font-size: 1.4rem; margin: 1.6rem 0 1.6rem 0; } span { display: inline-block; width: 20.0rem; text-align: right; margin-right: 3.0rem; @media only screen and (max-device-width : 768px) { display: block; text-align: left; } } a { text-transform: uppercase; } } } } .centered { display: flex; height: 100%; align-items: center; justify-content: center; .about { text-align: center; h1 { margin-top: 2.0rem; margin-bottom: 0.5rem; } h2 { margin-top: 1.0rem; margin-bottom: 0.5rem; font-size: 2.4rem; @media only screen and (max-device-width : 768px) { font-size: 2.0rem; } } ul { list-style: none; margin: 3.0rem 0 1.0rem 0; padding: 0; li { display: inline-block; position: relative; a { text-transform: uppercase; margin-left: 1.0rem; margin-right: 1.0rem; font-size: 1.6rem; @media only screen and (max-device-width : 768px) { font-size: 1.4rem; } i { font-weight: 400; } } } } } .error { text-align: center; h1 { margin-top: 2.0rem; margin-bottom: 0.5rem; font-size: 4.6rem; @media only screen and (max-device-width : 768px) { font-size: 3.2rem; } } h2 { margin-top: 2.0rem; margin-bottom: 3.2rem; font-size: 3.2rem; @media only screen and (max-device-width : 768px) { font-size: 2.8rem; } } } }