/* H1 */
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap");

/* description */
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Delius&display=swap");

:root {
  --main-color: #202124;
  --text-color: #bdc1c6;
  --white-color: white;
  --anchor-text-color: #8ab4f8;
  --border-bottom: #3ea6ff;
  --border: #3c4043;
  --border-color: #3c4043;
  --background-button: #424246ad;
  --background-li-active: #2c2e35;
  --background: #121213ad;
  --transparent-black-container: #00000030;
  --background-menu: #161617;
  --background-menu-hover: rgba(0, 0, 0, 0.17);
  --main-color-dark: var(--text-color);
  --border-black: rgba(73, 72, 94, 0.12);
  --light-border: rgba(73, 72, 94, 0.12);
  --main-background: #202124;
}

/** Inicio **/

body {
  min-height: 100vh;
  background: var(--main-color);
  color: var(--text-color);
}

.content {
  display: grid;
  align-content: space-between;
  height: 100vh;
}

a,
.native-table-footer,
.native-table-head {
  font-family:
    Google Sans,
    arial,
    sans-serif;
  font-weight: normal;
}

header {
  display: grid;
  align-items: center;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  margin-top: 10px;
}

.head-bg {
  display: none;
}

.brand-container {
  width: auto;
  color: none;
  text-shadow: none;
  background-repeat: no-repeat;

  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
}

.brand-container::before {
  content: "";
  background: url("https://multipaste.tk/gnome-edit-paste.svg");
  background-size: auto;
  background-size: 100% 100%;
  width: 100px;
  height: 100%;
}

nav {
  display: grid;
  width: fit-content;
  justify-content: end;
  grid-row: 1;
  grid-column: 2;

  background: none !important;
  border: none;
  box-shadow: none;
}

nav ul {
  grid-template-columns: repeat(5, 70px);
  padding: 0px !important;
}

nav li {
  border-left: none;
  border-right: none;
  padding: 0px;
}

.brand-container h1 {
  grid-column: 2;
}

.brand-container .description {
  display: none;
}

nav:empty {
  display: none;
}

.paste-list {
  border: 1px solid var(--border);
}

.paste-list li {
  border-top: 1px solid var(--border-black);
}

nav li a {
  display: grid;
  place-content: center;
}

footer {
  color: var(--white-color);
  padding: 0px 0px 10px 0px;
}

footer a {
  color: var(--anchor-text-color);
}

/**  Nuevo  **/

input:not([type="radio"]),
textarea,
select {
  background-color: var(--background);
  color: var(--white-color);
  border: none;
}

.tab_container {
  background-color: var(--transparent-black-container);
  border: 1px solid var(--border);
}

.tabs li.active,
.tabs li.active > div {
  background: var(--background-li-active);
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border-bottom);
}

.tabs {
  border-left: none;
  border-bottom: none;
}

.tabs li {
  border: 1px solid var(--border);
}

.tabs li div {
  border: none;
}

.tab_content textarea {
  width: 100%;
  border-radius: 10px;
}

.tab_container button,
.input-area button {
  justify-self: center;
  background: var(--background-button);
}

button:hover,
.btn:hover {
  background: var(--background);
  color: var(--white-color);
}

nav,
button,
.btn {
  background: var(--background-button);
}

fieldset {
  border: none;
  background: var(--background);
}

form,
.grey-box {
  border: 1px solid var(--border);
  background-color: var(--transparent-black-container);
}

.show_container,
.bottom-badge,
.admin-nav {
  border: 1px solid var(--border);
}

/* Paste */

table.highlight > tbody > tr:hover {
  background: var(--transparent-black-container);
}

.native-table-menu {
  background: var(--background-menu) !important;
  border-radius: 5px;
}

.native-table-menu .menu-option:hover {
  background: var(--background-menu-hover) !important;
}

#table {
  border: 1px solid var(--border);
}

.paginate_button {
  border: none;
}

/* Login */
.content-wrapper:has(form .login-box) {
  display: grid;
  place-content: center;
}

@media only screen and (max-width: 768px) {
  header {
    grid-template-columns: 1fr;
    grid-gap: 10px;
  }

  nav {
    grid-row: 2/3;
    grid-column: 1/2;
  }
}