body {height: 100vh;margin: 0;background-color: #1f1f1f;color: #f1f1f1;}
header{display: flex;justify-content: space-evenly;align-items: center;padding: 10px;border-bottom:#f1f1f1 1px solid;}
nav ul{list-style-type: none;padding: 0;margin: 0;}
nav ul li{display: inline-block;margin-right: 10px;}
nav ul li a{font-size:1.5em;}
li.index a{border: #45a049 1px solid; color: #45a049; padding:6px 20px;}
li.deindex a{border: #974141 1px solid; color: #974141; padding:6px 20px;}
.help{text-align: left;margin-bottom: 10px;}
.info h1{margin-bottom:5px;}
.info p{margin:4px;}
.container {width:60vw;text-align: center;margin: auto;}
.form {width: 100%;}
.textarea {height: 60vh;max-height: 60vh;min-height: 60vh;width: 100%;margin-bottom: 20px;resize: vertical;background-color: #333;border: none;color: #fff;}
textarea:focus, select:focus, button:focus {outline: none;}
.submit-btn {padding: 10px 20px;border: none;color: #fff;cursor: pointer;transition: background-color 0.3s ease;font-size: 2em;width: 25vw;font-family: 'Courier New', Courier, monospace;}
.acc {padding: 10px 20px;border: none;color: #fff;background-color: #333;width: 95%;cursor: pointer;transition: background-color 0.3s ease;font-size: 1.5em;font-family: 'Courier New', Courier, monospace;margin-bottom: 20px;}
.green{background-color: #4CAF50;}
.red{background-color: #af4c4c;}
.white{background-color: #f1f1f1;}
.green:hover{background-color: #45a049;}
.red:hover{background-color: #974141;}
.white:hover{background-color: #dddddd;}
.tooltip {position: relative;cursor: help;}
.tooltip::after {content: attr(data-title);position: absolute;width:30vw;background-color: #333;color: #fff;padding: 8px;border-radius: 5px;z-index: 1;visibility: hidden;opacity: 0;transition: opacity 0.3s ease-in-out;margin-top: -6px;border: #af4c4c 1px solid;}
.tooltip:hover::after {visibility: visible;opacity: 1;}
.copy{font-size: 3em;margin-top: -10px;cursor:pointer;}
.html_response{margin-top:50px;text-align:left;border: #c1c1c1 2px dashed;padding: 10px;}