body {
    font-family: Arial, sans-serif;
    background-color: #18122b; /* Dark background color */
    color: #fff; /* Light text color */
    display: flex;
    /*flex-wrap: wrap; */
    /*justify-content: flex-start; /* Align containers to the left */
}

.container {
     /*flex: 0 0 calc(33.33% - 20px); /* Adjust width as needed */
    width: 50%; /* You can adjust this width as needed */
    margin: 10px ;
    margin-top: 40px;
    /*margin-left: 25%;*/
    padding: 10px;
    border: 1px solid #555; /* Darker border color */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #393053; /* Slightly darker background color */
    
    
}
        
     
  /**  .typicalCode {
    
    max-width: 400px;
    margin-left: 150px;
    margin-right: 50px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #555; 
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #444; 
}*/

        .hidden{
            display: none;
        }

        .visible{
            display: block;
        }

        .fa-copy
        {
        color: #fff;
        float:right;
        font-size:18px
        }
        
        .fa-copy:hover
        {
        color: grey;
        }
        
 
    
h1 {
    text-align: center;
    color: #fff; /* Light text color */
}
        
input {
    background-color: #333; /* Dark background color */
    color: #fff; /* Light text color */
    border: 1px solid #555; /* Darker border color */
    border-radius: 5px;
    padding: 5px 10px;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 50%;
    
}

select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #555; /* Darker border color */
    border-radius: 5px;
    background-color: #444; /* Slightly darker background color */
    color: #fff; /* Light text color */
}

button {
    width: 100%;
    padding: 10px;
    background-color: #219e30;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}
        
input.activators::placeholder {
color: #ffffffa3;
        } 
input.activators:focus::placeholder {
color:  transparent;
        } 
        
        
input::placeholder {
    color: transparent;
    transition: color 0.2s ease; 
}
        
 input:hover::placeholder {
color: #ffffffa3; /* o el color que desees */
}       
        
 input:focus::placeholder {
color: #ffffffa3; /* o el color que desees */
}

button:hover {
    background-color: #0056b3;
}

  .input-group {
position: relative;
}

.input-group__input {
color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
outline: 2px solid #fff;
background-color: #615a79a1;
transition: outline-color 200ms;
}

.input-group__input:focus {
outline-color: #3c50eb;
}

.input-group__label {
position: absolute;
top: 20px;
left: 10px;
color: #fff;
font-size: 14px;
font-weight: normal; 
transition: transform 200ms, scale 200ms, font-weight 0.2s ease, font-size 0.2s ease;


}

.input-group__input:hover + .input-group__label {
  padding-inline: 5px;
  transform: translate(-10px, -14px) scale(0.9);
  top: 6px;
  background-color: transparent;
  font-weight: bold;
  font-size: 16px;  
}

.input-group__input:focus + .input-group__label,
.input-group__input:valid + .input-group__label {
padding-inline: 20px;
transform: translate(-10px, -14px) scale(0.9);
top: 6px;
background-color: transparent; 
font-weight: bold;
font-size: 16px;


}

pre {
    font-family: "Courier New", monospace;
    background-color: #272822;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    display: block;
    font-size: 14px;
    color: #fff;
    white-space: pre-wrap;
    word-wrap: break-word;
}
 .keyword {
    color: #f92672; 
}

 .string {
    color: #e6db74; 
}

  .comment {
    color: #999; 
}

 .variable {
    color: #f92672; 
}

.number {
    color: #ae81ff; 
}
        
.htmlTag{
    color: #f92672; 
}
        
.var-name{
    color: #fd971f; 
}  

.function{
    color: #a6e22e; 
} 

.function-name{
    color: #fd971f; 
}         

#code-editor:focus {
    outline: none;
    border: none;
    
}

        
.token {
    font-size: 14px;
    font-family: "Courier New", monospace;
    
} 

.token.keyword {
    color: #f92672;
    
} 

.token.string {
     color: #e6db74; 
    
}

.token.function {
     color: #a6e22e; 
    
}      




.jello-horizontal {
    -webkit-animation: jello-horizontal 0.9s both;
            animation: jello-horizontal 0.9s both;
    -webkit-animation-delay: 3.9s ; 
            animation-delay: 3.9s ; 
    width: auto;
    padding-right: 100px;
    margin-top: 5px;
    margin-bottom: 15px;
    text-align: left;
}

@-webkit-keyframes jello-horizontal {
  10% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  60% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  85% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  10% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  60% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  85% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}