@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');




:root {
    --corFundo: #222222;
    --corTexto: #222222;
    --corDestaque: #e8ad2a;
    --corAlert: #e99d5f;
    --corDanger: #f17b7b;
    --corFundoContainer: rgba(77, 77, 77, 0.1);
    --corFundoElemento: rgba(77, 77, 77, 0.2);

    --gray100: #f6f6f6;
    --gray200: #e9ecefff;
    --gray300: #dee2e6ff;
    --gray400: #ced4daff;
    --gray500: #adb5bdff;
    --gray600: #6c757dff;
    --gray700: #495057ff;
    --gray800: #343a40ff;
    --gray900: #212529ff;
    --gray1000: #222222;

    --corSombra: rgba(126, 126, 126, 0.2);

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    font-size: large;
}

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

h1 {}

html {
    width: 100vw;
    height: 100vh;
}

body {
    width: 100%;
    height: 100%;
    background-color: var(--gray100);

    color: var(--corTexto);
}

main {
    padding: 30px 50px;
    margin-top: 3rem;
    border-radius: 30px;

    width: 20rem;
    text-align: center;

    background-color: white;

    box-shadow: 5px 5px 8px var(--corSombra);

    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
}

.btn {
    margin: 10px 5px;
    padding: 10px 15px;

    border: 0px solid var(--gray700);
    border-radius: 8px;

    background-color: var(--gray400);

    font-weight: bold;

    cursor: pointer;

    transition: all .3s ease-in-out;
}

.btn:hover {
    background-color: var(--corDestaque);

}

.btn:hover span {
    color: white;
    transition: all .4s ease-in-out;
}

.btn-primary {
    background-color: var(--corDestaque);
}

label {
    display: block;
    text-align: left;
    margin-left: 1rem;
    margin-top: 1rem;
}

input {
    padding: 5px 10px;
    margin-top: 0.4rem;

    background-color: var(--gray100);

    border-radius: 50px;
    border: 0px solid var(--gray600);

    box-shadow: 3px 3px 8px var(--corSombra) inset;

    color: var(--gray800);

    width: 100%;
}

fieldset {
    border: 0;
    margin-bottom: 1.5rem;
}



legend {
    display: none;
}

.msgErro {
    color: var(--corDanger);
    font-size: medium;
}

.manterConectado label, .manterConectado input {
    display: inline-block;
    width: auto;
    margin: 0;
    margin-top: 1rem;
}