body {
  display: grid;
  justify-content: center;
  align-items: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  
  min-height: 100vh;
  margin: 0;
  
  background-color: lightgray;
  background-image: 
    radial-gradient(circle, rgba(0, 0, 0, 0.1) 20%, transparent 50%), 
    linear-gradient(135deg, #ff8090, #a3f8f2);
  background-size: 200% 200%, 100% 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-blend-mode: normal;
  
  overflow-x: hidden;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
}
#generateVideoForm {
  width: 700px;
  padding: 4%;
  background: #FFFFFF;
  box-shadow: 20px 187px 75px rgba(0, 0, 0, 0.1), 20px 105px 63px rgba(0, 0, 0, 0.15), 0px 47px 47px rgba(0, 0, 0, 0.19), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#musicAndButton,
#videoAndButton {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 auto; /* Centra horizontalmente */
}

#videoDetails img,
#musicDetails img {
  max-width: 100%;
  width: 200; /* Establece un ancho fijo */
  height: 200; /* Establece una altura fija */
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 15px;
  display: block;
  object-fit: cover; /* Asegura que la imagen se recorte para llenar el contenedor */
}

#videoTitle,
#musicTitle {
  font-size: 16px;
  font-weight: 60;
  color: #8B8E98;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  text-align: center;
  transition: 0.5s;
  position: relative;
  left: 10px; /* Ajusta el posicionamiento similar al span */
}

#videoThumbnail,
#musicThumbnail {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 200; /* Asegura que la miniatura tenga un tamaño fijo */
  height: 200; /* Asegura una altura fija */
}
.fact{
display: flex ;
flex-direction: column;
}


/* Styling for mydict */
.mydict div {
display: flex;
flex-wrap: wrap;
margin-top: 0.5rem;
justify-content: center;

}

.mydict input[type="radio"] {
clip: rect(0 0 0 0);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;

}

.mydict input[type="radio"]:checked + .mydict-span {
box-shadow: 0 0 0 0.0625em #f3f3f3;
background-color: #f3f3f3; /* Verde */
z-index: 1;
color: #8B8E98;
}

.mydict-label {
display: block;
}

.mydict-span {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #8B8E98;
  font-weight: 60;
display: block;
cursor: pointer;
background-color: #fff;
padding: 0.375em 0.75em;
position: relative;
margin-left: 0.0625em;
box-shadow: 0 0 0 0.0625em #bbbbbb3a;
letter-spacing: 0.05em;
color: #4d4d4d;
text-align: center;
transition: background-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.mydict-label:first-child .mydict-span {
border-radius: 0.375em 0 0 0.375em;
}

.mydict-label:last-child .mydict-span {
border-radius: 0 0.375em 0.375em 0;
}