/*desktop*/
@media screen and (min-width: 590px) {
    * {
        --scaling_factor: 48pt;
        max-width: 590px;
    }

    body{
        margin-top: 10px;
        border: 16px black solid;
        border-radius: 80px;
        height: 1120px;
        overflow-y: scroll;
        background-color: var(--grigioseparatore);
        box-shadow: 0px 10px 50px gray;
    }

    body::-webkit-scrollbar{
        display: none;
    }

    body::before{
        content: "";
        position: absolute;
        margin-left: 129px;
        border-style: solid;
        border-width: 1px;
        border-bottom-left-radius: 36px;
        border-bottom-right-radius: 36px;
        border-bottom: 45px solid black;
        border-left-width: 300px;
    }
}

/*mobile*/
@media screen and (max-width: 589px){
    * {
        --scaling_factor: 12vw;
    }
}

:root {
    --grigio: rgb(122, 122, 122);
    --grigiochiaro: rgb(247,248,250);
    --grigioseparatore: #D1D1D1;
    font-family: Arial, Helvetica, sans-serif; /* priorità caricamento font */
    overflow-y: scroll; /* rende la pagina scrollabile */
    overflow-x: hidden; /* se la pagina diventa troppo grande non manda a capo */
    margin: auto; /* mette la pagina al centro */
}

* {
    margin: 0;
}

/* multiuso ----------------------------------------- */
titolo {
    font-size: calc(var(--scaling_factor)*0.35);
    font-weight: 500;
    color: black;
}

sottotitolo {
    font-size: calc(var(--scaling_factor)*0.29);
    font-weight: 350;
    color: var(--grigio);
    letter-spacing: 0.5px;
}

testo {
    font-size: calc(var(--scaling_factor)*0.33);
    font-weight: 500;
    line-height: calc(var(--scaling_factor)*0.42);
    color: black;
}

.icon {
    vertical-align: middle;
    display: inline-block;
    overflow: visible;
}

/* titolo ----------------------------------------------------- */
.sezione_titolo {
    padding: 4% 3% 0;
    background-color: white;
    display: grid;
    grid-template-columns: repeat(4,7%) auto 10%;
}

.fp {
    --img_radius: calc(var(--scaling_factor)*0.9);
    grid-column: 1/3;
    width: var(--img_radius);
    border-radius: 50%;
    box-shadow: 0 0 2px 1px #0000001e;
    align-self: center;
}

.intestazione {
    grid-column: 3/6;
    margin-bottom: 0;
    margin-top: auto;
}

.menu {
    content: url("../_assets/icons/menu.svg");
    width: calc(var(--scaling_factor)*0.3);
    margin: 40% 20% auto auto;
}

.dot {
    --dotsize: 0.1;
    width: calc(var(--scaling_factor)*var(--dotsize));
    height: calc(var(--scaling_factor)*var(--dotsize));
    border-radius: 100%;
    background-color: var(--grigio);
}

.globe {
    width: calc(var(--scaling_factor)*0.27);
    content: url('../_assets/icons/globe.svg');
}

.back {
    width: calc(var(--scaling_factor)*0.27);
    content: url('../_assets/icons/back.svg');
}

/* testo ---------------------------------------------------- */
.sezione_testo {
    padding: 3% 2% 2% 3%;
    background-color: white;
}

a {
    color: var(--grigio);
    text-decoration: none;
}

/* video ----------------------------------------------------- */
.sezione_video {
    display: grid;
    grid-template-columns: auto 10%;
    grid-template-rows: auto 10%;
}

video{
    display: flex;
    grid-column: 1/3;
    grid-row: 1/3;
    z-index: 1;
    width: 100%;
}

.video_overlay {
    display: flex;
    grid-column: 2;
    grid-row: 2;
    z-index: 2;
    width: calc(var(--scaling_factor)*0.7);
    content: url('../_assets/icons/no_audio.svg');
}

/* cta ------------------------------------------------------- */
.sezione_cta {
    background-color: var(--grigiochiaro);
    padding: 3% 3% 4%;
    display: grid;
    grid-template-columns: 65% 35%;

    border-bottom: var(--grigioseparatore);
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

testo_cta {
    font-size: calc(var(--scaling_factor)*0.31);
    line-height: calc(var(--scaling_factor)*0.34);
    font-weight: 600;
    color: black;
}

testo_cta_small {
    font-size: calc(var(--scaling_factor)*0.26);
    line-height: calc(var(--scaling_factor)*0.42);
    font-weight: 600;
    vertical-align: middle;
    color: black;
}

.button_cta {
    --button_border: calc(var(--scaling_factor)*0.03);
    grid-column: 2;
    border: var(--grigio);
    border-style: solid;
    border-radius: calc(var(--scaling_factor)*0.1);
    border-width: var(--button_border);
    padding: 4%;
    margin-left: auto;
    margin-right: 0;
    align-self: center;
}

.messanger {
    content: url('../_assets/icons/messenger.svg');
    width: calc(var(--scaling_factor)*0.4);
}

/* reactions -------------------------------------------------- */
.sezione_reactions {
    background-color: white;
    padding: 2% 2.5%;
    display: grid;
    grid-template-columns: 30% auto;
}

.re_like {
    content: url("../_assets/icons/reaction_like.svg");
    width: calc(var(--scaling_factor)*0.43);
}

.re_love {
    content: url("../_assets/icons/reaction_love.svg");
    width: calc(var(--scaling_factor)*0.4);
}

testo_reactions {
    font-size: calc(var(--scaling_factor)*0.3);
    font-weight: 350;
    color: var(--grigio);
    vertical-align: middle;
}

testo_summary_reactions {
    vertical-align: middle;
}

/* linea -------------------------------------------------------- */
.linea {
    height: 1px;/* calc(var(--scaling_factor)*0.1); */
    background-color: var(--grigioseparatore);
    border-color: white;
    border-left-style: solid;
    border-right-style: solid;
    border-width: calc(var(--scaling_factor)*0.25);
}
/* tasti reactions ----------------------------------------------- */
.sezione_tastireactions {
    background-color: white;
    padding: 2% 4% 3%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

testo_buttons {
    font-size: calc(var(--scaling_factor)*0.33);
    font-weight: bold;
    color: var(--grigio);
    vertical-align: middle;
}

.button {
    width: calc(var(--scaling_factor)*0.35);
    margin-right: calc(var(--scaling_factor)*0.08);
}

.like {
    content: url("../_assets/icons/action_like.svg");
}

.comment {
    content: url("../_assets/icons/action_comment.svg");
}

.share {
    content: url("../_assets/icons/action_share.svg");
}

testo_condividi{
    padding-right: calc(var(--scaling_factor)*0.1);
}

/* separatore ---------------------------------------------------- */
.separatore {
    height: calc(var(--scaling_factor)*0.4);
    background-color: var(--grigioseparatore);
}