:root {
    --font-Archivo: 'Archivo';
    --font-DM: 'DM Serif Display';
    
    --white: #F9FAFC;
    --black: #0C0C0C;
    --light-gray: #777D81;
    --blue: #3A82F1;
    --dark-blue: #0947a5;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--font-Archivo), sans-serif;
    font-size: 16px;
    color: var(--black);
}

@media (max-width: 500px) {
    html {
        font-size: 14px;
    }
}

    body {
        padding: 2rem;
        background-color: var(--white);
    }

        .title {
            text-align: center;
            font-size: 2rem;
        }

        .subtitle {
            text-align: center;
            font-size: 1rem;
            color: var(--light-gray);
        }

        .form {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 2rem;
        }
        
            .button {
                margin-top: 1rem;
                padding: 0.5rem 1rem;
                border: none;
                border-radius: 4px;
                background-color: var(--blue);
                color: var(--white);
                font-size: 1rem;
                cursor: pointer;
            }

                .button:hover {
                    background-color: var(--dark-blue);
                }

            .file {

            }