* {font-family: Benton,system-ui,-apple-system,"system-ui","Segoe UI", Roboto, Oxygen, Ub,"Open Sans", "Source Sans Pro", sans-serif;}
body {font-size:20px;}
#viewport {
    border-color: #ffffff;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-color: #003b84;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

h1,h2,h3,h3 {font-family:LabelloRegular,
    system-ui,
    -apple-system,
    "system-ui",
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;color:#ffffff}

.f-80 {
    font-size: 80px;
}
.f-64 {
    font-size: 64px;
}
.f-55 {
    font-size: 55px;
}
.f-48 {
    font-size: 48px;
}
.f-32 {
    font-size: 32px;
}
.f-24 {
    font-size: 24px;
}

.big-font {font-family: LabelloRegular,
        system-ui,
        -apple-system,
        "system-ui",
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Fira Sans",
        "Droid Sans",
        "Helvetica Neue",
        sans-serif;}

        .upper {text-transform: uppercase;}
.text-ferrero {color:#6b3b21;}

.btn-labello, .btn-labello:hover {
    border-color: #003b84;
    background-color: #ffffff;
    color: #003b84;
    border-radius: 5px;
    font-weight: 500;
    border-width:3px;
}


.restart, .restart:hover {
    border-color: #ffffff;
    background-color: #003b84;
    color: #ffffff;
    border-radius: 5px;
    font-weight: 500;
    border-width:1px;
    font-size:24px;
    font-family:NIVEABrandType-Regular,LabelloRegular,
    system-ui,
    -apple-system,
    "system-ui",
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;
    
}


.btn-short {width: 200px;height: 70px;}
.btn-big {font-size:50px;width: 400px;line-height: 64px;margin:15px;padding:15px 25px;}
.btn-long {
    font-size: 50px;
    line-height: 64px;
    margin: 15px;
    padding: 15px 25px;
}
input {
    border-color: #6b3b21;
    background-color: #ffefd5;
    outline-color: #6b3b21!important;
}

.result, .question {position:absolute;margin:0 auto;width:100%;background-color: #0e4194;}
p, .text {font-family:NIVEABrandType-Regular,LabelloRegular,
    system-ui,
    -apple-system,
    "system-ui",
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;color:#ffffff;
    font-weight:400}

    section {width:100%;}
    .container {max-width:1000px;}


.btn img {   margin-left: -50px;
    width: 100px;
    position: absolute;
    left: 50%;
    margin-top: -10px;}
.big-kiss img {
    margin-left: -90px;
    width: 180px;
    position: absolute;
    left: 50%;
}


@keyframes kissIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  90% {
    transform: scale(2);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}