/* 
  START: General HTML CSS
*/

:root {
  /* --background: hsl(0, 0%, 8%); */
  --background: hsl(0, 0%, 2%);
  --foreground: hsl(0, 0%, 92%);
  --comment: hsl(0, 0%, 44%);
  --link: hsl(0, 0%, 66%);
  /* --border: hsl(0, 0%, 20%); */
  --border: hsl(0, 0%, 13%);
  --accent: hsl(355, 100%, 80%);

  --tui-wrapper-rounding: .5em;
  --tui-container-rounding: .5em;
  --tui-element-rounding: .5em;

  --font-size: clamp(1rem, .96rem + .22vw, 1.25rem);
}

*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: JetBrainsMono;
  src: url(/assets/fonts/JetBrainsMono.ttf) format('truetype');
}

html {
  font-size: clamp(14px, .4dvw, 20px);
  height: 100dvh;
}

body {
  background-color: var(--background);
  color: var(--foreground);

  font-family: "JetBrainsMono", monospace;
  font-size: var(--font-size);

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 100dvh;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 
  END: General HTML CSS
*/

/* 
  START: TUI Wrapper
*/

.tui-wrapper {
  border: .2rem solid var(--accent);
  border-radius: var(--tui-wrapper-rounding);
  
  position: relative;
  display: flex;
  flex-direction: column;
  
  gap: 2rem;
  padding: 1rem 2rem 2rem 2rem;
  
  overflow: auto;
  
  width: clamp(10dvw, calc(100dvw - 2rem), min(750px, 90dvw));
  max-height: 90dvh;
}

.tui-wrapper-title {
  background-color: var(--background);
  color: var(--accent);

  font-size: 2rem;
  font-weight: bold;
  
  padding: 0 .125rem;
  margin: auto;
}

/* 
  END: TUI Wrapper
*/

/* 
  START: TUI Container
*/

.tui-container {
  border: .15rem solid var(--border);
  border-radius: var(--tui-container-rounding);

  position: relative;
  display: flex;
  flex-direction: column;
  
  gap: 1.25rem;
  padding: 1.5rem;
  
  width: 100%;
  
  transition: all .2s linear;
}

.tui-container-title {
  background-color: var(--background);
  color: var(--border);

  font-size: 1.5rem;
  font-weight: bold;

  position: absolute;

  padding: 0 .125em;
  top: -.75em;

  transition: all .2s linear;
}

.tui-container:hover {
  border: .15rem solid var(--accent);
}

.tui-container:hover .tui-container-title {
  color: var(--accent);
}

.tui-container:hover .tui-list li a {
  color: var(--accent);
}

/* 
  END: TUI Container
*/

/* 
  START: TUI List
*/

.tui-list {
  display: flex;
  flex-direction: column;
  
  gap: .5rem;
 
  width: 100%;
  
  list-style: none;
}

.tui-list li {
  display: flex;
  flex-direction: column;
  
  gap: .5rem;

  text-align: center;
}

.tui-list li a {
  color: var(--border);
  border: .15em solid var(--border);
  border-radius: var(--tui-element-rounding);

  font-weight: 600;
  
  display: flex;
  justify-content: center;
  
  padding: .5rem;
  
  text-decoration: none;
  transition: all .2s linear;
}

.tui-list li a:hover {
  background-color: var(--accent);
  color: var(--background) !important;
  border: .15em solid var(--accent);
}

/* 
  END: TUI List
*/

/* 
  START: TUI General
*/

.tui-header {
  font-size: 1.75rem;
}

.tui-text {
  background-color: transparent;
  color: var(--foreground);

  font-size: 1rem;
}

.tui-comment {
  background-color: transparent;
  color: var(--comment);

  font-size: .75rem;
}

.tui-link {
  color: var(--link);

  text-decoration: none;
  
  transition: all .2s linear;
}

.tui-link:hover {
  color: var(--accent);
}

/* 
  END: TUI General
*/