index.css

html {
  height: 100%;
}

.wed-body {
  background-color: #272822;    
  display: flex;
  flex-direction: column; 
  min-height: 99%;  
  flex-wrap: wrap;
  font-family: system-ui;
}

.wed-header {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    height: auto;
    margin-right: 0.5em;
    color:  white;
    font-size: x-large;
}

.wed-header-title {
    margin-left: 3em;
}
.wed-header-logo {
    left:20px;
    position: absolute;
    top:-3px;
    font-size: xxx-large;
}

.wed-header-links {
    font-size: small;

}

.wed-main {
  display: flex;
  flex: 1 0 auto;

}



#textareaConsole {
 min-width: 100%;
 max-width: 100%;
 min-height: 4em;
 max-height: 30vh;
 resize: vertical;
  background: black;
  color: yellow;
}

textarea {
    width:  100%;
    /*resize: none;*/
} 


.editor-action {
position: absolute  ;
top:  0.1em;
right: 1.5em;
z-index: 100;
}

.editor-action button {
  border:  none;
}

.content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.wed-row {
  display: flex;
  flex: 1 0 auto;
  flex-direction: row;
}

.wed-col {
  position: relative;
  flex: 1 0 auto;
}

.wed-nogrow {
    flex-grow: 0; 
}

.wed-border {
  border: solid 1px lightgrey;

}


.wed-preview {
 background: #FFF;
 border:  solid 1px black;
 overflow: hidden   ;
 padding: 1em;
 width: 98%;
 min-width: 97%;
 max-width: 97%;
}


#wed-version {
    font-size: x-small;
}

.canhresize {
     resize: horizontal; 
     overflow: auto;
}

.canvresize {
     resize: vertical; 
     overflow: auto;
}

.wed-footer {
    color: white;
    padding: 0 2px;
}

.wed-header-links  a:visited, .wed-footer  a:visited {
    color: lightseagreen;
    text-decoration: none;
}

#update_sign {
    font-size: 0.9em;
}

.hidden {
    visibility: hidden;
}

.wed-templates {
  flex: 0 0 10em;
  font-size: 0.8em;
  color: white;
  text-align: center;
}

div[data-lang] {
    color: aqua;
    padding: 3px;
    text-align: end;
    margin-right: 1em;
}

/* SEARCH */
#wed-search {
    background: transparent url(img/search.png) 10px 7px no-repeat;      
    border: solid 1px rgba(116, 114, 114, 0.712);
    border-radius: 35px;
    padding: 7px 14px;                        
    margin: 5px 2px;
    width: 180px;
    color: #857f7f;
    text-indent: 20px;
}

#templatesCategories {
    display: flex;
    flex-wrap: wrap;
    justify-items: space-between;
}
.template {
    flex: 1 0 auto;
    border: solid 1px black;
    border-radius: 4px;
    background-color: red;
        margin: 0.3em;
}

.css-template {
    background-color: yellow;
}

.html-template {
    background-color: greenyellow;
}

.react-template {
    background-color: goldenrod;
}

.js-template {
    background-color: cornflowerblue;
}

/* BUTTONS */

/* BUTTONS */
button.template {
    background: #333;
    display: inline-block;
    padding:0.35em 1.2em;
    border:0.1em solid #FFFFFF;
    margin:0 0.3em 0.3em 0;
    border-radius:0.12em;            
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:#FFFFFF;
    text-align:center;
    transition: all 0.2s;
    border-radius: 9px;
    text-transform: uppercase;
}

.editor-btn {
    background: #0000;
    color: #FFFFFF;
    transition: all 0.2s;
    font-size: larger;
}
.editor-btn:hover {
    background-color:#4e4b4b;
    transform: scale(1.05);
}