@import url('https://fonts.googleapis.com/css2?family=Secular+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300&display=swap');

body {
    background-color:whitesmoke;
    pad: 15 px;
    border: 10px;

}
textarea {
    padding-top: 20px;
}

.CodeMirror * {
    font-size: 1vw ;
}

.alert{
    background: #ffdb9b;
    padding: 20px 40px;
    min-width: 420px;
    position: absolute;
    right: 0;
    top: 10px;
    border-radius: 4px;
    border-left: 8px solid #ffa502;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

footer {
    align-content: center;
    background: rgb(33,176,66);
    background: linear-gradient(0deg, rgba(33,176,66,1) 0%, rgba(34,193,195,1) 100%);
    border-radius: 15%;
    color: whitesmoke;
    font-family: 'Nanum Gothic Coding', monospace;
}


label {
    font-size: 20px;
    font-family: 'Secular One', sans-serif;
}

.menu-item {
    border: 10px;
    padding-top: 3%;
    padding-right: 5%;
    padding-left: 5%;
    padding-bottom: 3%;
    display:inline-flexbox;
}

.input-text {
    
    padding-left: 3%;
    padding-right: 3%;
    display: inline;
    width: 50%;

}

.console {
    padding: 5%;
}


#codeArea {
    border: 15%;
}

.java-input {
    flex-wrap: nowrap;
    width: auto;
    height: 400px;
    border-radius: 5px;
    font-size: 10px;
    font-family: 'Nanum Gothic Coding', monospace;
    display: inline-block;
    overflow-x: scroll;
}

.rownr {overflow-y: hidden;
    background-color: rgb(105,105,105);
   color: white; 
   text-align: right; 
   vertical-align:top;
   width: 40px;
   height: 400px;
   font-size: 18px;
   font-family: 'Nanum Gothic Coding', monospace;
   display: inline-block;
}

#xml-output {
    flex-wrap: nowrap;
    width: 100%;
    height: 250px;
    font-size: 15px;
    color: white;
    border-radius: 5px;
    background-color: rgb(74, 69, 69);
    font-family: 'Ubuntu Mono', monospace;
}





.special-textarea {
    display: block;
}

.tag-section {
    padding-bottom: 12px ;
}

#transpilar {
    height: 50px;
    width: 100px;
    background-color: teal;
    color: white;
    border-radius: 12%;
    display: inline-block;
    font-family: 'Sansita Swashed', cursive;
}


#transpilar:hover {
    background-color: lightgreen;
}



.menu-item-btn:hover {
    background-color: lightgreen;
}

.menu-item-btn {
    height: 50px;
    width: 100px;
    color: white;
    border-radius: 12%;
    display: inline-block;
    font-family: 'Sansita Swashed', cursive;
    background-color: teal;
}

.title-menu {
    color: white;
}

.inputsArea {
    display:  flex;
    flex-direction:row;
}