/* CSS Document
Desenvolvedor WEB: Fabio Rocha (fabiorochafg.github.io) */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --primary-100:  #cea1ba;
    --primary-200:  #b26c92;
    --primary-300:  #864669;
    --primary-400:  #4a273a;
    --primary-500:  #432335;
    --primary-600:  #351c2a;
    --primary-700:  #281520;
    --primary-800:  #1b0e15;
    --primary-900:  #0d070b;
    --primary:      var(--primary-400);

    --secondary-100: #c3a9da;
    --secondary-200: #a67ec8;
    --secondary-300: #8854b6;
    --secondary-400: #693d8f;
    --secondary-500: #492b64;
    --secondary-600: #291838;
    --secondary-700: #1f122b;
    --secondary-800: #150c1d;
    --secondary-900: #0a060e;
    --secondary:     var(--secondary-600);
    --secondary-rgb: 204, 48, 27;

    --tertiary-100: #FFF2E9;
    --tertiary:     var(--tertiary-100);

    --black:        #262626;
    --gray-800:     #4C4C4C;
    --gray-700:     #5D5D5D;
    --gray-600:     #6E6E6E;
    --gray-500:     #7F7F7F;
    --gray-400:     #A1A1A1;
    --gray-300:     #B2B2B2;
    --gray-200:     #D4D4D4;
    --gray-100:     #E5E5E5;
    --white:        #fff;

    --error-100:    #FFEEF1;
    --error-200:    #FECDD5;
    --error-300:    #FDACBA;
    --error-400:    #FD8A9E;
    --error-500:    #FC6982;
    --error-600:    #FB3759;
    --error-700:    #FA052F;
    --error-800:    #D90429;
    --error-900:    #B80323;
    --error:        var(--error-800);

    --info-100:     #F7FBFE;
    --info-200:     #C7E5FB;
    --info-300:     #97CEF8;
    --info-400:     #67B8F5;
    --info-500:     #47A9F3;
    --info-600:     #279AF1;
    --info-700:     #0F8AE7;
    --info-800:     #0D77C7;
    --info-900:     #0B64A7;
    --info:         var(--info-600);

    --success-100:  #E0F8EE;
    --success-200:  #C5F1E0;
    --success-300:  #9CE7C9;
    --success-400:  #80E1BB;
    --success-500:  #65DAAC;
    --success-600:  #49D49D;
    --success-700:  #30CB8E;
    --success-800:  #29B07A;
    --success-900:  #239467;
    --success:      var(--success-600);

    --warning-100:  #fffefd;
    --warning-200:  #fdf6dd;
    --warning-300:  #fbedbd;
    --warning-400:  #f8e49e;
    --warning-500:  #f6dc7e;
    --warning-600:  #f4d35e;
    --warning-700:  #f2ca3e;
    --warning-800:  #f0c21e;
    --warning-900:  #ddb00f;
    --warning:      var(--warning-600);

    --border-radius:           25px;
}

/* #region Default */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar:horizontal {
    height: 10px;
}
::-webkit-scrollbar-track {
    background-color: var(--gray-50);
}
::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: var(--border-radius);
}
::-webkit-scrollbar-thumb:horizontal {
    border-top: 4px solid var(--gray-100);
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary);
}
::-moz-selection {
    background-color: var(--primary);
    color: var(--white);
}
body {
    background-color: var(--white);
    color: var(--black);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
}
h2 {
    color: var(--primary-800);
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1em;
    padding-top: 5rem;
    padding-bottom: 2rem;
}

/* header */
header nav {
    display: flex;
    gap: 1rem 3rem;
    & a {
        color: var(--black);
        font-weight: 600;
        padding-top: .75rem;
        padding-bottom: .75rem;
        position: relative;
        text-decoration: none;
        &:not(.btn)::after {
            background-color: var(--primary);
            content: '';
            height: 1px;
            left: 0;
            opacity: 0;
            position: absolute;
            top: 100%;
            width: 100%;
            -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
            -moz-transition: opacity 0.3s, -moz-transform 0.3s;
            transition: opacity 0.3s, transform 0.3s;
            -webkit-transform: translateY(10px);
            -moz-transform: translateY(10px);
            transform: translateY(10px);
        }
    }
}