* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  background: linear-gradient(135deg, #a3aff1, #1477e9);
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff; /* Set your background color */
  }
  
  .center-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .circle-container {
    position: relative;
    width: 600px; /* Adjust the width as needed */
    height: 600px; /* Adjust the height as needed */
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Set your desired shadow */
    overflow: hidden;
  }
  
  iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 50%;
  }
  .blogo {
    position: absolute;
    top: 10%; /* Adjust the top position */
    left: 50%; /* Adjust the left position */
    transform: translate(-50%, -50%);
    width: 512px;
    height: 124px;
  }
  
  .alogo {
    width: 204.8px;
    height: 82.7px;
    bottom: 1px;
    left: 25%;
    position: absolute;
  }
  .custom-input {
    text-align: center;
    font-family: 'Vanilla Extract';
    width: 70px;
    height: 70px;
    font-size: 40px;
    border: 1px solid #ccc; /* Thin borders */
    border-radius: 10px; /* Rounded corners */
    background-color: rgba(255, 255, 255, 0.7); /* Slight transparency */
    outline: none; /* Remove default focus outline */
    transition: border 0.3s, background-color 0.3s; /* Smooth transition */
    right: 850px;
    bottom: 90px;
    position: absolute;
}
.custom-input-2 {
  text-align: center;
  font-family: 'Vanilla Extract';
  width: 70px;
  height: 70px;
  font-size: 40px;
  border: 1px solid #ccc; /* Thin borders */
  border-radius: 10px; /* Rounded corners */
  background-color: rgba(255, 255, 255, 0.7); /* Slight transparency */
  outline: none; /* Remove default focus outline */
  transition: border 0.3s, background-color 0.3s; /* Smooth transition */
  left: 850px;
  bottom: 90px;
  position: absolute;
}

/* Style when the input box is focused (active) */
.custom-input:focus {
    border: 2px solid #007bff; /* Change border color on focus */
    background-color: rgba(255, 255, 255, 1); /* Remove transparency on focus */
}
.thetable {
  border-collapse: collapse;
  position: absolute;
  border-spacing: 20px;
  top: 230px; /* Adjust the top position as needed */
  left: 200px; /* Adjust the left position as needed */
}
.thetable-2 {
  border-collapse: collapse;
  position: absolute;
  border-spacing: 20px;
  top: 230px; /* Adjust the top position as needed */
  right: 200px; /* Adjust the left position as needed */
}
      .thetable td {
          cursor: default;
          position: relative;
          padding: 4px;
          font-size: 18px; /* Adjust padding as needed */
          text-align: center; /* Center text within cells */
          
          
      }
      .thetable-2 td {
          cursor: default;
          position: relative;
          padding: 5px; /* Adjust padding as needed */
          text-align: center; /* Center text within cells */
          
          
      }

      .edit-input {
          width: 50px;
      }

      .vertical-line {
          position: absolute;
          height: 6cm;
          width: 4.5px;
          background-color: #ffffff; /* Adjust line color as needed (e.g., red) */
          left: 375px;
          transform: translateX(-50%);
          top: 282px;
          border-radius: 1000px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

      }

      .horizontal-line {
          position: absolute;
          width: 7.5cm;
          height: 4.5px;
          background-color: #ffffff; /* Adjust line color as needed (e.g., green) */
          left: 230px;
          top: 280px;
          border-radius: 1000px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      }
    

.vertical-line-2 {
  position: absolute;
  height: 13.5cm;
  width: 4.5px;
  background-color: #ffffff; /* Adjust line color as needed (e.g., red) */
  right: 350px;
  transform: translateX(-50%);
  top: 282px;
  border-radius: 1000px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

}

.horizontal-line-2 {
  position: absolute;
  width: 7.5cm;
  height: 4.5px;
  background-color: #ffffff; /* Adjust line color as needed (e.g., green) */
  right: 220px;
  top: 280px;
  border-radius: 1000px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
      .eyes{
          color: white;
          -webkit-text-stroke: 1.5px rgb(0, 0, 0);
          /*text-shadow: black 1px 1px 5px;*/
          font-size: 27px;
      }
      .e-cell{
          font-size: 27px;
      }
      .unique-word{
          color: white;
          -webkit-text-stroke: 1px rgb(0, 0, 0); 
          /*text-shadow: black 1px 1px 2px;*/
          font-family: 'Vanilla Extract';
      }
      input, textarea, select, button {
        font-size: 27px; /* Set a base font size for form elements */
    }

@media screen and (max-width: 600px)
{
  .circle-container{
    height: 340px;
    width: 340px;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Set your desired shadow */
    overflow: hidden;
   
  }
  .alogo{
    width: 170.7px;
    height: 68.9px;
    position: absolute;
    bottom: 0;
    left: 28%;
    margin-bottom: -88px;
  }
  .blogo{
    width: 293px;
    height: 71px;
    top: 41px;
    left: 49%;
    z-index: 9999;
  }
  .e-cell{
    font-size: 15px;
    font-family: 'Vanilla Extract';
  }
  .eyes{
    color: white;
    -webkit-text-stroke: 1px rgb(0, 0, 0);
    
    font-size: 15px;
  }

  .vertical-line{
    position: absolute;
    height: 5.5cm;
    width: 4px;
    background-color: #ffffff; /* Adjust line color as needed (e.g., red) */
    left: 50%;
    transform: translateX(-50%);
    top: 350px;
    border-radius: 1000px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  .center-container {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .thetable {
    border-collapse: collapse;
    position: absolute;
    top: 345px; /* Adjust the top position as needed */
    left: 10px; /* Adjust the left position as needed */
  }
  .thetable td {
    cursor: default;
    position: relative;
    text-align: center; /* Center text within cells */
}
}