/* You can add global styles to this file, and also import other style files */
@import url("https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap");
@import url("/assets/font/--guides.css");

button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: inherit;
}

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Gabarito, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
}

* {
  box-sizing: border-box;
  text-decoration: none;
}

#root {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

html[theme="light"] {
  color: #1a1a21;
  background-color: #ffffff;
}

html[theme="dark"] {
  color: #ffffff;
  background-color: #1a1a21;
}

*[smooth="opacity"] {
  transition: opacity 0.256s linear !important;
}

.--smooth {
  transition: width 0.256s linear !important;
}

.--max-one-line {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  background-color: green;
}

.--monospace::-webkit-input-placeholder {
  font-family: monospace;
}

::-webkit-input-placeholder {
  color: #ababb3;
}

*[theme="dark"] ::-webkit-input-placeholder {
  color: #32323d;
}

[placeholder]:empty:before {
  content: attr(placeholder);
  color: #ababb3;
}

[theme="dark"] [placeholder]:empty:before {
  color: #32323d;
}

button:focus {
  outline: 3px solid #d9e4f8;
}
*[theme="dark"] button:focus {
  outline: 3px solid #222d46;
}

hr {
  opacity: 0.25;
}

hr:focus,
hr:active {
  opacity: 0.5;
}

.editor a[href] {
  color: #4378db !important;
  text-decoration: underline !important;
  font-weight: bold !important;
}

.markdown p {
  margin: 0;
}

.markdown a {
  color: #4378db !important;
  text-decoration: underline !important;
}