/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : Jan 19, 2025, 10:48:37 AM
    Author     : jude
*/

.image-clavier1{
    width:100%;
    height:400px;
}

#user-input {
  font-family: Courier, monospace;  /* Make it look like a typewriter */
  font-size: 34px;                  /* Adjust size as needed */
  white-space: nowrap;              /* Prevents text from wrapping to a new line */
  border-right: 3px solid black;    /* Simulates the blinking cursor */
  padding-right: 5px;               /* Adds some space after text */
  width:1150px;
  resize:none;
}
#text-to-type{
   font-family: Courier, monospace;  /* Make it look like a typewriter */
   font-size: 34px; 
   border: 3px solid gray; 
   width:1150px;

}

.box {
      height: 50px;
      background-color: lightcoral;
      display: flex;
      gap: 20px; /* Adds 20px of space between the p tags */
      justify-content: center;
      align-items: center;
 }
 
 @keyframes blink-error {
    0% {
        background-color: orange; /* Initial color */
    }
    50% {
        background-color: transparent; /* Color disappears (effectively invisible) */
    }
    100% {
        background-color: orange; /* Color returns to the initial color */
    }
}

.blinking-error {
    animation: blink-error 1s infinite; /* 1s duration, infinite loop */
}

 @keyframes blink-correct {
    0% {
        background-color: #90EE90; /* Initial color */
    }
    50% {
        background-color: transparent; /* Color disappears (effectively invisible) */
    }
    100% {
        background-color: #90EE90; /* Color returns to the initial color */
    }
}

.blinking-correct {
    animation: blink-correct 1s infinite; /* 1s duration, infinite loop */
}

        /* Global Styles */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
            color: #333;
        }

        h1, h2 {
            color: #3a3a3a;
        }

        /* Header */
        h1 {
            text-align: center;
            margin-top: 40px;
            font-size: 2.5rem;
        }

        /* Paragraphs and Lists */
        p, ul {
            margin: 20px auto;
            line-height: 1.6;
            font-size: 1rem;
            max-width: 800px;
            padding: 0 15px;
        }

        ul {
            list-style-type: disc;
            padding-left: 20px;
        }

        li {
            margin: auto;
        }

        strong {
            font-weight: bold;
            color: #007BFF;
        }

        /* Section Styles */
        h2 {
            font-size: 1.5rem;
            color: #007BFF;
            border-bottom: 2px solid #007BFF;
            padding-bottom: 10px;
            margin-top: 30px;
        }

        /* Adding spacing between sections */
        section {
            margin-bottom: 40px;
        }

        /* Footer / Extra Space */
        footer {
            text-align: center;
            margin-top: 40px;
            font-size: 1rem;
            color: #aaa;
        }

        footer a {
            color: #007BFF;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }

            h2 {
                font-size: 1.3rem;
            }

            p, ul {
                font-size: 0.9rem;
                padding: 0 10px;
            }

            li {
                font-size: 1rem;
            }
        }
        select {
            font-size: 1rem;
            padding: 10px;
            margin-top: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #fff;
        }       
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-button {
            font-size: 1rem;
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f4f4f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
            z-index: 1;
            border-radius: 5px;
            margin-top: 5px;
        }

        .dropdown-content a {
            padding: 12px 16px;
            display: block;
            color: #007BFF;
            text-decoration: none;
            font-size: 1rem;
        }

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

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

        .dropdown:hover .dropdown-button {
            background-color: #0056b3;
        } 
        
    .image-container {
      width: 100%;
      height: 400px;
      position: relative;
      display: inline-block;
    }

    .image-container img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 400px;
      transition: opacity 0.3s ease;
    }

    .image-container img:first-child {
      opacity: 1;
    }

    .image-container img:last-child {
      opacity: 0;
    }

    .image-container:hover img:first-child {
      opacity: 0;
    }

    .image-container:hover img:last-child {
      opacity: 1;
    }