@import url("open-iconic/font/css/open-iconic-bootstrap.min.css");

:root {
	--dark-color: rgb(15, 16, 17);
	--almost-dark-color: rgb(22, 24, 26);
	--light-dark-color: rgb(30, 32, 33);
	--font-color: rgb(209, 205, 199);
	--intense-font-color: white;
	--light-font-color: rgb(187, 187, 187);
}

html,
body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: var(--dark-color);
	color: var(--font-color);
}

a,
.btn-link {
	color: #0366d6;
}

H1 {
	display: block;
}
H6 {
	font-weight: 400;
}
.btn-primary {
	color: var(--font-color);
	background-color: #1b6ec2;
	border-color: #1861ac;
}
body::-webkit-scrollbar {
	background-color: var(--dark-color);
}
body::-webkit-scrollbar-button {
	display: none;
}
body::-webkit-scrollbar-corner {
	display: none;
}

body::-webkit-scrollbar-thumb {
	background-color: var(--light-dark-color);
}

app {
	position: relative;
	display: flex;
	flex-direction: column;
}

hr.solid {
	border-top: 1px solid;
}

.games {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 3%;
}

.games.shadow {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
	max-width: 80%;
	margin: auto;
	padding: 2%;
	background-color: var(--dark-color);
	min-width: 700px;
}

.game {
	text-align: justify;
	text-justify: auto;
	vertical-align: top;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
	flex-basis: 30%;
	min-width: 700px;
	max-width: 1500px;
	/* height: auto; */
	padding: 2%;
	margin: 20px auto;
	background-color: var(--dark-color);
}

.game.cv{
	min-width: 700px;
	max-width: 50%;
}

.game.hover:hover {
	background-color: var(--almost-dark-color);
}
.tagwrapper {
	display: block;
	max-height: 40px;
}
.tag {
	vertical-align: middle;
	display: inline-block;
	font-size: small;
	text-align: center;
	border: 1px solid #888;
	font-weight: 650;
	border-radius: 4px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 10px 0 rgba(0, 0, 0, 0.1);
	padding: 2px;
	margin: 3px;
	white-space: nowrap;
}

.tag.design {
	background-color: #1d656d;
}

.tag.progra {
	background-color: #131aa7;
}
.tag.level {
	background-color: #4d800f;
}
.tag.animation {
	background-color: #7e0359;
}
.tag.shaders {
	background-color: #4a0053;
}
.tag.vfx {
	background-color: #8d1d13;
}
.tag.every {
	background-color: black;
}
.tag.music {
	background-color: #925b27;
}
.tag.audio {
	background-color: #928926;
}
.tag.modelling {
	background-color: #5e2645;
}
.about {
	text-align: justify;
	text-justify: auto;
	margin: auto;
	padding: 2% 5%;
	flex-basis: 60%;
	flex-shrink: 1;
	flex-grow: 1;
}
.img {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}
.img.left {
	flex-basis: 15%;
	flex-shrink: 0;
	flex-grow: 0;
	/* display: block; */
	max-width: 33%;
	max-height: 400px;
	height: auto;
	margin: auto;

	object-fit: fill;
}
.img.title {
	display: block;
	/* margin: auto; */
	margin-left: auto;
	margin-right: auto;
	/* width: 100%; */
	max-width: 100%;

	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

.img-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 3%;
	/* margin-left: auto;
	margin-right: auto; */
	width: 100%;
	/* max-width: 1000px; */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}

.googleplay {
	visibility: hidden;
	max-width: 100px !important;
	width: 5%;
	/* height: auto; */
}
/* vertical */
.video2 {
	object-fit: scale-down;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* max-height: 600px; */
	border: 0;
}
.video2-wrapper {
	position: relative;
	overflow: hidden;
	/* padding-top: 56.25%; */
	padding-top: 80%;
	margin: 2%;
}
/* horizontal */
.video-wrapper {
	position: relative;
	overflow: hidden;
	padding-top: 56.25%;
	margin: 2%;
}
.video {
	object-fit: scale-down;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.text-body {
	text-align: justify;
	text-justify: auto;
	padding-left: 7%;
	padding-right: 7%;
	color: var(--font-color) !important;
}
.title-project {
	margin-top: auto;
	line-height: 0.5rem;
	padding-left: 7%;
	padding-right: 7%;
	font-size: 2.4rem;
	font-weight: 650;
}

.index-title {
	margin: auto;
	text-align: center;
}

.inline {
	display: inline;
}
.top-row {
	height: 3.5rem;
	display: flex;
	align-items: center;
}

.main {
	flex: 1;
	background-color: var(--almost-dark-color);
}

.main .top-row {
	/* background-color: var(--almost-dark-color); */
	border-bottom: 1px solid #d6d5d5;
	justify-content: flex-end;
}

.main .top-row > a,
.main .top-row .btn-link {
	white-space: nowrap;
	margin-left: 1.5rem;
}

.main .top-row a:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar {
	display: flex;
	flex-direction: row;
	background-color: var(--dark-color);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
	margin: auto 0%;
	z-index: 999;
	height: 80px;
}

.sidebar .top-row {
	visibility: hidden;
	display: flex;
	flex-direction: row;
}

.sidebar .navbar-brand {
	font-size: 1.1rem;
	display: flex;
	flex-direction: row;
}
.nav {
	margin-left: auto;
	flex-direction: row;
}

.sidebar .oi {
	width: 2rem;
	font-size: 1.1rem;
	vertical-align: middle;
	/* top: -2px; */
}

.sidebar .nav-item {
	flex-basis: auto;
	/* flex-grow: 100%; */
	font-size: 1.2rem;
	padding: 0.5rem;
}
/* .sidebar .nav-item:first-child {
} */

.sidebar .nav-item a {
	color: var(--font-color);
	border-radius: 4px;
	height: 4rem;
	display: flex;
	align-items: center;
	line-height: 3rem;
	vertical-align: middle;
}

.sidebar .nav-item a:hover {
	color: var(--intense-font-color);
}
.sidebar .nav-item a:visited {
	color: var(--light-font-color);
}
.sidebar .nav-item a:visited:hover {
	color: var(--intense-font-color);
}
.sidebar .nav-item a.active {
	color: var(--intense-font-color);
}

.content {
	height: 100%;
	padding-top: 1.1rem;
}

.navbar-toggler {
	background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type="checkbox"]) {
	outline: 1px solid #26b050;
}

.invalid {
	outline: 1px solid red;
}

.validation-message {
	color: red;
}

#blazor-error-ui {
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

#blazor-error-ui .dismiss {
	cursor: pointer;
	position: absolute;
	right: 0.75rem;
	top: 0.5rem;
}

.sidebar .collapse {
	/* Never collapse the sidebar for wide screens */
	display: block;
}
.sidebar {
	position: sticky;
	top: 0;
}
@media (max-width: 800px) {
	.game {
		min-width: 100%;
		width: 100%;
	}
	.game.cv{
		min-width: 100%;
		max-width: 100%;
	}

	.games.shadow {
		min-width: 100%;
		width: 100%;
	}

	.main .top-row.auth {
		justify-content: space-between;
	}

	.main .top-row a,
	.main .top-row .btn-link {
		margin-left: 0;
	}
	.nav-item {
		max-width: 130px;
	}
}
@media (max-width: 700px) {
	.games.shadow {
		flex-direction: column;
	}
}
@media (max-width: 355px) {
	.nav-item {
		max-width: 100px;
	}
}

@media (min-width: 768px) {
	app {
		flex-direction: column;
	}

	.main .top-row {
		position: sticky;
		top: 0;
	}
	.main > div {
		padding-left: 2rem !important;
		padding-right: 1.5rem !important;
	}

	.navbar-toggler {
		display: none;
	}
}