/* RESET */

:root {
    --anim-time: 200ms;
    --color-back:#eeeeee;
    --color-dark:#333;
    --color-red: #ad2425;
    --color-white:#FFFFFF;
}
HTML, BODY { 
    font-family: 'EB Garamond','Times New Roman', Times, serif;
    font-weight: normal;
    margin:0; padding:0;
    overflow-x: hidden;
    background-color: hsl(0, 0%, 80%);
}

* {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

*, *::after, *::before {
    box-sizing: border-box;
    margin: 0; padding: 0;
}

img {
    display: block;
}

h2 {
    font-weight: lighter;
    color: var(--color-white);
    text-align: center;
    font-size: 50px;
    text-transform: uppercase;
    line-height: 1em;
}

h3 {
    font-weight: lighter;
    color: var(--color-red);
    font-size: 36px;
    line-height: 34px;
}

h4 {
    font-weight: 900;
    color: var(--color-red);
    font-size: 24px;
}

p {
    color: var(--color-black);
    font-size: 22px;
    line-height: 1.2;
    font-style: italic;
}


/*===================== COOCKIES =================================*/
/*================================================================*/
/* AGE GATE */
#AGE_GATE {
    display: none; opacity:0;
    position:fixed; z-index:1000003;
    width:100%; height:100vh;
    color:#FFF;text-align:center;font-size:120%; padding:30px;
    background-color: #000E;
}

.age_btn { padding:20px; margin:20px; font-size:150%; cursor: pointer}
#AGE_GATE h1, #AGE_GATE h3, #AGE_GATE p {
    margin: 1em 0;
    padding: 0;
    color:var(--color-red); 
    font-family: initial;
}
#AGE_GATE h1 { font-size: 38px; margin-bottom: 2rem;}
#AGE_GATE h3 { font-size: 25px; margin-bottom: 2rem;}
#AGE_GATE p {text-align: center; }

/* COOKIES CONSENT */
#COOKIES_CONSENT { 
    display: none; opacity:0;
    position:fixed; z-index:1000002;
    bottom:2vw; left:2vw;
    width:360px; max-width:calc(96vw - 40px);
    text-align:center;
    background:rgba(0,0,0,0.8);
    border-radius:8px;
    padding:0px 20px 15px;
    color:#FFF;
    outline: 1px solid #fff8;
}
#COOKIES_CONSENT p { font-weight: normal; font-size: 16px; text-align: center; color:#fff; margin: 1em 0;}
#COOKIES_CONSENT a { cursor: pointer; font-weight:bold }
#COOKIES_CONSENT #close_btn { position: absolute; right:6px; top:6px; cursor: pointer;}

#lang-button { position:fixed; left:40px; top:40px; z-index:100001; }
/* #lang-button { padding:8px 20px; font-size:120%; font-weight:bold; text-transform:uppercase; opacity:0.6; color:var(--color-red); transition:0.5s opacity; border: 2px solid var(--color-red); border-radius:30px;} */
#lang-button SPAN { padding:8px 20px; background:var(--color-red); border-radius:30px; font-size:90%; font-weight:bold; text-decoration:none; text-transform:uppercase; opacity:0.6; color:#FFF; text-shadow:none; transition:0.5s opacity; cursor:pointer; }
#lang-button SPAN:hover { opacity:1 }
@media (max-width:767px) {
    #lang-button { left:10px; top:20px }
}
span[data-lang="en"] { display: none;}


/************************************************************************************************************/


.icon-scroll {
    position: relative;
    width: 36px;
    height: 70px;
    margin-left: 0px;
    border: var(--color-red) solid 3px;
    /*box-shadow: inset 0 0 3px 3px rgba(173, 36, 37, 0.15),
                0px 0px 3px 3px rgba(173, 36, 37, 0.15);*/
    border-radius: 25px;
    z-index: 5;
    flex-shrink: 0;
}

.icon-scroll::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--color-red);
    left: 8px;
    top: 8px;
    border-radius: 7px;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: scroll;
    /* box-shadow: 0px 0px 3px 3px rgba(0, 8, 126, 0.15); */
}

@keyframes scroll {
  0% {opacity: 1;}
  100% {opacity: 0; transform: translateY(46px); }
}

.front {
    width: 100vw; height: 100vh;
    background: url("../../resources/images/front_back.jpg") no-repeat top / cover;
}

.front-content {
    padding-block: 3%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

.title {
    width: 100%;
    background-color: var(--color-red);
    padding-block: 20px;
    padding-inline: 30px;
}

.sigla {
    padding: 30px;
    max-width: 70vw;
    min-height: 0;
}

.sigla img {max-height: 100%; max-width: 100%; margin-inline: auto;} 

.description {
    text-align: center;
    max-width: 800px;
    padding: 30px;
    color: var(--color-red);
}

.content {
    width: 100vw;
    background: url("../../resources/images/content_back.jpg") repeat-y top / contain;
    padding: 30px;
}

.card { padding-block: 30px;}

.card-container {
    margin-inline: auto;
    max-width: 760px;
    padding: 30px;
    background-color: var(--color-white);
    opacity: 1;
    gap: 20px;
    align-items: center;
    box-shadow: -10px 20px 20px rgb(155, 155, 155, 0.5);
}

.card-group {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 20px;
    align-items: center;
}

.card-title { text-align: center; margin-bottom: 20px;}
.card-ingredients { text-align: left; flex-basis: 70%;}
.card-ingredients h4 { margin-bottom: 10px;}
.card-ingredients h4:not(:first-child) { margin-top: 20px;}

.card-image {text-align: right; flex-basis: 30%;}
.card-image img {max-width: 100%; max-height: 100%;  display: block;}

.card-notes { text-align: left; }

@media (max-width: 768px) {
    .title h2 { font-size: 30px;}
    .card-group {flex-direction: column-reverse}
    .card-ingredients { text-align: center;}
    .card-notes { text-align: center; }
    .content {background-size: 150%;}
}