@import '/cgit.css';
@import '/gruvbox_theme.css';

:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

div#header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1em;

	padding-bottom: 1em;
}

div#header div.logo a img {
  background-color: var(--bg2);
  border: solid 1px var(--fg);
  border-radius: 10px;
}

div#header div.logo a img:hover {
  background-color: var(--bg4);
}

div#header .header-text { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
}

h1.main {
  font-size: 4em;
}

h1.main, p.sub { 
  margin: 0;
}

div#cgit a {
  color: var(--blue);
  text-decoration: none;
}

div#cgit a:hover {
  text-decoration: underline !important;
}

div#cgit table.tabs {
	width: 100%;
	border-collapse: collapse;
}

div#cgit table.tabs tr {
	display: flex;
	justify-content: space-between;
	padding: 0 2em;
}

div#cgit table.tabs tr td {
	border: solid 1px var(--fg);
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	background-color: var(--bg2);
	overflow: hidden;
	padding: 0;

	display: flex;
}

div#cgit table.tabs tr td a {
	color: var(--fg);
	background-color: var(--bg2);
	text-decoration: none !important;
	padding:0.33em 1em;
}

div#cgit table.tabs tr td a:hover {
	background-color: var(--bg_s);
}

div#cgit table.tabs tr td a.active {
	color: var(--bg);
	background-color: var(--fg);
}

div#cgit table.tabs td.form input, div#cgit table.tabs td.form select {
  font-size: 100%;
}

div#cgit table.tabs tr td.form form {
	display: flex;
	height: 100%;
}

div#cgit table.tabs tr td.form input[type="search"]{
	background-color: var(--bg_h);
	color: var(--fg);

	width: 20vw;
	height: 100%;
}

div#cgit table.tabs tr td.form input[type="submit"]{
	color: var(--bg);
	background-color: var(--fg);
	height: 100%
}

div#cgit div.content {
	border-top: solid 1px var(--fg);
	border-bottom: solid 1px var(--fg);

	border-radius: 1px;
}

div#cgit table.list.nowrap {
	width: 100%;
  padding: 0.66em 2em;
}

div#cgit div.footer {
	display:flex;
	justify-content:center;
	padding: 1em 0;
}


@media (max-width: 1250px) {
	h1.main {
		font-size: 2em;
	}

  div#cgit table.tabs {
    display: flex;
    justify-content: center;
  }

  div#cgit table.tabs tr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 2em;
  }

  div#cgit table.tabs tr td.form {
    display: block;
    border-radius: 0;
    height: 100%;
  }

  div#cgit table.tabs tr td.form form.right {
    padding-bottom: 0;
  }

  div#cgit table.tabs tr td.form input[type="search"]{
    width: auto;
    flex-grow: 2;
  }
}