:root {
	--gold: #cc943a;
	--silver: #c8deec;
	--orange: #f98e39;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	-webkit-font-smoothing: antialiased;

	color: white;
}

html {
	background-color: #fff;
	background-image: url('/static/tgp logo.png');
	background-attachment: fixed;
	background-repeat: repeat;
	background-size: 10%;

	scroll-behavior: smooth;
}

header {
	border-bottom: 0.5vh solid black;
	height: 16vh;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #eeeeee;
	position: sticky;
	top: 0;
	z-index: 9999;

	background-image:
		linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
		url('/static/robot icon set.png');
	background-attachment: fixed;
	background-repeat: repeat;
	background-size: 50%;
}

.header-image {
	height: 100%;
}

.content {
	background: rgba(0, 0, 0, 0.5);
	width: 60vw;
	margin: auto;
	padding-left: 2vw;
	padding-right: 2vw;
}

.spacer {
	height: 8vh;
}

form {
	text-align: left;
	border: none;
}

input, textarea {
	margin-bottom: 2vh;
	border: none;
}

h1, p, form, li {
	padding: 2vh;
	margin: auto;
	margin-bottom: 2vh;
	display: block;
	border-radius: 1vh;
}

h1, h2 {
	text-align: center;
	padding: 2vh;
}

h1 {
    font-size: 6vh;
    text-shadow: var(--gold) 0.25vh 0.25vh 0.25vh;
}

h2 {
	color: white;
	font-size: 28px;
}

p {
	padding-bottom: 2vh;
}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown label, header a {
	font-size: 1.5vw;
	cursor: pointer;
	text-decoration: none;
}

.dropdown-content {
	display: none;
	position: absolute;
	z-index: 1;
	cursor: pointer;
}

.dropdown-content a {
	padding: 0.5vw;
	text-decoration: none;
	display: block;
	background-color: #030303;
	transition-duration: 0.25s;
	font-size: 1vw;
}

.dropdown-content a:hover {
	background-color: white;
	color: #030303;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.profile {
	display: grid;
	grid-template-columns: 1fr 3fr; /* 1 part for the first column, 3 parts for the second column */
	padding-top: 4vh;
	padding-bottom: 4vh;
}

.profile img {
	width: 12vw;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border: 0.25vh solid grey;
	border-radius: 3vh 0 3vh 0;
	object-position: center top;
}

span {
	color: orange;
}

p, label, input, textarea, li {
    font-family: 'Arial', 'Helvetica', sans-serif; /* Use Arial or Helvetica as primary fonts, and if they're not available, use the default sans-serif font of the system */
    font-size: 22px; /* A typical size for body text; adjust as needed */
    line-height: 1.5; /* Spacing between lines to improve readability */
    word-spacing: 0.5px; /* Spacing between words */
    letter-spacing: 0.5px; /* Spacing between characters; can improve legibility */
	width: 100%;
}

footer {
	background: none;
	margin-top: 20vh;
}

footer p, footer a {
	background: none;
	text-align: center;
	color: white;
	width: 100%;
	margin: 0;
}

.deck {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
	justify-content: center;
}

.half {
	width: 50%;
	margin: auto;
	display: block;
	padding-bottom: 2vh;
}

img {
	width: 100%;
	border: 0.5vh solid white;
	border-radius: 1vh;
}

.twin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
    align-items: center;
    justify-items: center;
}

.twin p, .twin img, .twin h1 {
	width: 100%;
}

.single {
	border-bottom: 0.25vh solid orange;
}

.single img {
	width: 50% !important;
	border: none !important;
	margin: auto;
	display: block;
}

.quint {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.center {
	text-align: center;
}

.card {
	border: 0.25vh solid grey;
	margin: 1vh;
	padding: 0.5vh;
	text-decoration: none;
	transition-duration: 0.25s;
}

.card:hover {
	border-color: white;
}

.card img {
	width: 100%;
	border-bottom: 0.25vh solid orange;
}

.card p {
	text-align: center;
	padding: 0;
}

input, textarea {
	color: black;
	width: 100%;
	padding: 1vh;
	border-radius: 0.25vw;
}

input[type=checkbox] {
	width: unset;
}

/* scrollbar customization */
/* For Webkit browsers like Chrome, Safari */
::-webkit-scrollbar {
    width: 10px;  /* Adjust width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: black;  /* Background color of the track */
}

::-webkit-scrollbar-thumb {
    background: white;  /* Color of the moving scrollbar element */
}

.button, input[type=submit] {
	color: white;
	border-radius: 0.5vh;
	padding: 1vh;
	text-decoration: none;
	transition-duration: 0.35s;
	font-size: 2.5vh;
	font-weight: bold;
	box-shadow: black 0.25vh 0.25vh 0.25vh;
	cursor: pointer;
	background: var(--gold);
}

.button:hover, input[type=submit]:hover {
	background: var(--gold);
	box-shadow: black 0.5vh 0.5vh 0.25vh;
	filter: contrast(125%);
}

@media (orientation: portrait) {
	.mobile {
		display: none;
	}
}

@media (orientation: portrait) {
	.desktop, .dropdown-content {
		display: none !important;
	}

	html {
		background-color: #ddd;
		background-image: url('/static/tgp logo.png');
		background-attachment: fixed;
		background-repeat: repeat;
		background-size: 20%;

		scroll-behavior: smooth;
	}

	.twin {
		display: block;
		text-align: center;
		margin-bottom: 4vh;
	}

	.content {
		width: 100vw;
	}

	header {
		flex-direction: column;
		height: unset;
		position: unset;
		padding-top: 1vh;
	}

	.header-image {
		height: 25vh;
	}

	.dropdown {
		height: 8vh;
	}

	.dropdown * {
		font-size: 5vw !important;
	}

	.section {
		padding-left: 2vw;
		padding-right: 2vw;
	}

	.deck, .quint {
		grid-template-columns: 1fr;
	}

	.profile {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.profile img {
		width: 50vw;
	}

	footer {
		margin: 0;
		margin-top: 20vh;
		margin-bottom: 20vh;
	}

	form {
		padding-left: 2vw;
		padding-right: 2vw;
	}

	h1, p, form {
		width: unset;
	}

	p, input, textarea, label {
		font-size: 18px;
	}
}