:root
{
    --xsmallFontSize: 0.85rem;
    --smallFontSize: 1rem;
    --middleFontSize: clamp(2rem, 6vw, 6rem);
    --bigFontSize: clamp(2rem, 7vw, 7rem);
    
    --black: #000;
    --white: #fff;
    --systemFont: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--systemFont);
    font-size: var(--smallFontSize);
    color: #66360d;
    user-select: none;
}


*::-webkit-scrollbar
{
    width: 10px;
}

*::-webkit-scrollbar-track
{
    background: #66360d;
    border-radius: 10px;
}

*::-webkit-scrollbar-thumb
{
    background: #EEFA00;
    border-radius: 10px; 
}


body
{
    background-color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url(../jpg/bg.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100vh;
    height: 100dvh;
    width: 100%;
}

a
{
    transition: filter 0.4s ease;
}

a:hover
{
    filter: contrast(1.5);
}


input[type=email], input[type=password], input[type=text], input[type=number], input[type=tel], textarea, select
{
    padding: 0.5rem 1rem;
    border-radius: 20px;
    outline: none;
    border: 2px solid #66360d;
    background-color: transparent;
    color: #66360d;
}


input[type=email]:focus:not(.inputError), 
input[type=password]:focus:not(.inputError),
input[type=text]:focus:not(.inputError),
input[type=tel]:focus:not(.inputError),
input[type=number]:focus:not(.inputError),
textarea:focus:not(.inputError),
select:focus:not(.inputError)
{
    border-color: var(--black);
    outline: 2px solid lime;
    accent-color: #66360d;
}

input[type=checkbox]
{
    width: 20px;
    height: 20px;
    vertical-align: sub;
}

input.inputError, textarea.inputError, select.inputError
{
    outline: 2px solid red;
}




@media only screen and (max-width: 550px)
{
    :root
    {
        --middleFontSize: 3rem;
        --smallFontSize: 0.85rem;
    }

    input[type=checkbox]
    {
        width: 14px;
        height: 14px;
    }
}