body {
  margin: 1.2%;
  background-color: #fef7ff;
  display: flex;
}

h1 {
  margin: 0;
}

.left {
  margin-top: 2%;
  margin-left: 2%;
  width: 300px;
  display: flex;
  flex-direction: column;
}

.logo {
  display: flex;
  flex-direction: column;
}

.stripes {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.stripes svg {
  margin-left: 2%;
  margin-right: 2%;
}

.stripes img {
  margin: 1%;
  height: 100px;
  width: auto;
}

.bellota-text-light {
  font-family: "Bellota Text", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.bellota-text-regular {
  font-family: "Bellota Text", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.bellota-text-bold {
  font-family: "Bellota Text", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.bellota-text-light-italic {
  font-family: "Bellota Text", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.bellota-text-regular-italic {
  font-family: "Bellota Text", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.bellota-text-bold-italic {
  font-family: "Bellota Text", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.baskervville-sc-font {
  font-family: "Baskervville SC", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 3.5rem;
}

.stats {
  padding: 15px;
  position: relative;
  top: 80px;
  left: 40px;
  width: 300px;
  height: 280px;
  border: 20px solid #D9D9D9; 
  box-sizing: border-box;     
}

.stats p {
  font-size: 1.5rem;
  margin: 0;
}

.right {
  position: relative;
  left: 200px;
}

.input {
  padding: 0px;
  padding-right: 5px;
  position: relative;
  top: 50px;
  left: 40px;
  width: 780px;
  height: 280px;
  border: 4px solid #3B69FF; 
  box-sizing: border-box; 
  border-radius: 9px;
  overflow: hidden;
}

#inputText {
  font-size: 1.1rem;
  border: none;
  width: 100%;
  height: 100%;
  outline: none;
  background: transparent;
  resize: none;
  padding: 15px;       
  box-sizing: border-box;
  display: block;
}

#inputText::selection {
  background-color: #D9D9D9; 
  color: #000000;          
}

#inputText::-webkit-scrollbar {
  width: 10px; 
}

#inputText::-webkit-scrollbar-track {
  background: #fef7ff; 
  border-radius: 10px;
  margin-right: 5px;
}

#inputText::-webkit-scrollbar-thumb {
  background: #3B69FF; 
  border-radius: 10px;
}

#inputText::-webkit-scrollbar-thumb:hover {
  background: #6a8dff; 
}

#inputText::-webkit-scrollbar-button {
  display: none;
}

.output {
  padding: 15px 15px 15px 7px;
  position: relative;
  top: 100px;
  left: 40px;
  width: 780px;
  height: 300px;
  border-top: 10px solid #0BAB00;
  border-left: 10px solid #0BAB00;
  border-right: 10px solid #0BAB00;
  box-sizing: border-box; 
}

.outputText {
  font-size: 1.1rem;
  height: 100%;       
  overflow-y: auto;   
  direction: rtl;     
}

.outputText p {
    direction: ltr;    
    margin: 0;
    white-space: pre-wrap;
    margin-left: 7px;
    cursor: default;
    transition: color 0.5s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.outputText p:not(:empty) {
    cursor: pointer;
}

.outputText p::selection {
  background-color: #D9D9D9; 
  color: #000000;          
}

.outputText p:hover:not(:empty) {
    color: #878787;
}

.outputText::-webkit-scrollbar {
    width: 10px;
}

.outputText::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0; 
}

.outputText::-webkit-scrollbar-thumb {
    background: #0BAB00; 
    border-radius: 0;    
}

.outputText::-webkit-scrollbar-thumb:hover {
  background: #066000; 
}

.outputText::-webkit-scrollbar-button {
    display: none;
}

.copy-popup {
    position: absolute;
    background-color: #002dc100;
    color: rgb(0, 0, 0);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-family: "Bellota Text", sans-serif;
    pointer-events: none; 
    z-index: 4000;
    animation: floatUpFade 1.2s ease-out forwards;
}

@keyframes floatUpFade {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    20% {
        opacity: 1;
        transform: translateY(-10px);
    }
    100% {
        opacity: 0;
        transform: translateY(-30px);
    }
}

.history {
    position: fixed;
    top: 0;
    right: 0;
    width: 650px;
    height: 100vh;
    background-color: #D9D9D9;
    border-left: 18px solid #FF2323;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.4s ease, border-left-color 0.4s ease;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.history:has(.historyButton:hover) {
    border-left-color: rgb(171, 49, 49);
}

.history.open {
    transform: translateX(0);
}

.historyButton {
    position: absolute;
    left: -75px; 
    top: 45%;
    width: 70px;
    height: 60px;
    background-color: #FF2323;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 20px 0 0 20px;
    font-size: 2.7rem;
    transition: background-color 0.4s ease, color 0.5s ease;
}

.historyButton i {
  left: 10px;
}

.historyButton:hover {
    background-color: rgb(171, 49, 49);
}

.pair {
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.request {
  background-color: #FF2323;
  border-radius: 20px 20px 0 0;
  position: relative;
  width: 610px;
  height: 170px;
  box-sizing: border-box; 
  margin-bottom: 0;
  padding: 5px; 
  overflow-y: auto;
}

.response {
  margin-top: 0;
  background-color: #fef7ff;
  border-radius: 0 0 20px 20px;
  position: relative;
  width: 610px;
  height: 170px;
  box-sizing: border-box; 
  padding: 5px;
  overflow-y: auto;
}

.misc {
  display: flex;
  justify-content: space-between; 
  align-items: center;            
  width: 610px;                   
  padding-top: 8px;              
  box-sizing: border-box;
}

.misc p {
    margin: 0;  
}

.misc span {
  transition: color 0.4s ease, color 0.5s ease;
  cursor: pointer;  
}

.request::selection,
.response::selection {
  background-color: #D9D9D9; 
  color: #000000;          
}

.misc p::selection {
  background-color: #D9D9D9; 
  color: #000000;          
}

.misc span::selection {
  background-color: #D9D9D9; 
  color: #000000;          
}

.history::-webkit-scrollbar,
.historyBar::-webkit-scrollbar,
.request::-webkit-scrollbar,
.response::-webkit-scrollbar {
    display: none !important;
}

.stats p::selection {
  background-color: #D9D9D9; 
  color: #000000;          
}

.misc span:hover {
    color: #FF2323;
}

.historyBar p {
  margin: 5px;
}

.historyBar .bellota-text-bold {
  font-size: 2.7em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
}

.historyBar {
    padding: 0 0 0 20px;
    height: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: relative;
}