@font-face {
      font-family: "JetBrains Mono";
      src: url("webfonts/JetBrainsMono-Regular.woff2") format("woff2");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    * {
      box-sizing: border-box;      
      margin: 0;
      padding: 0;
      border: none;
      color-scheme: dark;
      font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
      font-size: 16.5px;    	
      letter-spacing: 0.5px;
      line-height: 27px;
    }
    
    /* Global styles */
    html, body {
      height: 100%;
      width: 100%;
      overflow: hidden;
      background-color: rgb(27, 27, 27);      
    }

    /* Big textarea occupies the whole page */
    #txtArea {
      padding: 29px;
      padding-right: 21px;
      padding-top: 71px;
      /*padding-left: 65px;*/
      width: 100%;
      height: 100%;
      color: rgb(225, 225, 225);
      background-color: rgb(27, 27, 27);
      resize: none;
	  -webkit-appearance: none;
	  caret-color: white;

      /*overflow-y: scroll;
      white-space: pre;*/
    }

    #txtArea:focus {
      outline: none;
      border: none;
    }

    /*
	#rowNumbers {
	  padding-top: 27px;
	  width: 61px;
	  position: absolute;
	  height: 100%;
	  color: rgba(255, 255, 255, 0.15);
	  background-color: rgb(27, 27, 27);
	  left: 0;
	  top: 0;
	  cursor: pointer;
	  text-align: center;
	  pointer-events: none;
	}

	#rowNumbers div {
	  line-height: 27px;
	  color: rgba(255, 255, 255, 0.15);
	}
	*/

	/*
	#rowNumbers div:last-child {
	  color: rgba(255, 255, 255, 0.05);
	}
	*/

	/* Position the container absolutely in the top right corner */
	#topButtons {
	  position: absolute;
	  top: 0px;
	  /*top: 0px;right: 0px;*/
	  left: 50%; 
	  transform: translateX(-50%);
	  padding: 15px; /* Padding adds space around the buttons */
	  padding-bottom: 13px;
	  padding-top: 13px;
	  background-color: rgba(27, 27, 25, 0.85);
	  display: flex;
	  flex-direction: row; 
	  gap: 20px; /* Space between buttons */
	  z-index: 1000; 
	  pointer-events: none;
	  justify-content: center; /* Centers buttons within the container */
	  border-radius: 0px 0px 30px 30px;
	  /* Removed fixed width: 140px */
	}

	#topButtons button {
	  pointer-events: auto;
	  width: 40px;
	  height: 40px;
	  border-radius: 50%;
	  border: none;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  cursor: pointer;
	  outline: none;
	}


	/* "Push" button: green circle with an upward arrow */
	/* "Add" button: light gray background with dark text */
	/* Add a transition to the buttons for smooth effects */
	#topButtons button {
	  transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	/* On hover, scale up the button and add a subtle shadow */
	#topButtons button:hover {
	  transform: scale(1.1);
	  cursor: pointer;
	  /* box-shadow: 0px 0px 3px rgba(0, 0, 0, 1); */
	}

	button:not(:hover) {
 	  transform: scale(1); /* Ensures it returns to original size */
	}
/* 
	#topButtons button.active {
		box-shadow: none;
	}
*/
	/* Common button styling already defined for #pushButton, etc. */

	/* Additional styling for the disabled state of the push button 
	#topButtons button:disabled {
	  opacity: 0.6;
	  background-color: #000000 !important;
	}
	*/

	span.icon, span.spinner {
		height: 32px;
		width: 32px;
		line-height: 32px;
		position: absolute;
		display: block;
		/*top: 4px;
		left: 4px;*/
		top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	}

	/* When the button is enabled (normal state) */
	button:not(:disabled) .icon {
	  opacity: 1;
	  /* Wait 0.3s for the spinner to fade out, then fade in */
	  transition: opacity 0.1s ease 0.1s;
	}
	button:not(:disabled) .spinner {
	  opacity: 0;
	  /* Fade out immediately */
	  transition: opacity 0.1s ease 0s;
	}

	/* When the button is disabled */
	button:disabled .icon {
	  opacity: 0;
	  /* Fade out immediately */
	  transition: opacity 0.1s ease 0s;
	}
	button:disabled .spinner {
	  opacity: 1;
	  /* Wait 0.3s for the icon to fade out, then fade in */
	  transition: opacity 0.1s ease 0.1s;
	}

	/* Apply the spin animation to the spinner */
	span.spinner {
	  animation: spin 1s linear infinite;
	}

	/* Combine centering with rotation in the keyframes */
	@keyframes spin {
	  0% {
	    transform: translate(-50%, -50%) rotate(0deg);
	  }
	  100% {
	    transform: translate(-50%, -50%) rotate(360deg);
	  }
	}

	/* You might also add a hover effect for normal state if desired
	#topButtons button:hover:not(.disabled) {
	  transform: scale(1.1);
	  background-color: #717171;	  
	  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	} */

	/* Normal push button: green */

	#addButton, #linkButton, #copyButton {
	  background-color: #858585;
	  color: white;
	}

	#addButton.active, #linkButton.active, #copyButton.active  {
	  background-color: #717171;
	}

	#pushButton {
	  background-color: #4CAF50;
	  color: white;
	}

	/* When active (pressed), make push button darker */
	#pushButton.active, #pushButton:disabled {
	  background-color: #388E3C;
	}

	/* Normal pull button: blue */
	#pullButton {
	  background-color: #2196F3;
	  color: white;
	}

	/* When active (pressed), make pull button darker */
	#pullButton.active, #pullButton:disabled {
	  background-color: #1976D2;
	}

	#topButtons #leftIconButton {
		background-color: transparent;
	  transform: scale(1.1);
    pointer-events: none;	  
    cursor: default; /* or cursor: auto; */

	}