@font-face { font-family: "headingsFont"; src: url(/fonts/alice-v20-latin-regular.woff); } @font-face { font-family: "bannerFont"; src: url(/fonts/AgilScript.ttf); } @font-face { font-family: "quoteFont"; src: url(/fonts/lacquer-v15-latin-regular.woff); } /* ------------------------------------------------ */ body{ max-width: 900px; margin: auto; background-color: #E1D9D1; font-size: 1.1rem; text-align: center; font-family: sans-serif; } nav { margin-top: 10px; text-align: center; } nav a { padding: 15px; font-size: 22px; font-weight: bold; text-decoration: none; color: #71BC68; } footer{ text-align: center; } /* Header */ .headerImage { margin-top: 25px; position: relative; background: url(/img/bg.jpg) no-repeat center; background-size: cover; height: 250px; } .imgContainer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; font-weight: 700; text-transform: uppercase; } .imgContainer h1 { margin: 0; font-size: 66px; font-family: "bannerFont"; } .imgContainer h1 span { border: 6px solid white; padding: 6px 14px; display: inline-block; } /* container styles*/ .main h1,h2,h3,h4{ font-family: "headingsFont"; } .container{ text-align: center; } .afterIntro{ height: auto; display: flex; } /* Left */ .left{ height: auto; width: 60%; border-right: 2px solid grey; maring: 30px; } .left section{ display: flex; height: auto } .left .quote{ font-size: .95rem; font-family: "quoteFont"; } .left section .people, .writers{ width: 50%; } .left h4,ul > li{ padding-left: 10px; text-align: left !important; } /* Right */ .right{ height: auto; width: 40%; } .right figure img{ width: 100%; } /* Media Queries*/ @media screen and (max-width: 666px) { .afterIntro{ display: inline; border: none; } .left section{ display: inline; } .left .quote{ display: none; } .left{ border-right: none; } .left, .right{ width: auto; height: auto; margin-bottom: 10px; } nav a { padding: 5px; font-size: 20px; font-weight: bold; text-decoration: none; color: #71BC68; } }