#head { 
  width: 100%;
  height: 30%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px;
  text-align: center;
  line-height: 20px;
  color: rgba(255,255,255,0.9);
  background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
  background-size: 600%;
  -webkit-animation: anime 16s linear infinite;
          animation: anime 16s linear infinite;
}




#input{
    background-color: rgb(1, 1, 37);
    color: rgb(255, 255, 255);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#output{
    background-color: rgb(1, 1, 37);
}
#output-canvas {
    position: relative;
    overflow: hidden;
}

#imgChoice {
    display: block;
    max-width: 100%;
    height: auto;
}

#info {
    position: absolute;
    top: 20%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    color: white; 
    padding: 10px;
}

#info2 {
    position: absolute;
    width: 100%;
    top: 90%; 
    left: 70%;
    transform: translate(-50%, -50%); 
    color: white; 
    padding: 10px; 
}

/* Style for the container of radio buttons */
.radio-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Style for the radio buttons */
.radio-container input[type="radio"] {
    display: none; /* Hide the actual radio buttons */
}

/* Style for the labels (custom radio button appearance) */
.radio-container label {
    position: relative;
    padding-left: 30px; /* Add space for custom radio button appearance */
    cursor: pointer;
}

/* Style for the custom radio button indicator */
.radio-container label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px; /* Adjust alignment as needed */
    width: 20px;
    height: 20px;
    border: 2px solid #333; /* Border color for unselected state */
    border-radius: 50%; /* Circular shape */
    background-color: transparent;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Style for the custom radio button indicator when selected */
.radio-container input[type="radio"]:checked + label::before {
    border-color: #007bff; /* Border color for selected state */
    background-color: #007bff; /* Background color for selected state */
}

/* Hide the default focus ring */
.radio-container label:focus {
    outline: none;
}

/* Add focus styles to the custom radio button indicator when focused */
.radio-container label:focus::before {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

input {
    margin-top: 10px;
    margin-bottom: 10px;
}

select{
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#texy,
#texy2{
    width: 68%;
}

#fonsize,
#strokeInput{
    width: 100%;
}

#sub {
    width: 80px;
  height: 30px;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  color: rgba(255,255,255,0.9);
  border-radius: 50px;
  background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
  background-size: 600%;
  -webkit-animation: anime 16s linear infinite;
          animation: anime 16s linear infinite;
}

#sub2 {
    width: 80px;
  height: 30px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  color: rgba(255,255,255,0.9);
  border-radius: 50px;
  background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
  background-size: 600%;
  -webkit-animation: anime 16s linear infinite;
          animation: anime 16s linear infinite;
}

#save-img {
    width: 280px;
  height: 50px;
  bottom: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 18px;
  text-align: center;
  line-height: 20px;
  color: rgba(255,255,255,0.9);
  border-radius: 50px;
  background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
  background-size: 600%;
  -webkit-animation: anime 16s linear infinite;
          animation: anime 16s linear infinite;
}



@-webkit-keyframes anime {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes anime {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}