:root { --white: #fbfbfb; --black: #0c0c0c; --ligth-gray: #F0F1F5; --green: #1A7320; --font-size-small: 15px; --font-size-normal: 16px; --font-size-large: 17px; --font-size-big-1: 22px; --font-size-big-2: 24px; --font-size-big-3: 32px; --font-size-big-4: 46px; --font-size-big-5: 52px; --fg: black; --bg: white; --prebg: #eee; --navlink: #333; --navlink-visited: #222; --separator: darkslategray; color: var(--fg); background-color: var(--bg); } @media(prefers-color-scheme: dark) { :root { --fg: white; --bg: black; --prebg: #111; --navlink: #aaa; --navlink-visited: #bbb; --separator: ghostwhite; } a { color: hsl(211, 100%, 60%); &:visited { color: hsl(242, 100%, 80%); } } } main { margin: 0px auto; padding: 1%; line-height: 1.6; } hr { color: var(--separator); background-color: var(--separator); height: 1px; } pre, code { background-color: var(--prebg); border-radius: 5px; padding: 5px; } .icon { width: 40px; vertical-align: middle; } header > nav { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 1%; & > a > img { width: 120px; } & > ol { display: flex; list-style: none; & > li > a { color: var(--navlink); margin: 0 1rem; text-decoration: none; font-size: 1rem; &:visited { color: var(--navlink-visited); } &:hover { text-decoration: underline; } } } } .basic-button { height: 2rem; font-family: "Open Sans", sans-serif; border-radius: 3px; cursor: pointer; padding: 0 10px; margin: 0 .2rem; } .big_button { height: 3rem; width: 15rem; margin-top: 2rem; border-radius: 2rem; font-size: var(--font-size-large); align-self: center; text-transform: uppercase; } .login { color: var(--black); border: 1px solid var(--green); background-color: #fbfbfb; } .sign-up, .big_button { border: none; background-color: var(--green); color: var(--white); } .basic-button:hover { text-decoration: underline; } .banner { margin: 100px 0; text-align: center; color: var(--black); h1 { font-size: var(--font-size-big-5); } p { font-size: var(--font-size-big-2); margin-top: 8px; margin-bottom: 1px; } } .why_papo { background-color: var(--ligth-gray); padding-bottom: 1.2rem; h2 { font-size: var(--font-size-big-3); } h3 { font-size: var(--font-size-big-1); margin-top: .5rem; } } .why_papo-container { margin-right: auto; margin-left: auto; padding-top: 1rem; padding-bottom: 3rem; max-width: 1200px; display: flex; flex-direction: column; } .why_papo-cards-container { display: flex; flex-direction: row; flex-wrap: wrap; padding: 1.3rem 0; } .why_papo-card { margin: 0 1rem; width: 25%; padding: 1.5rem; background-color: var(--white); border-radius: 15px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } .features-container { display: flex; flex-direction: column; align-items: center; max-width: 1200px; margin: 0 auto; } .features { h2 { font-size: var(--font-size-big-3); margin-bottom: 0; } h3 { font-size: 20px; font-weight: 500; margin-top: .5rem; } } footer { margin-top: 200px; } body { font-family: "Open Sans", sans-serif; line-height: 1.6; }