/* * FONTS */ @font-face { font-family: 'Libre Baskerville'; src: url('/fonts/librebaskerville-bold-webfont.woff2') format('woff2'), url('/fonts/librebaskerville-bold-webfont.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Libre Baskerville'; src: url('/fonts/librebaskerville-italic-webfont.woff2') format('woff2'), url('/fonts/librebaskerville-italic-webfont.woff') format('woff'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Libre Baskerville'; src: url('/fonts/librebaskerville-regular-webfont.woff2') format('woff2'), url('/fonts/librebaskerville-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Lusitana'; src: url('/fonts/lusitana-bold-webfont.woff2') format('woff2'), url('/fonts/lusitana-bold-webfont.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Lusitana'; src: url('/fonts/lusitana-regular-webfont.woff2') format('woff2'), url('/fonts/lusitana-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* * MAIN */ html { font-size: 22px; } body { background-color: white; font-family: 'Libre Baskerville', serif; font-weight: 400; line-height: 1.45; max-width: 864px; margin: 0 auto; padding: 0; color: #333; } p { margin-bottom: 1.25em; } p:first-child { margin-top: 0; } a { color: #3e3579; } h1, h2, h3, h4, h5 { margin: 2.75rem 0 1rem; font-family: 'Lusitana', serif; color: #3e3579; font-weight: 800; line-height: 1.15; } h1 { margin-top: 0; font-size: 3.052em; border-bottom: 2px solid #3e3579; } h2 { font-size: 2.441em; } h3 { font-size: 1.953em; } h3 a { text-decoration: none; } h4 { font-size: 1.563em; } h5 { font-size: 1.25em; } small { font-size: 0.8em; } header, footer { text-align: center; } header, article { margin-bottom: 2.75rem; } main { padding: 0 2rem; } footer { margin-bottom: 1.25em; } article { display: flex; flex-flow: column; } nav { font-style: italic; display: flex; justify-content: space-between; max-width: 372px; margin: auto; font-size: 1.25em; } img { max-width: 100%; } .rest { max-height: 50px; } .logo { max-height: 2.5em; margin-bottom: 22px; } .portfolio { display: flex; flex-flow: row wrap; justify-content: space-between; } iframe { width: calc(50% - 10.6665px); margin-bottom: 1em; } /* Medium screens */ @media all and (max-width: 888px) { main { padding: 0 1rem; } iframe { width: 100%; } .portfolio { justify-content: space-around; } } /* Small screens */ @media all and (max-width: 500px) { html { font-size: 17px; } body { line-height: 1.7; } nav { max-width: 300px; } .logo { max-width: 88px; } nav, .portfolio { flex-direction: column; } } .repeat { display: flex; flex-flow: row wrap; justify-content: space-around; color: #3e3579; font-size: 22px !important; } .repeat-top { text-align: center; height: 5px; border-top: 7px solid #3e3579; border-bottom: 2px solid #3e3579; } .repeat-bottom { text-align: center; height: 8px; border-bottom: 7px solid #3e3579; border-top: 2px solid #3e3579; }