.var-highlight {
  /* color: #c0ad60; */
  color: #8ab4f8;
}

.string-highlight {
  /* color: rgba(253, 149, 90, 0.8); */
  color: #f28b82;
}

body {
  justify-content: center;
  align-items: center;
  margin-top: 35vh;
  background-color: #1e1e2f;
  color: #ffffff;
}

navbar a {
  transition: all 0.3s ease-in-out;
}

navbar a:hover {
  transform: scale(1.2);
}

navbar {
  position: absolute;
  top: 2vh;
  right: 1.5vw;
  font-size: 1.5em;
  border: 1px solid rgba(192, 173, 96, 0.5);
  padding: 10px;
}
navbar i {
  margin: 0 10px;
  text-decoration: none;
  /* color: black; */
  color: #80cbc4;
}
navbar i:hover {
  opacity: 0.5;
}

.fa {
  color: #c0ad60;
}

#typewriter {
  font-size: 2em;
  margin: 0;
  font-family: "Courier New";
}
#typewriter:after {
  content: "|";
  animation: blink 500ms linear infinite alternate;
}

@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

:root {
  --default-padding: 10px;
}

@mixin a11y-visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
}

.window {
  margin: auto auto; 
  display: flex;
  flex-direction: column;
  min-width: 400px;
  min-height: 300px;
  border: 5px solid #5e2ae9;
  box-shadow: 15px 15px 0 #5e2ae9;
  max-width: 600px;
  max-height: 500px;
  background-color: #7f00ff;
  filter: saturate(1);
  border-radius: 3px;
  font-family: "Inter", sans-serif;
  color: #331a46;
}

.window__title-bar {
  background-color: #8c5afb;
  color: white;
  padding: 13px var(--default-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
  user-select: none;
  z-index: 1;
  box-shadow: 0px 5px 6px -2px #bb99ff5e;
}

.window__body {
  flex-grow: 1;
  background-color: white;
  padding: var(--default-padding);
  overflow-y: auto;
  scrollbar-color: #4d21c3 #dfd4fd;
  scrollbar-width: thin;

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #dfd4fd;
  }

  &::-webkit-scrollbar-thumb {
    background: #4d21c3;
  }
}

.window__btn {
  cursor: pointer;
  background-color: #5e2ae9;
  width: 20px;
  height: 20px;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 5px;
  opacity: 0.8;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ae63e4;

  &:hover {
    opacity: 1;
  }

  span {
    @include a11y-visually-hidden;
  }
}

.window__btn + .window__btn {
  margin-left: 6px;
}

.window__title {
  line-height: 1;
  font-weight: 500;
  font-size: 1rem;
  font-weight: bold;
}

p > pre {
  font-family: monospace;
  background-color: #8c5afb;
  color: white;
  padding: 10px;
  white-space: pre;
  word-wrap: break-word;
  overflow: auto;
}

.window__status-bar {
  padding: 3px var(--default-padding);
  font-size: 0.75rem;
  color: #ecd4ff;
}

::-moz-selection {
  color: white;
  background: hotpink;
}
::selection {
  color: white;
  background: hotpink;
}

.overlay {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
}

#dialog {
  display: none;
  width: 100%;
  height: 100%;
  z-index: 1000; /* Ensure it is on top */
}

textarea {
  width: 100%;
  max-width: 100%;
  max-height: 200px;
  padding: 10px;
  border: 2px solid #8c5afb; /* Match the color scheme */
  border-radius: 5px;
  font-family: "Courier New", monospace;
  font-size: 1rem;
  background-color: #f5f5f5; /* Light background for readability */
  color: #000; /* Dark text color */
  /* resize: none; Disable resizing */
}

textarea:focus {
  outline: none;
  border-color: #5e2ae9; /* Highlight border color on focus */
}

.submit-btn {
  background-color: #5e2ae9; /* Match window button color */
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin-top: 10px; /* Spacing above the button */
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease-in-out;
}

.submit-btn:hover {
  background-color: #4d21c3; /* Darken on hover */
}

.send-btn {
  background-color: #5e2ae9; /* Match window button color */
  color: #ffffff; /* White text for contrast */
  border: none; /* No border */
  padding: 10px 20px; /* Padding for the button */
  margin-top: 10px; /* Space above the button */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  font-size: 1rem; /* Font size */
  transition: background-color 0.3s ease-in-out, transform 0.2s; /* Smooth transition */
  display: inline-block; /* Inline-block for proper spacing */
}

.send-btn:hover {
  background-color: #4d21c3; /* Darker background on hover */
  transform: scale(1.05); /* Slightly enlarge on hover */
}

.send-btn:focus {
  outline: none; /* Remove outline on focus */
  box-shadow: 0 0 0 2px rgba(94, 42, 233, 0.5); /* Add a subtle glow effect */
}