﻿:root {
    --bg-color: #fff7ee;
    --secodary-bg-color: #ffffff;
    --font-color: #2d3748;
    --secondary-font-color: #4a5568;
    --accent-color: #ff8200;
    --accent-hover: #e67300;
    --accent-light: #ffe0c2;
    --shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    --font-primary: 'Inter', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
    --border: 2px solid #ff8200;
}
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

form {
    background-color: var(--secodary-bg-color);
    display: flex;
    justify-content: center;
    border-radius: 12px;
    box-shadow: var(--shadow);
    align-content: center;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: wrap;
    width: 45vw;
    transform: scale(1.1);
    padding: 30px;
    margin: 30px 0;
}
    form:hover{
        
    }
    form div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 1px 0 20px 0;
        width: 70%;
    }
        form div label #inpCheck {
            width: 5% !important;
        }
        form #divBtn {
            display: flex;
            align-items: center;
        }
        form #divValid {
            font-size: 15px;
            color: #ff6666;
            margin: 15px 0;
        }
form label{
    font-size: 15px;
    color: var(--secondary-font-color);
    font-family: var(--font-secondary);
    width: 100%;
}

form input{
    font-size: 25px;
    color: var(--font-color);
    background-color: var(--bg-color);
    border: 2px solid var(--bg-color);
    border-radius: 12px;
    padding: 5px 0 5px 5px;
    width: 100%;
}
    form input:focus {
        outline: none;
        border-color: var(--accent-color);
        background-color: var(--secodary-bg-color);
    }
    form input::placeholder{
        font-size: 20px;
        color: var(--secondary-font-color);
    }
    form input:hover{
        border: var(--border);
        background: var(--secodary-bg-color);
    }


form span{
    font-size: 10px;
    color: #ff6666;
}
form button{
    background-color: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    width: 45%;
    font-size: 20px;
    padding: 3px 0;
}
form button:hover{
    transform: scale(1.05);
}

