@charset "utf-8";

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

body {
  --ff: 'Roboto', sans-serif;
  --hue: 195;
  --primary-color: hsl(var(--hue), 91%, 25%);

  --thead: hsl(var(--hue), 72%, 13%);
  --border-table: hsl(var(--hue), 43%, 38%);
  --table-hover: hsl(var(--hue), 43%, 38%);
  --bg-odd: hsla(var(--hue), 64%, 6%, 0.5);
  --bg-even: hsl(var(--hue) 64%, 6%);
  --border-top-bot-even: hsl(var(--hue) 43%, 38%);

  --search-button: hsl(var(--hue), 91%, 25%);
  --search-input: hsl(var(--hue), 65%, 7%);
  --search-input-disabled: hsl(var(--hue), 65%, 15%);

  --remove-button: hsl(var(--hue), 91%, 66%);
  --remove-hover: hsl(var(--hue), 91%, 90%);
}

html, body {
  min-width: 100%;
  min-height: 100%;
}
html {
  font-size: 62.5%;
}
body {

  display: grid;
  font-size: 1.6rem;

  padding-block: 0.1rem;

  background-color: #000;
  color: #FFF;

  cursor: url('../assets/cursor.cur'), default;
}
body * {
  font-family: var(--ff);
}



.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  clip: rect(0,0,0,0);
  opacity: 0;
  visibility: hidden;
  margin: -1px;
  white-space: nowrap;
  overflow: hidden;
  border-width: 0;
}



/* MOBILE max 600px --->>>*/
#app {
  max-width: 60rem;
  background-color: transparent;
  margin-inline: auto;

  padding-inline: 1rem;
}



/* Header Mobile */
header {
  width: 100%;
  margin-top: 11.5rem;

  display: grid;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  margin-bottom: 3rem;
}

header .search {
  display: flex;
  gap: 0.5rem;
}

.search input {
  padding: 1.6rem;
  background-color: var(--search-input);
  border: none;
  border-radius: 0.5rem;

  font-size: 1.6rem;

  color: #FFF;
}
.search input:focus {
  outline: 0.3rem dashed var(--border-table);
}
.search input::placeholder {
  color: #7C7C8A;
}
.search button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;

  background-color: var(--search-button);
  border: none;
  border-radius: 0.5rem;

  height: 4.8rem;
  width: 17rem;

  text-transform: uppercase;
  color: #FFF;
  font-weight: 700;

  transition: all .2s;

  cursor: pointer;
}
.search button:hover {
  background-color: #FFF;
  color: var(--search-button);
}
.search button:hover svg path {
  fill: var(--search-button);
}
.search button:focus {
  background-color: #FFF;
  color: goldenrod;

  outline: 0.3rem solid goldenrod;
}
.search button:focus svg path {
  fill: goldenrod;
  stroke: goldenrod;
}
.search button:disabled {
  background-color: var(--search-input-disabled);
  cursor: not-allowed;
}
.search button:disabled:hover {
  color: white;
  background-color: gray;
}
.search button:disabled svg path {
  fill: white;
}



/* Table Mobile */
table {
  width: 100%;

  border-collapse: collapse;

  font-weight: 700;
  font-size: 2rem;;
  text-align: left;

  border: none;
}
table thead {
  background-color: var(--thead);
}
table thead tr th {
  padding: 0.6rem 1rem;
}
table tbody tr:nth-child(odd) {
  background-color: var(--bg-odd);
}
table tbody tr:nth-child(even) {
  background-color: var(--bg-even);
}
table tbody tr:hover {
  background-color: var(--table-hover);
}
table tbody tr td {
  padding: 0.4rem 0.4rem;
}

.repositories {
  text-align: center;
}
.followers {
  text-align: center;
}



/* Table Radius Mobile */
/* border radius table */
div.table {
  width: 100%;
  margin-top: 8.7rem;
  margin-bottom: 10rem;
  border: 1px solid var(--border-table);
  border-radius: 2rem;
}
table {
  border-collapse: collapse;
  border-radius: 2rem;
  overflow: hidden;
}
table thead tr th:first-child {
  border-top-left-radius: 2rem;
}
table thead tr th:last-child {
  border-top-right-radius: 2rem;
}
table tbody tr:nth-child(even) {
  border-top: 0.1rem solid var(--border-table);
  border-bottom: 0.03rem solid var(--border-table);
}



/* User Mobile */
.user {
  display: flex;
  align-items: center;
}
.user img {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;

  object-fit: cover;

  transition: all .2s;
}
.user img:hover {
  transform: scale(3.5) translateX(2rem);
  box-shadow: 0 0 1rem white, 0 0 2rem var(--remove-button);
  cursor: zoom-in;
}
.user a {
  margin-left: 1.6rem;
  color: #FFF;
  text-decoration: none ;
}
.user span {
  font-weight: 400;
}






/* REMOVE BUTTON Mobile */
.remove button {
  background: none;
  border: none;
  font-size: 2rem;
  font-weight: 700;
  color: var(--remove-button);

  cursor: pointer;

  transition: all .2s;
}
.remove button:hover {
  color: var(--remove-hover);
  transform: scale(1.1);
}






/* MOBILE NOT FAVORITES */
/* tbody tr td.no-favorites */
.no-favorites td {
  text-align: center;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
.no-favorites:hover {
  background-color: hsla(var(--hue), 64%, 6%, 0.5);;
}
.no-favorites td div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50rem;
  gap: 6rem;

  font-family: var(--ff);
}
.no-favorites td div h2 {
  font-size: 4rem;
  color: #4E5455;
}