@font-face
{
    font-family: YummoBold;
    src: url(../ttf/Yummo_W03_Bold.ttf);
}

@font-face
{
    font-family: YummoRegular;
    src: url(../ttf/Yummo_W03_Regular.ttf);
}

@font-face
{
    font-family: YummoSemiBold;
    src: url(../ttf/Yummo_W03_SemiBold.ttf);
}

@font-face
{
    font-family: YummoThin;
    src: url(../ttf/Yummo_W03_Thin.ttf);
}

:root
{
    --xsmallFontSize: clamp(0.8rem, 1vw, 1rem);
    --smallFontSize: clamp(1.15rem, 1.25vw, 1.5rem);
    --middleFontSize: clamp(2rem, 4vw, 4rem);
    --bigFontSize: clamp(2.5rem, 8vw, 8rem);
    --xbigFontSize: clamp(3rem, 13vw, 15rem);
    
    --borderRadius: 16px;

    --black: #000;
    --white: #fff;
    --beige: #e3dfa1;
    --darkBlue: #0e1a33;
    --lightBlue: #2b4160;
    --lightBlue2: #4c7dad;
    --darkOrange: #e45326;
    --lightOrange: #febe18;
    --darkGrey: #ccc;
    --lightGrey: #e4e4e4;

    --orangeGradient_1: #e45326;
    --orangeGradient_2: #febe18;
    --blueGradient_1: #0e1a33;
    --blueGradient_2: #2b4160;

    --fontBold: YummoBold, sans-serif;
    --fontRegular: YummoRegular, sans-serif;
    --fontSemiBold: YummoSemiBold, sans-serif;
    --fontThin: YummoThin, sans-serif;
    --fontSystem: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}


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

::-webkit-scrollbar-track
{
    background: var(--white); 
    
}

::-webkit-scrollbar-thumb
{
    background: var(--darkOrange);
}

::-webkit-scrollbar-thumb:hover
{
    background: var(--darkOrange) 
}

::selection
{
    color: var(--white);
    background: var(--darkOrange);
}


::placeholder
{
    color: var(--white);
    opacity: 0.5;
}


*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--fontSemiBold);
    color: var(--white);
    font-size: var(--xsmallFontSize);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html, body
{
    scroll-behavior: smooth;
}

body
{
    background-color: var(--darkBlue);
}

a
{
    text-decoration: none;
}

p
{
    line-height: 1.4;
}

h1, h2, h3, h4, h5, h6
{
    font-weight: normal;
}

ul
{
    list-style: none;
}

input::-ms-reveal
{
    filter: invert();
}

/* https://stackoverflow.com/a/14205976 */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px var(--lightBlue) inset !important;
    -webkit-text-fill-color: var(--white) !important;
}

/* https://stackoverflow.com/questions/25194631/is-it-possible-to-always-show-up-down-arrows-for-input-number */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}

input[type=button],
input[type=submit], 
input[type=reset],
button
{
    border: none;
    outline: none;
    padding: 0.85rem calc(0.85rem * 2);
    cursor: pointer;
    background-color: var(--lightBlue);
    font-size: var(--xsmallFontSize);
}

input[type=button]:hover,
input[type=submit]:hover, 
input[type=reset]:hover,
button:hover
{
    background-color: var(--darkBlue);
}


input[type=email], input[type=password], input[type=text], input[type=number], input[type=tel], textarea, select
{
    font-size: var(--xsmallFontSize);
    font-family: var(--fontSemiBold);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0.75rem;
    background-color: var(--darkBlue);
    border-radius: 8px;
    transition: border 400ms ease;
    padding-bottom: 1rem;
    padding-left: 35px;
    background-size: 14px auto;
    background-repeat: no-repeat;
    background-position: 12px center;
    background-image: url(../svg/input_icon_default.svg);
    width: 100%;
    outline: none;
}

input[type=email]
{
    background-image: url(../svg/input_icon_email.svg);
}

input[type=password]
{
    background-image: url(../svg/input_icon_lock.svg);
}

input[type="tel"]
{
    background-image: url(../svg/input_icon_tel.svg);
}

input[type="text"].name, input[type="text"].surname, input[type="text"].fullname
{
    background-image: url(../svg/input_icon_personal_infos.svg);
}

input[type="text"].search
{
    background-image: url(../svg/icon_search.svg);
}

input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}







label
{
    font-size: var(--xsmallFontSize);
}

textarea
{
    resize: vertical;
    background-image: none;
    padding: 0.75rem;
}

select > option
{
    font-size: var(--xsmallFontSize);
    background-color: var(--darkBlue);
}

select > option:nth-child(even)
{
    background-color: #0c0c1a;
}

input[type=checkbox]:focus:not(.inputError), 
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(--white);
}

input.inputError, textarea.inputError, select.inputError
{
    border: none;
    outline: 2px solid #f00;
    box-shadow: 0 0 10px #f00;
}

input[type="checkbox"], input[type="radio"] {
    margin-right: 0.5rem;
}


@media only screen and (max-width: 500px)
{
    :root
    {
        --xsmallFontSize: 0.95rem;
    }

    input[type=email], input[type=password], input[type=text], input[type=number], input[type=tel]
    {
        padding: 0.75rem;
        padding-left: 35px;
    }

    input[type=button],
    input[type=submit], 
    input[type=reset],
    button
    {
        padding: 0.75rem;
    }

}