/* Here is the CSS code for your translator webpage */

body {
    margin: 0; /* This removes the default margin from the body */
    font-family: sans-serif; /* Sets the default font to sans-serif */
    background-image: url("bg34.jpg"); /* Replace "path/to/your/image.jpg" with the path to your background image */
    background-size: cover; /* This will make the background image cover the entire page */
    background-position: center; /* This will center the background image */
    display: flex; /* This sets the body to flexbox for centering the content */
    justify-content: center; /* This centers the content horizontally */
    align-items: center; /* This centers the content vertically */
    min-height: 100vh; /* This sets the minimum height of the body to 100% of the viewport height */
  }
  
  
  
  .container .heading{
      font-family:'Merriweather', serif;
      text-align: center;
      padding-bottom: 15px;
      color:#fff;
      text-shadow: 0 5px 10px rgba(0,0,0,.2);
      font-size: 50px;
  }
  
  .translator-container {
    background-color: white; /* Sets the background color of the translator container to white */
    padding: 30px; /* Adds padding to the container */
    border-radius: 5px; /* Adds a slight border radius to the container */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Adds a slight shadow to the container */
    display: flex; /* This sets the container to flexbox for arranging the elements in a row */
    flex-direction: column; /* This stacks the elements vertically inside the container */
    align-items: center; /* This centers the elements horizontally inside the container */
    transition: transform 0.3s ease; /* Adds a smooth transition effect to the transform property */
  }
  
  .translator-container:hover {
    transform: translateY(-5px); /* Moves the container 5 pixels up when hovered */
  }
  
  .language-select,
  .text-input,
  .text-output {
    margin-bottom: 15px; /* Adds some margin between the elements */
    width: 100%; /* Sets the width of the elements to 100% of the container */
  }
  
  .language-select label {
    display: block; /* This displays the label on a new line */
    margin-bottom: 5px; /* Adds some margin between the label and the select box */
  }
  
  select {
    padding: 10px; /* Adds padding to the select box */
    border: 1px solid #ccc; /* Adds a border to the select box */
    border-radius: 5px; /* Adds a slight border radius to the select box */
    width: 100%; /* Sets the width of the select box to 100% */
    font-size: 16px; /* Sets the font size of the select box */
    background-color: #f9f9f9; /* Sets the background color of the select box */
    transition: border-color 0.3s ease; /* Adds a smooth transition effect to the border color */
  }
  
  select:focus {
    border-color: #007bff; /* Changes the border color of the select box when focused */
    outline: none; /* Removes the default focus outline */
  }
  
  
  .text-input textarea,
  .text-output textarea {
    padding: 10px; /* Adds padding to the text areas */
    border: 1px solid #ccc; /* Adds a border to the text areas */
    border-radius: 3px; /* Adds a slight border radius to the text areas */
    font-size: 16px; /* Sets the font size of the text areas */
    resize: none; /* Disables the resizing of the text areas */
  }
  
  #translate-btn {
    background-color: #007bff; /* Sets the background color of the button to blue */
    color: white; /* Sets the text color of the button to white */
    padding: 10px 20px; /* Adds padding to the button */
    border: none; /* Removes the border from the button */
    border-radius: 5px; /* Adds a slight border radius to the button */
    cursor: pointer; /* Sets the cursor to a pointer */
    transition: background-color 0.3s; /* Adds a smooth transition effect */
  }
  
  #translate-btn:hover {
    background-color: #0056b3; 
  }