@font-face { font-family: "19-PRA"; src: url("./assets/fonts/19-PRA Light.otf"); } @font-face { font-family: "Avenir"; src: url("./assets/fonts/AvenirNext-Regular-08.ttf"); } @font-face { font-family: "Atlas Typewriter"; src: url("./assets/fonts/AtlasTypewriter-Medium-Web.ttf"); } :root { --primary: #000; --secondary: #fff; --shadow: #000; --soft-primary: rgba(0, 0, 0, 0.6); --soft-secondary: rgba(255, 255, 255, 0.6); --hero-type: "19-PRA", "Playfair Display", sans-serif; --body-type: "Avenir", "Helvetica", sans-serif; --ui-type: "Atlas Typewriter", "Roboto Mono", monospace; } html { background-color: #000; background-color: var(--primary); } .chapter { font-family: "Atlas Typewriter"; font-family: var(--ui-type); font-size: 0.8rem; text-transform: uppercase; } h1 { font-family: "19-PRA"; font-family: var(--hero-type); color: #fff; color: var(--secondary); font-size: 3rem; font-weight: 100; } p { font-family: "Avenir"; font-family: var(--body-type); color: #fff; color: var(--secondary); font-weight: 200; text-align: justify; } h3 { color: #fff; color: var(--secondary); font-weight: 100; font-family: "Avenir"; font-family: var(--body-type); text-align: center; } hr { background-color: #fff; background-color: var(--secondary); height: 2px; border: none; } blockquote { border-left: 2px solid #fff; border-left: 2px solid var(--secondary); padding-left: 20px; } table { color: #fff; color: var(--secondary); font-family: "Avenir"; font-family: var(--body-type); } td, th { padding: 10px 20px; } .content li { color: #fff; color: var(--secondary); font-family: "Avenir"; font-family: var(--body-type); padding: 5px 0; } #logo { margin-left: 30px; color: #000; color: var(--primary); transform: rotate(-10deg) skew(-10deg, 0); margin-bottom: 80px; letter-spacing: 0.1rem; font-size: 3.5rem; } #big-logo { transform: rotate(-10deg) skew(-10deg, 0); letter-spacing: 0.1rem; font-size: 5rem; color: #fff; color: var(--secondary); margin: 100px 0px 50px 0px; line-height: 0.6; position: relative; z-index: -1; } #big-logo .chapter { margin-left: 10rem; } .content > p:first-of-type::first-letter { float: left; font-family: "19-PRA"; font-family: var(--hero-type); font-size: 4.5rem; line-height: 3rem; padding-top: 0.6rem; padding-right: 0.8rem; padding-left: 0.3rem; } .content a { color: rgba(255, 255, 255, 0.6); color: var(--soft-secondary); text-decoration: none; box-shadow: inset rgba(255, 255, 255, 0.6) 0px -2px 0px 0px; box-shadow: inset var(--soft-secondary) 0px -2px 0px 0px; transition: 0.1s all linear; } .content a:hover { color: #fff; color: var(--secondary); box-shadow: inset #fff 0px -2px 0px 0px; box-shadow: inset var(--secondary) 0px -2px 0px 0px; } .title { text-align: center; padding: 50px 20px; } .content { margin: 0 auto; max-width: 517px; padding: 0 27px 50px 27px; } .menu { background-color: #fff; background-color: var(--secondary); position: fixed; top: 0; left: 0; min-height: 100%; width: 10px; box-shadow: 0px 0px 200px 30px #000; box-shadow: 0px 0px 200px 30px var(--shadow); transition: all 0.3s ease; } .menu-open { width: 400px; } .menu-button { z-index: 1000; color: #fff; color: var(--secondary); font-weight: 100; font-family: "Atlas Typewriter"; font-family: var(--ui-type); font-size: 0.8rem; background: transparent; transform: rotate(90deg); right: 0; position: absolute; margin: 100px -55px; border: solid transparent 2px; box-shadow: inset 0px 0px 0px 2px transparent; outline: 0; border-radius: 100%; width: 80px; height: 80px; transition: all 0.1s linear; cursor: pointer; } .menu-button:hover { border-color: #fff; border-color: var(--secondary); box-shadow: inset 0px 0px 0px 2px #000; box-shadow: inset 0px 0px 0px 2px var(--primary); } .inner-menu { width: inherit; overflow: hidden; white-space: nowrap; margin: 10px; overflow-y: scroll; top: 0; bottom: 0; height: 100%; position: fixed; } .inner-menu a { color: #000; color: var(--primary); font-family: "Atlas Typewriter"; font-family: var(--ui-type); font-size: 0.8rem; text-decoration: none; line-height: 2rem; border-bottom: solid 2px transparent; transition: all 0.1s linear; } .inner-menu a:hover, #current-page { border-color: #000; color: #000; border-color: var(--primary); color: var(--primary); } .inner-menu ul { list-style: none; margin: 0px -10px; } .inner-menu ul ul a { color: rgba(0, 0, 0, 0.6); color: var(--soft-primary); text-transform: uppercase; } .page-navigation { display: block; max-width: 700px; overflow: hidden; margin: 0 auto 60px auto; } .page-navigation a { display: block; float: left; max-width: 350px; margin: 1em 30px; color: #fff; color: var(--secondary); font-family: "19-PRA"; font-family: var(--hero-type); font-size: 1.5rem; text-decoration: none; border-bottom: solid 2px transparent; transition: border-color 0.1s linear; } .page-navigation .next { text-align: right; float: right; } .page-navigation a:hover { border-color: #fff; border-color: var(--secondary); } li.chapter { color: rgba(0, 0, 0, 0.6); color: var(--soft-primary); line-height: 3rem; padding-top: 20px; } .error-img { width: 300px; max-width: 95%; margin-bottom: 50px; } @media only screen and (max-width: 500px) { #logo { font-size: 2.3rem; } #big-logo { font-size: 3rem; } #big-logo .chapter { margin-left: 0px; } .menu { width: 4px; box-shadow: none; } .menu-open { width: 100%; } .menu-button { text-shadow: #000 0px -1px 5px; text-shadow: var(--shadow) 0px -1px 5px; } .menu-button-open { color: #000; color: var(--primary); right: 65px; box-shadow: #000 0px 0px 0px 2px inset; box-shadow: var(--primary) 0px 0px 0px 2px inset; text-shadow: none; } }