:root{
    --color-1: #095394;
    --color-2: #FFF;
    --color-3: #000;
    --color-4: #E9E4CF;

    --font-1: alegreya;
    --font-2: christmas;
    --font-3: future;

}

@font-face {
    font-family: alegreya;
    src: url("/fonts/alegreya.ttf");
    font-display: swap;
}

@font-face {
    font-family: christmas;
    src: url("/fonts/chisttmas.ttf");
    font-display: swap;
}

@font-face {
    font-family: future;
    src: url("/fonts/future.ttf");
    font-display: swap;
}



.font-alergreya{    font-family: alegreya;  }
.font-christmas {   font-family: christmas; }
.font-future{       font-family: future;    }


*{
    box-sizing: border-box;
   
    font-size: 16pt;
}


html,body{
    margin:0px;
    padding:0px;

    background-color: var(--color-4);

    font-family: alegreya;
    text-rendering: optimizeLegibility;
    font-size: 18pt;
    
    width:100%;
    
    min-height: 100vh;
    /*
    overflow-x:hidden;
    */
}


body{
    background: url("/imgs/bg_p.webp");    
    background-size: 2833px 695px;
    background-position: 50% -100px;
    background-repeat:no-repeat;
    background-color: var(--color-4);
}


.par{
    width:100%;
    padding-bottom: 20px;;
}


.content{
    margin:auto;
    width: clamp( 300px, 80vw, 900px);
    padding: 0px 20px;
    color: #000;
   
}


.bianco{color: #FFF;}
.nero{color: #000;}

h1, h2{
    margin:auto;
    font-size: clamp( 2rem, 3vw, 3rem);

    font-family: future;
    text-align: center;
    font-weight:300;

    width: clamp( 100px, 90%, 900px);
}

h2{
    margin:auto;
    font-size: 2rem;
}


.incipit{
    font-size: 20px;
    font-family: christmas;
    font-weight: 300;
}







.monoColonna{
    display: grid;
    grid-auto-flow: row;
    gap: 1rem;
    place-items: center center;

    width:100%;
}


.dueColonne{

    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    place-items: top left;
}

.top{

    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    place-items: strart stsrt;
}





.promoLibro{
    display: grid;
    grid-auto-flow: row;
    gap: 10px;
    place-items: center center;
    
    color:#FFF;
}



.piccolo{
    font-size: 0.8rem;
    text-align: left!important;
}
.centered{
    text-align:center;

}


.allineati{
    display: grid;
    place-items: center center;
    
    text-decoration: none;

    color: #FFF;


}

.allineati:visited{
    color:#FFF;
}

.promozione{
    font-weight: 500;   
    font-size: 40px;
}

.spedizione{
    font-size: 16px;
    color: #000;
}

.cover{
    width:100%;

}

.aiuto{
    font-size: 20px;
    text-align: center;
    width:100%;
}

.form_copia_omaggio{
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr 1fr;
    place-items: center center;


    
}

/*  grafica del form come fosse vetro opaco */
.form_copia_omaggio input, .form_copia_omaggio button{
    
    background: rgba(255, 255, 255, 0.2);
    padding:10px;
    background-color: #FFF7;

    border-radius: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 20px;
    font-size: 16px;
    color: #000;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: background 0.3s ease, color 0.3s ease;
    width:100%;
}

.form_copia_omaggio button{
    background-color: #095394;
    color:#FFF;
}

.schedaRacconto
{
    display: grid;
    gap: 1rem;
    grid-template-rows: 1fr auto;
    place-items: left center;
    margin-bottom: 20px;;
    border-bottom: 1px solid #967
}



.schedaRacconto .titolo
{
    font-family: christmas;
    font-size:2rem;
    grid-template-rows: 1fr auto;
    place-items: center center;
}

.schedaRacconto .contenuto
{
    font-family: christmas;
    display: grid;
    gap: 20px;
    grid-template-columns: auto auto;
    place-items: top;
}


.schedaRacconto .testo
{
    display: grid;
    gap: 1rem;
    grid-template-rows: 1fr auto;
    place-items: center center;
    margin: 1rem;
}


.autore{ font-family: alegreya ; font-size: clamp(1rem, 4vw , 1rem); font-family: chirstmas; color: #FFF; text-align:center; width:100%; text-shadow: -3px 3px 3px #000;}
.titololibro{ font-size: clamp(1rem, 3vw , 4rem); font-family:future; color:#FFF; text-align:center; width:100%;  text-shadow: -3px 2px 3px #000; letter-spacing: 0.2rem; }
.titololibro .dal{ font-size: clamp(1rem, 3vw , 2rem); line-height: 1rem;}
.sottotitolo{ font-size: clamp(0.5rem, 3vw , 1rem); font-family:christmas; color:#FFF; text-align:center; width:100%;  text-shadow: -3px 2px 3px #000;}

.promoLibro{
    
    width:100%;
    
}

.oraInVendita{
    font-size:1.3rem;
}

.prezzo, .form_copia_omaggio {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px 40px;
    
    font-size: 16px;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
    width: 100%;



}

.button-glass:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #333;
}

.button-amazon {
    background-color: #ffa41c;
    border: 1px solid #ffa41c;
    border-radius: 3px;
    color: #111;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.button-amazon:hover {
    background-color: #ff8c00;
    border-color: #ff8c00;
}

.footer{
    font-size: 13px !important;
}

.footer a{
    font-size: 13px !important;
    
}

@media( max-width: 600px ) {
 
    
    body{
        background-size: auto;
        background-repeat:no-repeat;
        background-position: 50% 0%;
        
    }

    .dueColonne {
        width:100%;
        grid-template-columns: 1fr;
    }

    .form_copia_omaggio{
        grid-template-columns: 1fr;
        width:100%;
        position:relative;
        
        margin:0px;
        padding:20px;

    }

    .dueColonne > :first-child {
        display: none;
    }

    .schedaRacconto .contenuto
    {
        grid-template-columns: 1fr;

        place-items: center center;
    }

    .par{
        width:100%;
        padding-bottom: 0px;
        margin:0px;
        padding:0px;
        left:-10px;
    }
    .content{
        padding: 10px;
        margin:auto;
}

/*
@media( max-width: 700px ) {
    
    .allineati{
        grid-template-columns: 1fr;
    }

    .allineati img { width: 100%; }
}
/*  */


a{
    color: var(--color-1);
    font-weight:400;
}