/*
// FIXME: remove
body {
	margin: 0px auto;
	max-width: 750px;
	padding: 1%;
}

pre, code {
  background-color: #ddd;
  border-radius: 5px;
  padding: 5px;
}

@media(prefers-color-scheme: dark) {
  :root {
    color: white;
    background-color: black;
  }

  a {
    color: hsl(211, 100%, 60%);
  }

  a:visited {
    color: hsl(242, 100%, 80%);
  }

  pre, code {
    background-color: #222;
  }
}
*/
/*http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

/*
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
*/
/* HTML5 display-role reset for older browsers */
/*
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
*/
* {
    box-sizing: border-box;
}



html {
    --white: #fbfbfb;
    --black: #0c0c0c;
    --gray: #333333;
    --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;
}

a {
    cursor: pointer;
}

body {
    font-family: "Open Sans", sans-serif;
    line-height: 1.6;
}

hr {
  color: lightgray;
  height: 1px;
}
/*
header {
    border-bottom: 1px solid lightgray;
}
*/

.icon {
    width: 40px;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 0.5rem;
    color: var(--black);
}

.nav_logo {
    width: 120px;
}

.nav_links {
    display: flex;
    list-style: none;
}

.nav_links li a {
    color: var(--gray);
    margin: 0 1rem;
    text-decoration: none;
    font-size: 1rem
}

.nav_links li a:visited {
    color: var(--gray);
}

.nav_links li a: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);
}

.banner h1 {
    font-size: var(--font-size-big-5);
}

.banner 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;
}

.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 h2 {
    font-size: var(--font-size-big-3);
}

.why_papo h3 {
    font-size: var(--font-size-big-1);
    margin-top: .5rem;
}

.why_papo-cards-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 1.3rem 0;
}

.why_papo-card {
    margin: 0 1rem;
    width: 30%;
    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;
}

.features h3 {
    font-size: 20px;
    font-weight: 500;
    margin-top: .5rem;
}

footer {
    margin-top: 200px;
}