@charset "UTF-8";
@font-face {
    font-family: 'Young Serif';
    src: url(../assets/fonts/young-serif/YoungSerif-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: 'Outfit';
    src:url(../assets/fonts/outfit/Outfit-VariableFont_wght.ttf)
}

:root{
    --color-branco: hsl(0, 0%, 100%);
    --color-stone100: hsl(30, 54%, 90%);
    --color-stone150: hsl(30, 18%, 87%);
    --color-stone600: hsl(30, 10%, 34%);
    --color-stone900: hsl(24, 5%, 18%);
    --color-marrom800: hsl(14, 45%, 36%);
    --color-Rosa800: hsl(332, 51%, 32%);
    --color-Rosa50: hsl(330, 100%, 98%);
    

    --font-body: 'Outfit', sans-serif ;
    --font-title: 'Young Serif',sans-serif;


}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body{
    min-height: 100vh;
    font-family:var(--font-body);
    font-size: 1em;
}

h1,
h2,
h4,
h5,
h6{
    font-family:var(--font-title);
}

h3{
    font-family: var(--font-body);
}

.img-prc{
    width: 100%;
}

.main__corpo{
    padding: 2em;
}

.main__ttprc{
    color: var(--color-stone900);
    font-size: 2.2em;
    font-weight: 400;
    padding-bottom: .7em;
}

.main__txt{
    padding-bottom: 1.5em;
}

.txt{
    color: var(--color-stone600);
    line-height: 1.5em;
}

.main__prep{
    padding: 1em;
    background-color: var(--color-Rosa50);
    margin-bottom: 2em;
}

.main__prep h3{
    color: var(--color-Rosa800);
    padding-bottom: 1em;
}

.main__ul{
    list-style-position: inside;
}

.main__ul li{
    line-height: 2em;
    color: var(--color-stone600);
}

.main__sec{
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 1px solid var(--color-stone150);
}

.subttl{
    margin-bottom:1em;
    color: var(--color-marrom800);
}

.main__ol li::marker{
    font-weight: bold;
    color: var(--color-marrom800);    
}

.main__ol li{
    padding-left: 1em;
    margin-bottom: .4em;
    list-style-position: outside;
    margin-left: 1em;
}


.main__tab{
    width: 100%;
    border-collapse: collapse;
}

.main__tab th{
    color: var(--color-stone600);
    font-weight: 400; 
    padding: 1em;    
    border-bottom: 1px solid var(--color-stone150);

}

.main__tab td{
    color: var(--color-marrom800);
    font-weight: bold;
    border-bottom: 1px solid var(--color-stone150);
}

.main__tab tr:last-child td,
.main__tab tr:last-child th{
    border-bottom: none;
}

@media screen and (min-width:37.5em){
    body{
        min-height: 100vh;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        background-color: var(--color-stone100);
    }

    .main{
        margin:6em 0;
        width: 50%;
        padding: 2em;
        background-color: white;
        border-radius: 20px;
    }

    .img-prc{
        border-radius: 10px;
    }

    .main__corpo{
        padding: 2em 0 0;
    }
}