/* GetStarted - A simple responsive Startpage
 * Author: MrAlpha786 (github.con/MrAlpha786) */


@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

/* TODO: Create Custom Theme Template to be imported */
/* Colors and other var*/
:root {
  --bg: #fff;
  --fg: #111;
  --secondaryBg: #f1f1f1;
  --invert: 0;

  --scrollbar: #8888;
  --red: #cc241d;
  --green: #98971a;
  --yellow: #d79921;
  --blue: #458488;
  --purple: #aa00ff;
  --bluetwo: #00b2ff;
  --greeno: #00ff2e;
  --fontFamily: 'Roboto Mono', monospace;
}
body {
  background-image: url('01.jpg');
  background-size: cover;
}
.dark-mode {
  --bg: #111;
  --fg: #fff;
  --secondaryBg: #282828;
  --invert: 1;
}

body {
	background-color: var(--bg);
	margin: 0;

}

* {
	box-sizing: border-box;
	color: var(--fg);
	text-decoration: none;
	border: 0;
	outline-style: none;
    -webkit-tap-highlight-color: transparent;
	font-family: var(--fontFamily);
    -ms-overflow-style: none;
    scrollbar-width: thin;
    scrollbar-color: #00000000 #00000000;
}

::-webkit-scrollbar {
    width: 0.3em;
}

::-webkit-scrollbar-track {
    background: #00000000;
    margin-bottom: 0.75em;
}

::-webkit-scrollbar-thumb {
    background-color: #00000000;
    border-radius: 1em;
}

:hover,
.visible-scrollbar {
    scrollbar-color: var(--scrollbar) #00000000;
}

:hover::-webkit-scrollbar-thumb,
.visible-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar);
}

.container {
	width: 100%;
	height: 100vh;
	margin: auto;
    padding-top: 15vh;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
}

/* Greeting */
#username {
	padding: 0 0.5em;
	color: var(--bg);
	background-color: var(--fg);
	border-radius: 2em;
	cursor: pointer;
}

/* Searchbar */
#search {
	width: 90%;
	margin: 2em;
	background-color: var(--secondaryBg);
	display: flex;
	flex-direction: row;
	border-radius: 0.75em;
	align-items: center;
	justify-content: space-between;
}

#search-field {
	width: 100%;
	padding: 0.75em 0.5em 0.75em 1em;
	background-color: transparent;
	font-size: 1rem;
	text-align: left;
}

#search button {
	padding: 0.75em 0.5em;
	margin: 0 0.5em 0 0;
	background-color: transparent;
	cursor: pointer;

}

#search button img {
	width: 1.2em;
	height: 1.2em;
	filter: invert(0.7);
}

#search button:hover img {
	filter: invert(var(--invert));
}

button#clear-field {
	visibility: hidden;
}

button#clear-field img {
	width: 0.9em;
	height: 0.9em;
}

/* Link Table */
.table-container {
	width: 90%;
	margin: 0 5%;
	display: flex;
	flex-direction: column;
	align-items: space-between;
	justify-content: center;
}

.col-container {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
}

/* Tabs */
#tab-container {
	background-color: var(--secondaryBg);
	border-radius: 0.75em 0.75em 0 0;
}

.tab {
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
}

/* Tab Content */
#content-container {
    align-items: flex-start;
	background-color: var(--Bg);
	border-radius: 0 0 0.75em 0.75em;
}

.content {
	display: none;
    max-height: 35vh;
    padding-bottom: 0.75em;
	background-color: var(--secondaryBg);
	flex-direction: column;
	overflow: auto;
}

.content.active {
	width: 100%;
	display: flex;
}

.content > a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 0.5em;
    cursor: pointer;
}

/* Colors */
.tab.active[data-tab*="1"],
.content[data-tab*="1"] a:hover {
	background-color: var(--red);
}

.tab.active[data-tab*="2"],
.content[data-tab*="2"] a:hover {
	background-color: var(--green);
}

.tab.active[data-tab*="3"],
.content[data-tab*="3"] a:hover {
	background-color: var(--yellow);
}

.tab.active[data-tab*="4"],
.content[data-tab*="4"] a:hover {
	background-color: var(--blue);
}

.tab.active[data-tab*="5"],
.content[data-tab*="5"] a:hover {
	background-color: var(--purple);
}

.tab.active[data-tab*="6"],
.content[data-tab*="6"] a:hover {
	background-color: var(--bluetwo);
}

.tab.active[data-tab*="7"],
.content[data-tab*="7"] a:hover {
	background-color: var(--greeno);
}

/* Screens larger than a average phone */
@media screen and (min-width: 600px) {

	#tab-container {
		background-color: transparent;
	}

	.tab, .tab.active[data-tab^="tab"] {
		width: 24%;
		margin: 0 1%;
		padding:0.5em;
		font-size: 1.5em;
		background-color: var(--secondaryBg);
		border-radius: 0.75rem 0.75rem 0 0;
	}

	.tab[data-tab*="1"] {
		color: var(--red);
	}

	.tab[data-tab*="2"] {
		color: var(--green);
	}

	.tab[data-tab*="3"] {
		color: var(--yellow);
	}

	.tab[data-tab*="4"] {
		color: var(--blue);
	}

	.tab[data-tab*="5"] {
		color: var(--purple);
	}
	
		.tab[data-tab*="6"] {
		color: var(--bluetwo);
	}
	
		.tab[data-tab*="7"] {
		color: var(--greeno);
	}
	.content, .content.active {
		margin: 0 1%;
		width: 24%;
		display: flex;
		border-radius: 0 0 0.75rem 0.75rem;
	}

	.content > a {
		padding: 0.25em;
	}
}

/* Screens larger than a average tab */
@media screen and (min-width: 800px) {

	#search {
		width: 60%;
	}

	.table-container {
		width: 75%;
	}
}

/* DeskTop Screen */
@media screen and (min-width: 992px) {

	#search {
		width: 40%
	}

	.table-container {
		width: 60%;
	}
}