body {
      margin: 0;
      overflow: hidden;
      background: #f8f9fa;
    }
 .logo{
  padding-top: 2rem;
      width: 20%;
      height: 20%;
      margin: auto;

      
    }

    .slide {
      width: 100%;
      height: 100vh;
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: all 0.7s ease-in-out;
      margin-top: -150px;
    }

    .slide.active {
      display: flex;
    }

    .question-title {
      font-size: 3rem;
      font-weight: bold;
      margin-bottom: 1.5rem;
      text-align: center;
    }

    input[type="text"] {
      font-size: 2rem;
      text-align: center;
      width: 250px;
      margin-bottom: 1rem;
    }

    .calculator-grid {
      display: grid;
      grid-template-columns: repeat(3, 80px);
      gap: 10px;
      justify-content: center;
      margin-bottom: 2rem;
    }

    .calculator-grid button {
      height: 60px;
      font-size: 1.5rem;
    }

    .emoji-option {
      font-size: 4rem;
      cursor: pointer;
      margin: 0.5rem;
      transition: transform 0.5s;
    }

    .emoji-option:hover {
      transform: scale(1.2);
    }

    .face-labels {
      display: flex;
      justify-content: space-around;
      width: 90%;
      font-size: 1rem;
      margin-top: 10px;
    }
    .icon-smile {
      font-size: 150px;
      padding: 20px;
      color: gray;
      transition: color 0.3s;
      cursor: pointer;
    }

    .icon-smile:hover {
      color: skyblue;
    }
    .icon-smile:active {
      color: skyblue;
    }

    .buttonnya{
      background-color: skyblue;
    }
    .btn-next {
      margin-top: 1.5rem;
      font-size: 1.5rem;
      padding: 1rem 2rem;
      width: 80%;
      max-width: 600px;
    }
    
    .powered{
      font-size: 13px;
      text-align: right;
      color: white;

    }