body {
      margin: 0;
      background-image: url("../image/tiletest2.png");
      font-family: "Pixelify Sans", sans-serif;

    }

    .polaroid {
      width: 200px;
      height: 330px;
      background: white;
      padding: 10px 10px 20px 10px;
      border: 2px solid #000;
      box-shadow: 4px 4px 0px #c0c0c0;
      margin: 20px;
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }

    .ptilt:hover {
        transform: rotate(10deg) scale(1.2);
        box-shadow: 8px 8px 0px #b0b0b0;
        }



    .polaroid img {
      width: 100%;
      display: block;
      border: 1px solid #000;

    }

    .caption {
      text-align: center;
      margin-top: 5px;
      font-size: 24px;
      font-weight: 800;
      font-family: "Indie Flower", sans-serif;

    }


    .topbar {
      display: flex;
      align-items: center;
      background: #0000aa;
      color: white;
      padding: 6px 10px;
      font-size: 30px;
    }

    .topbar a {
      color: white;
      text-decoration: none;
      margin-right: 20px;
      cursor: pointer;
    }

    .topbar a:hover {
      text-decoration: underline;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-btn {
      color: white;
      background: none;
      border: none;
      font: inherit;
      cursor: pointer;
      margin-right: 20px;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background: #f4f4f4;
      border: 2px solid black;
      min-width: 150px;
      z-index: 10;
    }

    .dropdown-content a {
      display: block;
      padding: 8px;
      color: black;
      margin: 0;
      text-decoration: none;
    }

    .dropdown-content a:hover {
      background: #d3d3d3;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    .window {
      margin: 40px auto;
      width: 1200px;
      background: #f4f4f4;
      border: 3px solid black;
      box-shadow: 0 0 0 4px #c0c0c0;
      transition: transform 0.4s ease, box-shadow 0.4s ease;

    }

    .window:hover{
        transform: scale(1.1);
    }

    .photorow {
      display: flex;
      justify-content: space-evenly;
      margin: 80px auto;
    }

    .window-title {
      display: flex;
      justify-content: space-between;
      background: #0000aa;
      color: white;
      padding: 6px;
      font-size: 25px;
      font-weight: bold;
    }

    .window-content {
      padding: 20px;
      font-size: 24px;
    }

    @keyframes shake {
    0% { transform: translate(0, 0) scale(1.1); }
    20% { transform: translate(-3px, 0) scale(1.1); }
    40% { transform: translate(3px, 0) scale(1.1); }
    60% { transform: translate(-3px, 0) scale(1.1); }
    80% { transform: translate(3px, 0) scale(1.1); }
    100% { transform: translate(0, 0) scale(1.1); }
    }

    .shake {
    animation: shake 0.3s ease;
    }

    @keyframes float {
    0% { transform: translate(0, 0px); }
    10% {transform: translate(0, 1px);}
    20% {transform: translate(0, 3px);}
    30% {transform: translate(0, 6px);}
    40% { transform: translate(0, 9px); }
    50% { transform: translate(0, 10px); }
    60% { transform: translate(0, 9px); }
    70% { transform: translate(0, 6px); }
    80% { transform: translate(0, 3px); }
    90% { transform: translate(0, 1px); }
    100% { transform: translate(0, 0px);}
    }

    .float{
        animation: float 2s ease infinite;
    }

    .flip-card {

  width: 224px;
  height: 364px;

  perspective: 1000px;
  cursor: pointer;

  margin: 20px;
}

    .flip-card .polaroid {
  margin: 0;
  width: 200px;
  height: 330px;
  position: absolute;
  top: 0;
  left: 0;
}
    .flip-inner {
        width: 100%;
        height: 100%;
        transition: transform 0.6s ease;
        transform-style: preserve-3d;
        position: relative;
}

    .flip-card.flipped .flip-inner {
    transform: rotateY(180deg);
    }

    .flip-front{
    position: absolute;
    width: 200px;
    height: 330px;
    backface-visibility: hidden;
    }

    .flip-front:hover {
        transform: rotate(10deg) scale(1.2);
        box-shadow: 8px 8px 0px #b0b0b0;
        }

    .flip-back {
    position: absolute;
    width: 200px;
    height: 330px;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    }

    .nostyle-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    }


.stack-container {
    position: relative;
    width: 224px;
    height: 364px;
    margin: 50px auto;
    cursor: pointer;
}

.stack-container .flip-card {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    transition: transform 0.3s ease;
}

.stack-container .flip-card:hover .flip-inner {
    transform: rotateY(180deg);
}

.fly-away {
    animation: flyOut 0.6s forwards;
}

@keyframes flyOut {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translate(-50px, 10px) rotate(-10deg);
        opacity: 1;
    }
    100% {
        transform: translate(400px, 100px) rotate(40deg);
        opacity: 0;
    }
}

.scroll-container {
    width: 100%;
    overflow: hidden; 
    white-space: nowrap; 
}

.photoScroll {
  display: flex;
  width: max-content;
    animation: sidewayScroll 60s linear infinite;
}

@keyframes sidewayScroll {
    0% {
        transform: translateX(-100%);
       
    }
   
    100% {
        transform: translateX(100vw);
        
    }
}


.typewriter p {
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  letter-spacing: .15em;
  width: 0;


  animation: typing 3s steps(40, end) forwards, blink-caret .75s step-end infinite;
}


.typewriter p:nth-child(1) {
  animation-delay: 0s;
}

.typewriter p:nth-child(2) {
  animation-delay: 3s;
}

.typewriter p:nth-child(3) {
  animation-delay: 6s;
}

.typewriter p:nth-child(4) {
  animation-delay: 9s;
}

.typewriter p:nth-child(5) {
  animation-delay: 12s;
}

.typewriter p:nth-child(6) {
  animation-delay: 15s;
}


@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}


.quiz-container {
            text-align: center;
            padding: 20px;
        }

        .question-text {
            font-size: 1.5rem;
            margin-bottom: 20px;
        }

        .btn-grid {
            display: grid;
            grid-template-columns: repeat(1, auto);
            gap: 15px;
            max-width: 400px;
            margin: 0 auto;
        }

        .btn {
            font-family: "Pixelify Sans", sans-serif;

            background-color: #e0e0e0;
            border: 2px solid #555;
            border-right-color: #000;
            border-bottom-color: #000;
            border-left-color: #fff;
            border-top-color: #fff;
            padding: 10px 20px;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.1s;
        }

        .btn:active {
            border-left-color: #000;
            border-top-color: #000;
            border-right-color: #fff;
            border-bottom-color: #fff;
            transform: translateY(2px);
        }

        .btn:hover {
            background-color: #d4d4d4;
        }

        .btn.correct {
            background-color: #90ee90;
            border-color: #006400;
        }

        .btn.wrong {
            background-color: #ffcccb;
            border-color: #8b0000;
        }

        .hide {
            display: none;
        }

        .controls {
            margin-top: 20px;
        }

        .next-btn {
            background-color: #e0e0e0;
            font-weight: bold;
            padding: 10px 30px;
        }


      #bounce-game {
  position: relative;
  width: 500px;
  height: 500px;
  background: #fce4ec;
  border-radius: 12px;
  border-color: #e854d9;
  overflow: hidden;
  margin-top: 20px;
}

#bounce-game #score {
  display: flex;
  align-items: center;
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: "Pixelify Sans";
  color: #880e4f;
  font-weight: bold;
  z-index: 10;
}

#target {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
}