@media screen and (max-width: 768px) { 
    
    body {
      font-family: 'Courier New', monospace;
      background-color: #333;
      color: #00ff00;
      font-size: 10px;
      display: flex;
      flex-direction: column;
      font-family: 'Menlo', monospace;
      height: 95vh; /* Make body take full height of the viewport */
      border: 6px solid #333;
      height: 98vh;
      display: flex;
      margin: 0;
      padding: 0;
      border: 6px solid #736D6D;
    }
    
    img.imgbanner {
        float: left;
        width: 50px;
    }
    
    pre {
      margin-left: 0px;
      font-size: 4px;
    }
    
    .prompt {
      display: flex;
      align-items: center;
      background-color: #333;
      padding: 10px;
      border-top: 1px solid #00ff00;
      box-shadow: 0 -2px 5px rgba(0, 255, 0, 0.5); /* Adjusted box-shadow to top */
    }

    .prompt-symbol {
      color: #00ff00;
      margin-right: 5px;
    }

    input {
      background-color: #333;
      border: none;
      outline: none;
      color: #00ff00;
      font-family: 'Courier New', monospace;
      flex: 1; /* Take remaining width */
      margin-left: 5px;
      font-family: 'Menlo', monospace;
    }

    #output-container {
      padding: 10px;
      margin-top: auto; /* Push the output container to the bottom */
      overflow-y: auto; /* Add scroll to the output container */
      white-space: pre-line;
      flex: 1; /* Take remaining height */
      line-height: 1.5;
    }

    .error {
      color: #ff0000;
    }
      
    .info {
      color: #F0C300; 
    }
      
    .text {
      color: #FEFEFE; 
    }  
      
    #suggestions-container {
      background: #302F2F;
      color: #D1D0D0;
      padding: 5px
    }


    #menu {
        width: 100%;
        background-color: #736D6D;
        color: white;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        top: 0; /* Aligner le haut du menu en haut de la page */
        right: 0; /* Aligner le côté droit du menu sur le côté droit de la page */
        display: none;
        height: 20vh; 
        opacity: 0.9;
    }

    #menu a {
        text-decoration: none;
        color: white;
        font-size: 16px;
        margin: 10px 0;
        display: flex;
        align-items: center; /* Aligner verticalement le texte et l'icône */
        transition: color 0.3s;
    }

    #menu a i {
        margin-right: 10px; /* Espacement entre l'icône et le texte */
    }

    #menu a:hover {
        color: #00ff00;
    }
    
    ul {
        list-style-type : none;
        padding-left: 0; 
    }
    
    .loader {
        border: 5px solid #00ff00;
        border-top: 5px solid #777;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 25%
    }

    .loadertext {
        margin-left: auto;
        margin-right: auto;
        width: 120px;
        text-align: center;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

}
@media screen and (min-width: 800px) { 
      body {
      font-family: 'Courier New', monospace;
      background-color: #333;
      color: #00ff00;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      font-family: 'Menlo', monospace;
      height: 95vh; /* Make body take full height of the viewport */
      border: 6px solid #333;
      height: 98vh;
      display: flex;
      margin: 0;
      padding: 0;
      border: 6px solid #736D6D;
    }
        
    img.imgbanner {
        float: left;
        width: 120px;
    }
    
    pre {
      margin-left: 10px;
    }
      
    .prompt {
      display: flex;
      align-items: center;
      background-color: #333;
      padding: 10px;
      border-top: 1px solid #00ff00;
      box-shadow: 0 -2px 5px rgba(0, 255, 0, 0.5); /* Adjusted box-shadow to top */
    }

    .prompt-symbol {
      color: #00ff00;
      margin-right: 5px;
    }

    input {
      background-color: #333;
      border: none;
      outline: none;
      color: #00ff00;
      font-family: 'Courier New', monospace;
      flex: 1; /* Take remaining width */
      margin-left: 5px;
      font-family: 'Menlo', monospace;
    }

    #output-container {
      padding: 10px;
      margin-top: auto; /* Push the output container to the bottom */
      overflow-y: auto; /* Add scroll to the output container */
      white-space: pre-line;
      flex: 1; /* Take remaining height */
      line-height: 1.5;
      height: 95vh; 
    }

    .error {
      color: #ff0000;
    }
      
    .info {
      color: #F0C300; 
    }
      
    .text {
      color: #FEFEFE; 
      font-style: italic;
    }  
      
    #suggestions-container {
      background: #302F2F;
      color: #D1D0D0;
      padding: 5px
    }


    #menu {
        width: 15%;
        background-color: #736D6D;
        color: white;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        top: 0; /* Aligner le haut du menu en haut de la page */
        right: 0; /* Aligner le côté droit du menu sur le côté droit de la page */
        display: none;
        height: 30vh; 
        opacity: 0.5;
    }

    #menu a {
        text-decoration: none;
        color: white;
        font-size: 16px;
        margin: 10px 0;
        display: flex;
        align-items: center; /* Aligner verticalement le texte et l'icône */
        transition: color 0.3s;
    }

    #menu a i {
        margin-right: 10px; /* Espacement entre l'icône et le texte */
    }

    #menu a:hover {
        color: #00ff00;
    }
    
    ul {
        list-style-type : none;
        padding-left: 0; 
    }
    
    .loader {
        border: 5px solid #00ff00;
        border-top: 5px solid #777;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 25%
    }

    .loadertext {
        margin-left: auto;
        margin-right: auto;
        width: 120px;
        text-align: center;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

}