:root {
    --color-purple: #61437d;
    --color-yellow: #f5c446;
    --color-gray: #f9f9f9;
}

body {
    margin: 0;
    min-height: 100vh;
    display: block;
    justify-content: center;
    align-items: center;
    background: var(--color-gray);
    font-family: Zain;
    font-size: 14pt;
}

.wrapper {
    max-width: 990px;
    margin: 0 auto;
}

#result {
    display: none;
    z-index: 1;
}

img,
.img {
    max-width: 90vw;
    max-height: auto;
}

.logo_small {
    background-image: url('/img/logo_consultores-color-01.svg');
    background-repeat: no-repeat;
    background-size: 300px;
    width: 100px;
    height: 100px;
}

header {
    position: relative;
    z-index: 1;
    background-color: var(--color-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 15vh;
    padding-bottom: 2.5vh;
    max-width: 990px;
}

main {
    margin: 5vh 5vw;
    margin-bottom: 20vh;
}

main h1 {
    text-align: center;
    margin: 0 5vw;
    line-height: 24pt;
    font-size: 32pt;
    color: var(--color-purple);
}

.background {
    height: 32.4vh;
    background-image: url('/img/bg.jpeg');
    background-size: cover;
    background-position: bottom center;
    width: 100%;
    max-width: 991px;
    position: absolute;
    left: 50%;
    margin-left: calc(-50% - 1px + 1px);
    top: 0;
    z-index: 0;
}

.top_image {
    position: relative;
    z-index: 1;
    height: 15vh;
    background-color: var(--color-gray);

}

.positive_triangle {
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.negative_triangle {
    clip-path: polygon(0% 100%, 0% 0%, 50% 100%, 100% 0%, 100% 100%);
}

.date-wrapper {
    text-align: center;
    margin-bottom: 5vh;
}

.date-wrapper select {
    margin: 0 10px;
    font-size: 16pt;
}

li {
    font-weight: bold;
    color: var(--color-purple);
    font-size: 16pt;
}

li span {
    font-weight: normal;
    display: inline-block;
    width: 100%;
    margin-bottom: 1em;
    color: #999;
    font-size: 14pt;
}

.result-header {
    text-align: center;
}

.result-header h2 {
    font-size: 18pt;
    line-height: 16pt;
}

.result-header h4 {
    color: var(--color-purple);
    font-size: 32pt;
    line-height: 24pt;
    margin-top: 0;
    margin-bottom: 2.5vh;
}

.conselho {
    padding: 1vh 2vh;
    background-color: color(from var(--color-yellow) srgb r g b / 0.5);
    border-radius: 1vh;
}

* {
    user-select: none;
}

footer {
    margin: 5vh 5vw;
    text-align: center;
    border-top: solid 10px var(--color-yellow), solid 10px var(--color-purple);
    border-top: 2px solid var(--color-purple);
    background: linear-gradient(to bottom, var(--color-yellow) 2px,
            transparent 1px);
    padding-top: 5vh;
    margin-top: 20vh;
}

.cta_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

a.cta {
    background-color: var(--color-yellow);
    color: var(--color-purple);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    box-shadow: -5px 0px 10px rgba(0, 0, 0, .25);
    max-width: 90%;
    text-align: center;
    display: inline-block;
    margin-top: 3em;
}

a.cta:hover {
    background-color: var(--color-purple);
    color: var(--color-yellow);
}

.copyright {
    margin-top: 2rem;
}

.saiba_mais {
    text-align: center;
    margin-top: 2em;
}

.saiba_mais a {
    font-weight: bold;
    font-size: 20pt;
}