body,html{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,sans-serif;font-size:18px;background-color:#111;background-image:linear-gradient(90deg,rgba(238,238,238,.1) 1px,transparent 1px),linear-gradient(180deg,rgba(238,238,238,.1) 1px,transparent 1px);background-size:20px 20px;background-position:center}.App{display:grid;grid-template-columns:2fr 8fr;height:auto;min-height:100vh;color:#eee}.history__container{display:grid;grid-template-rows:.5fr 9.5fr;width:100%;height:100vh;padding:1rem 0 0 1rem;background:#222;z-index:1;position:relative}.history__text{max-height:3rem;z-index:2}.history__text h1{font-size:2rem;font-weight:600;position:fixed;top:0;left:1rem;right:0}.history__contents{overflow-y:auto;margin-top:3rem}.history__contents::-webkit-scrollbar{width:1rem}.history__contents::-webkit-scrollbar-track{background-color:#222}.history__contents::-webkit-scrollbar-thumb{background-color:#333}.history__item p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;padding:1rem;margin:0}.history__item{width:95%}.history__item:hover,.history__item.active{background-color:#333;border-radius:.25rem}.App__container{grid-column:2;display:flex;flex-direction:column;align-items:center;margin:auto;padding:1rem}header{font-size:4rem;font-weight:600;background-image:linear-gradient(to right,#007bff,#39f);-webkit-background-clip:text;background-clip:text;color:transparent}h2{font-size:1.7rem;font-weight:500;margin-bottom:3rem}p{font-size:18px}.App__form{display:flex;flex-direction:column;align-items:center;width:720px;margin:0 auto}.App__form--input{display:flex;justify-content:space-between;align-content:center;width:100%;gap:1rem}.App__input{flex:8;padding:1rem;border:1px solid white;border-radius:.25rem;font-size:18px;color:#eee;background-color:#222}.App__button{flex:2;padding:1rem;border:none;border-radius:.25rem;font-size:18px;background-color:#007bff;color:#eee;cursor:pointer;transition:background-color .3s}.App__button:hover{background-color:#39f}#Error{color:#e53935}.App__response{width:95%;height:480px;padding:1rem;margin-top:1rem;border:none;border-radius:.25rem;font-size:18px;background-color:#222;color:#eee;text-align:left;overflow-y:auto}.App__response::-webkit-scrollbar{width:1rem}.App__response::-webkit-scrollbar-track{background-color:#222}.App__response::-webkit-scrollbar-thumb{background-color:#333}.App label{display:none}@media (max-width: 1024px){.App{grid-template-columns:1fr}.history__container{grid-template-rows:auto;height:auto;max-height:50vh;padding:1rem}.history__contents{max-height:45vh}.App__container{margin:2rem 1rem;width:100%;padding:1rem}.App__form{width:100%}.App__response{max-height:200px}}@media (max-width: 768px){.App{padding:1rem}.history__container{padding:.5rem;height:auto}.App__form--input{flex-direction:column;gap:.5rem}.App__input,.App__button{width:100%}}@media (max-width: 480px){.history__text h1{font-size:1.5rem}.history__item p{font-size:.9rem}header{font-size:2rem}h2{font-size:1.2rem}.App__input{font-size:16px}.App__button{font-size:16px;padding:.75rem}.App__response{font-size:16px;max-height:150px}}