index.css

#exe-button{
    display: block;
    position: fixed;
    z-index: 5;
    height: 6.2rem;
    width: 6.2rem;
    right: 0;
    border-radius: 50%;
    background: black;
    border: white solid 0.2rem;
    margin-top: 5%;
    margin-right: 1%;
    outline: none;
    transition: 1s all ease;
}

#cs_str, #ds_str{ display: none;}

#logo-block{
    width: 90%;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    display: block;
}



#inside-exe-button{
    display: block;
    position: relative;
    margin: auto;
    margin-top: 10%;
    width: 80%;
    outline: none;
    height: 80%;
    border: white solid 0.4rem;
    border-radius: 50%;
    background: black;
    color: white;
    align-content: center;
    text-align: center;
    font-size: x-large;
    transition: 0.5s;
    transition-delay: 0.2s;
}
#inside-exe-button h2{
    text-align: center;
}

#exe-button:hover{
border-color: black;
    background-color: white;
    height: 6.5rem;
    width: 6.5rem;
    transition: 1s;
    transition-delay: 0.1s;
}

#exe-button:hover #inside-exe-button{
    /*background-color: white;*/
    border-color: black;
    /*color: black;*/
    transition: 0.5s;
}


#exe-button:active{
    background-color: grey;
    transition: 1s ease;
}



#menu-segment-1{
    z-index: 4;
    display: block;
    position: relative;
    width: 100%;
    background: black;
    overflow: visible;
    border: none;
    outline: none;
    margin-bottom:-0.25rem;
}
#editor-segment-1{
    border-collapse: collapse;
    background: #d1d1d1;
    display: table;
    position: relative;
    width: 96%;
    margin: auto;
    outline: none;
    height: 100%;

}
#flex-box{
    position: relative;
    display: block;
    width: 72%;
    height: 100%;
    display:flex;
    padding: 0;
    outline: none;
}

.commands-buttom{
    text-decoration: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    display: block;
    position: relative;
    right: 0;
    background: black;
    color: white;
    padding: 0.2rem;
    font-weight: bolder;
    outline: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

a{
    font-size: (calc(14px + 2 * ((100vw - 420px) / 860)));
    text-decoration: none;
}


.commands-buttom:hover{
    background: rgb(208, 208, 208);
    color: black;
    outline: white;
    /*text-decoration: underline black;*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border-left: 5% solid black;
    margin-left: -1%;
}

  .flex-window {
    outline: white dashed 1px;
    background: black;
    position: relative;
    height: 100%;
    width: 100%;
    border: none;
    padding: 3%  !important;
    /*display: block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;*/
    box-sizing:border-box;
    overflow: auto;
    border-collapse: collapse;
    /*overflow-y: scroll;
    -webkit-overflow-scrolling : touch;*/
  }

    .window{
    position: relative;
    color: white;
    position: relative;
  }

p{
    font-family: /*'Times New Roman', Times, sans-serif*/ 'Playfair Display', serif;;
    font-weight: bold;
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
    cursor: pointer;
  }

  p#hq{
      text-decoration: underline;
  }

  table#table_for_commands{
    border-collapse: collapse;
      width: 100%;
      text-align: left;
      overflow: scroll;
  }

  td#tsp1{
    padding: 0.3rem;
    border: white dashed 0.1rem;
    background: black;
    color: white;
  }


#buttons-block{
    position: relative;
    display: block;
    margin-left: 1rem;
    width: max-content;
    height: max-content;
}

#insructions-button, #exemples-button, #tips-button{
    position: relative;
    display: inline-block;
    width: 15rem;
    height: 2.5rem;
    padding: 0.5rem;
    font-family: /*'Times New Roman', Times, sans-serif*/ 'Playfair Display', serif;
    font-weight: bold;
    letter-spacing: 0.1rem;
    font-size: 0.8rem;
    cursor: pointer;
    color: white;
    border: none;
    background: grey;
    border-bottom: none;
    transition: 1s;
    outline: none;

	animation-duration: 10s;
    z-index: 1;
}



#exemples-button:hover, #insructions-button:hover{
    background: #a0a0a0;
    transition: 1s;
    z-index: 2;
}


#exemples-button:active, #insructions-button:active{
    background: #d1d1d1;
    box-shadow: none;
}


#logo{
    width: 100%;
    display: block;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-top: -5%;
    margin-bottom: -3rem;
}

#main_background{
    z-index: 3;
    display: block;
    position: absolute;
    background-color: white;left: 50%;
    transform: translateX(-50%);
    width: 90%;
    -webkit-box-shadow: 0px 0px 25px 0px rgba(34, 60, 80, 0.41);
    -moz-box-shadow: 0px 0px 25px 0px rgba(34, 60, 80, 0.41);
    box-shadow: 0px 0px 25px 0px rgba(34, 60, 80, 0.41);
    padding: 1%;
}

div.segment{
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: max-content;
    display: block;
    align-items: center;
    justify-content: center;
}

fieldset{
    position: relative;
    padding: 1rem;
    margin: 0 1rem 0;
    border-top:0.25rem solid gray;
    border-left:0.25rem solid white;
    border-bottom:0.25rem solid white;
    border-right:0.25rem solid white;
}

legend{
    /*font-family: Arial, Helvetica,serif;*/
    font-family: /*'Times New Roman', Times, sans-serif*/ 'Playfair Display', serif;
    font-weight: bold;
    letter-spacing: 0.2rem;
    font-size: 1.5rem;
    color: gray;
}

td{
    position: relative;
    color: #575757;
    border: 1px dashed #ababab;
    border-top: none;
    /*background:#d1d1d1;*/
    font-size: large;
    padding: 0.5rem;
}
td.address, td.codes{
    border-left: none;
}
td.codes{
    white-space: nowrap;
}
td.asm{
    border-right: none;
    padding-left: 0;
    width: 100%;
}

table#main_table,td.asm input[type=text]{
    font-size: large;
    font-family: monospace;
    color: #575757;
}

td.asm input[type=text]{
    text-align: left;
    border: 0;
    outline:none; 
    background: none;
    
}

textarea#asm_text, textarea#asm_text2{
    border: none;
    float: left;
    display: block;
    resize: none;
    height: 50%;
    top:0;
    position: absolute;
    width: 100%;
    outline: none;
    overflow: auto;
    margin-left: -1px;
    background: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

textarea#asm_text{
    height: 49%;
    padding-left: 1%;
    font-size: large;
    color: #acabab;
    transition: none;
    padding-top: 1%;
    font-family: /*'Times New Roman', Times, sans-serif*/ 'Playfair Display', serif;;
    font-weight: bold;
}

textarea#asm_text:focus{
    font-size: large;
    background: white;
    transition: none;
    text-align: left;
    padding-top: 0;
    font-family: monospace;
}

div.error{
    width: 100%;
    background: none;
    color: black;
    display: block;
    position: absolute;
    top: 50%;
    height: 50%;
    overflow: auto;
    border-top:0.25rem solid #a0a0a0;
    border-collapse: collapse;
    padding-top: 0.25rem;
}
div.error table{
    margin: 3%;
    width: 94%;
    border-collapse: collapse;
    text-align: left;
}
div.error th{
    font-family: /*'Times New Roman', Times, sans-serif*/ 'Playfair Display', serif;;
    font-weight: bold;
    color: white;
    padding: 0.5rem;
    border-right:0.1rem dashed white;
}
div.error td{
    border: none;
    color: white;
    border-top: 0.1rem dashed white;
    border-right: 0.1rem dashed white;
}

table#main_table {
    width: 50%;
    border-collapse: collapse;
    height: 100%;
    background: linear-gradient(0deg, #c1c0c0, #ffffff);

}

#if{
    display: table;
    border-collapse: collapse;
    width: 100%;
    height: 100%;
    top:0;
    position: static;
}

#for-error-table, table#main_table{
    position: relative;
    display: table-cell;
    border: 0.25rem solid #a0a0a0;
    overflow: hidden;
    height: 100%;
    align-content: stretch;
    justify-content: space-between;

}
#for-error-table{
    width: auto;
    height: 100%;
    background: linear-gradient(0deg, #c1c0c0, #ffffff);
}
table#main_table td{padding: 0px 10px;}
table#main_table td.err{color: red;}
table#main_table td.codes{min-width: 100px;}
table#main_table tr.edited td.asm input{color: brown;}
form.get_exe input[type="text"]{display: none; }

#segmentdata{
    display: block;
    align-content: center;
    position: relative;
    height: auto;
}
textarea.noframe, .noframe1{
    width: 12%;
    font-size: x-large;
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin: auto;
    border: none;
    resize: none;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    z-index: 2;
    text-align: center;
    outline: none;
}

.noframe1{
    width: 58%;
    border-left: 1px dashed #ababab;
    border-right: 1px dashed #ababab;
    color: #575757;
    background: none;
    transition: 1s;
}

textarea#nof-zero{
    background-color: #c1c0c0;
    border-right: 0.2rem solid grey;
    color: black;
    margin-top: -5px;
    box-shadow: -8px 8px 8px 0px rgba(0, 0, 0, 0.3);
    transition: 1s;
}

#nof-one{
    background-color: #c1c0c0;
    width: 12%;
    border-right: 0.2rem solid grey;
    background: #c1c0c0;
    
}

#nof-two{
    width: 24%;
    background-color: #c1c0c0;
    border-left: 0.2rem solid grey;
    background: gray;
    color: white;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

textarea.asm_text{
    border: gray solid 0.25rem;
}

textarea#ds_bytes, textarea#ds_text{
    width: 58%;
    font-size: x-large;
    display: inline-block;
    position: relative;
    overflow: visible;
    vertical-align: top;
    border: none;
    resize: none;
}
textarea#ds_bytes{
    border-top: none;
    border: 1px dashed #ababab;
    border-top: none;
    border-bottom: none;
    text-align: center;
    color: #575757;
    transition: 1s;

}

textarea#ds_bytes:focus{
    border: 1px solid #ababab;
    border-top: none;
    background: #dcdbdb;
    outline: none;
    border-bottom: none;
    transition: 1s;
}

textarea#ds_text{
    border-top: none;
    padding-top: 0.8%;
    width: 24%;
    background-color: #c1c0c0;
    border-left: 0.2rem solid grey;
    top: -5px;
    text-align: center;
    box-shadow: 8px 8px 8px 0px rgba(0, 0, 0, 0.3);
    transition: 1s;
}

textarea#ds_text:focus{
    background-color: #d1d1d1;
    transition: 1s;
    outline: none;
}

@media (min-width: 1100px) and (max-width: 1200px) {
    textarea#ds_text, textarea#ds_bytes, textarea.noframe, .noframe1{
        font-size: 1.5rem;
    }    
}

@media (min-width: 800px) and (max-width: 1100px) {
    textarea#ds_text, textarea#ds_bytes, textarea.noframe, .noframe1{
        font-size: 1.1rem;
    }    
}

@media (min-width: 500px) and (max-width: 800px) {
    textarea#ds_text, textarea#ds_bytes, textarea.noframe, .noframe1{
        font-size: x-small;
    }  
    textarea#ds_text{
        top: -5px;
    }
    textarea.noframe{
        margin-top: 5px;
    }
}

@media (min-width: 100px) and (max-width: 500px) {
    textarea#ds_text, textarea#ds_bytes, textarea.noframe, .noframe1{
        font-size: xx-small;
    }  
    textarea#ds_text{
        top: -5px;
    }
    textarea.noframe{
        margin-top: 5px;
    }
}

#warrning-1{
    margin-top: 2rem;
    font-weight: bold;
    font-size: 1rem;
}

#test-button{
    display: inline-block;
    position: relative;
    width: 24%;
    margin-left: 5%;
    outline: none;
    height: 3rem;
    background: black;
    color: white;
    font-family: /*'Times New Roman', Times, sans-serif*/ 'Playfair Display', serif;
    /*font-weight: bold;*/
    letter-spacing: 0.2rem;
    font-size: large;
    padding-left: 0.5rem;
    border: 0.2rem solid black;
    transition: 1s;
}

#test-button:hover{
    color: black;
    background:white;
    transition: 1s;
}

div.err.segment table > body{
    color: pink !important;
}