/* RESET BASE */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* PAGINA CENTRATA */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
    background-image:
            linear-gradient(rgba(245, 193, 63, 0.1), rgba(245, 193, 63, 0.1)),
            url("carta.avif");
    background-repeat: repeat;
}



/* CONTENITORE */
.pagina {
    position: relative;
    width: 100vw;
    max-width: 110vw;
}
@media (min-width: 1300px) {
    .pagina {
        max-width: 90vw;
    }
}
/* CORNICE */
.cornice {
    width: 100%;
    height: auto;
    display: block;
}


/* DIVISORE FLOREALE */
.divisore {
    position: absolute;
    top: 52.8%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3%;
    height: auto;
}

/* freccia che punta */
.Pointer {
    position: absolute;
    top: 76.5%;
    left: 74.5%;
    transform: translate(-50%, -50%);
    width: 11.25%;
    height: auto;
    transition: transform 0.3s ease;
    cursor: pointer;
}
.Pointer:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

.text {
    font-family: "Cinzel", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 4vw;
    position: absolute;
    top: 19.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.text1 {
    font-optical-sizing: auto;
    font-weight: 350;
    font-style: normal;
    font-size: 3vw;
    position: absolute;
    top: 29%;
    left: 31%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.text2 {
    font-optical-sizing: auto;
    font-weight: 350;
    font-style: normal;
    font-size: 3vw;
    position: absolute;
    top: 29%;
    left: 68%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.input-container2 {
    display: flex;
    width: 90%;
    max-width: 12.5%;
    position: absolute;
    top: 40.1%;
    left: 18%;
}

.input-field2 {
    width: 100%;
    padding: 1.5%;
    font-size: 1.7vw;
    border: 0.22vw solid #000000;
    background-color: rgba(255, 255, 255, 0);
    outline: none;
    transition: border-color 0.3s ease;
    font-weight: 350;
    color: #000000;
}

.input-field2::placeholder {
    color: #000000;
}
.input-container3 {
    display: flex;
    width: 90%;
    max-width: 12.5%;
    position: absolute;
    top: 40.1%;
    left: 31.7%;
}

.input-field3 {
    width: 100%;
    padding: 1.5%;
    font-size: 1.7vw;
    border: 0.22vw solid #000000;
    background-color: rgba(255, 255, 255, 0);
    outline: none;
    transition: border-color 0.3s ease;
    font-weight: 350;
    color: #000000;
}

.input-field3::placeholder {
    color: #000000;
}

/* SIGN UP - EMAIL */
.input-container {
    display: flex;
    width: 90%;
    max-width: 26.2%;
    position: absolute;
    top: 46.5%;
    left: 18%;
}

.input-field {
    width: 100%;
    padding: 1.5%;
    font-size: 1.7vw;
    border: 0.22vw solid #000000;
    background-color: rgba(255, 255, 255, 0);
    outline: none;
    transition: border-color 0.3s ease;
    font-weight: 350;
    color: #000000;
}

.input-field::placeholder {
    color: #000000;
}

/* SIGN UP - PASSWORD */
.input-container1 {
    display: flex;
    width: 90%;
    max-width: 26.2%;
    position: absolute;
    top: 53.5%;
    left: 18%;
}

.input-field1 {
    width: 100%;
    padding: 1.5%;
    font-size: 1.7vw;
    border: 0.22vw solid #000000;
    background-color: rgba(255, 255, 255, 0);
    outline: none;
    transition: border-color 0.3s ease;
    font-weight: 350;
    color: #000000;
}

.input-field1::placeholder {
    color: #000000;
}



/* SIGN UP - COLOR */
.input-container5 {
    width: 100%;
    max-width: 26.2%;
    position: absolute;
    top: 60.5%;
    left: 18%;
    display: flex;
    align-items: center;
    gap: 0.6vw;
}

.input-field5-wrap {
    position: relative;
    width: 100%;
    height: 2.7vw;
}

.input-field5 {
    width: 95%;
    height: 100%;
    font-size: 1.7vw;
    border: 0.22vw solid #000000;
    background-color: rgba(255, 255, 255, 0);
    outline: none;
    transition: border-color 0.3s ease;
    font-weight: 350;
    color: #000000;
    padding: 0 1.5%;
    cursor: pointer;
}
.input-field5::placeholder {
    color: #000000;
}

#colorPicker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.color-picker-box {
    width: 12%;
    height: 2.7vw;
    position: relative;
    flex-shrink: 0;
}

.color-display {
    width: 88%;
    height: 100%;
    border: 0.22vw solid #000000;
    background-color: rgba(255, 255, 255);
    pointer-events: none;
}


.text3 {
    text-transform: uppercase;
    font-family: "Cinzel", serif;
    font-optical-sizing: auto;
    font-weight: bolder;
    font-style: normal;
    font-size: 1.1vw;
    position: absolute;
    top: 71%;
    left: 31%;
    transform: translate(-50%, -50%);
    width: 30%;
    white-space: normal;
    text-align: center;
    text-align-last: center;
}

/* SIGN IN - EMAIL */
.input-container6 {
    display: flex;
    width: 90%;
    max-width: 26.2%;
    position: absolute;
    top: 46.5%;
    left: 55%;
}

.input-field6 {
    width: 100%;
    padding: 1.5%;
    font-size: 1.7vw;
    border: 0.22vw solid #000000;
    background-color: rgba(255, 255, 255, 0);
    outline: none;
    transition: border-color 0.3s ease;
    font-weight: 350;
    color: #000000;
}

.input-field6::placeholder {
    color: #000000;
}

/* SIGN IN - PASSWORD */
.input-container7 {
    display: flex;
    width: 90%;
    max-width: 26.2%;
    position: absolute;
    top: 53.5%;
    left: 55%;
}

.input-field7 {
    width: 100%;
    padding: 1.5%;
    font-size: 1.7vw;
    border: 0.22vw solid #000000;
    background-color: rgba(255, 255, 255, 0);
    outline: none;
    transition: border-color 0.3s ease;
    font-weight: 350;
    color: #000000;
}

.input-field7::placeholder {
    color: #000000;
}






.toast {
    position: absolute;
    top: 52.4%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5vw;
    background: rgba(0,0,0,0.80);
    color: white;
    padding: 1vw 2vw;
    border-radius: 0.5vmin;
    opacity: 0;
    transition: opacity 0.5s;
}

.toast.show {
    opacity: 1;
}

.grecaptcha-badge {
    visibility: hidden !important;
}


* {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

input,
textarea {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}