@font-face {
    font-family: Poppins-Medium;
    src: url('../fonts/Poppins-Medium.ttf');
}

@font-face {
    font-family: Poppins-Bold;
    src: url('../fonts/Poppins-Bold.ttf');
}

:root {
    --pal2: rgb(17, 207, 255);
    --pal3: rgb(62, 187, 255);
    --pal4: rgb(62, 187, 255);
    --yes: rgb(88, 209, 108);
    --no: rgb(255, 80, 80);
    --a: #fafafc;
    --b: #ffffff;
    --c: rgb(43, 43, 43);
    --d: rgb(208, 208, 208);

    /* --d: rgba(214, 233, 242, 0); */

    --pal1: #fafafc;
    --pal15: #fff;
    --text: rgb(43, 43, 43);

    --ozo1: #aae0fa;
    --ozo2: #40c8f4;
    --ozo3: #00aeef;


    --bg_hover: #97dcff;
}


body {
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: var(--a);
    color: var(--c);
    font-family: Poppins-Medium;
    margin: 0px;
}
h1, h2, h3, h4, h5, h6, p, label {
    margin: 0;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 19px;
}


 
#page {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#page_form {
    display: none;
    justify-content: center;
    animation: carosello 0.3s ease-in-out;
}
#page_cards {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    animation: carosello 0.3s ease-in-out;
}
#page_ctrl {
    display: none;
    justify-content: center;
    animation: carosello 0.3s ease-in-out;
}
#page_info {
    display: none;
    justify-content: center;
    animation: carosello 0.3s ease-in-out;
}

.bottone_on,
.bottone_off {
    width: 150px;
    color: var(--text);
    font-family: Poppins-Bold;
    font-size: 14px;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    padding: 10px 0 10px 0;
    margin: 20px;
    transition: 0.2s;
}
.bottone_on {
    background: var(--yes);
}
.bottone_off {
    background: var(--no);
}

.bottone_on:hover,
.bottone_off:hover {
    filter: brightness(80%);
    transition: 0.2s;
}