/* Basic reset */

html {
	scroll-behavior: smooth;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
	font-family: Raleway;
	line-height: 1.5;
	font-size: 1.2rem;
	font-smoothing: antialiased;

	/*
		font-family: Arial, sans-serif;
		font-size: 1.2rem;
		line-height: 1.6;
	*/
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	max-width: 800px;
	margin: auto;
}

ul {
	list-style: none;
}




/* Hero Image */
.hero-image {
    background-image: url('office.jpg'); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
    height: 50vh;
    position: relative;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-text {
	text-align: center;
	background: rgba(0, 0, 0, 0.5);
	padding: 20px;
	border-radius: 12px;
	font-weight: normal;

	& .title {
		font-size: 2rem;
	}

	& .subtitle {
		font-size: 1.2rem;
		font-sytle: italic;
	}

}

/* Navigation */

nav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-items: stretch;
	gap: 0 0;

	& a {
		display: inline-block;
		padding: 1rem;
		color: white;
		text-decoration: none;
    background: #333;
		text-align: center;
	}

	& a:hover {
    background: #575757;
	}

}




/* Main Content */

main {
    flex: 1;
    padding: 20px;
}

section {
	margin: 1.2rem 0;
	/* border: 3px solid #758C9F; */
	border: 1px solid rgba(117, 140, 159, 0.4);
	border-radius: 12px;
	padding: 0.4rem 1.2rem 1.2rem 1.2rem;

	& h1 {
		font-size: 1.9rem;
		font-weight: normal;
		margin-bottom: 0.8rem;
	}

}


/* 2 column layout */

.up2-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 20px;
	justify-content: center;

	& .up2 {
		margin: 0;
	}

	& .up2-image {
		display: grid;
		justify-items: center !important;
		align-items: start !important;

		& img {
			border: 2px solid black;
			box-shadow: 4px 4px 6px #aaa;
			border-radius: 10px;
			margin: 0.8rem auto;
		}

	}

	& p {
		margin-top: 1rem;
	}

}


/* Footer */

footer {
	display: flex;
	justify-content: center;
	align-items: center;
}



/* Top Button */
/* Scroll-To-Top Button */

#TopBtn {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	border: none;
	outline: none;
	background-color: #0c0c0d;
	background-color: rgb(0,0,0,0.3);
	color: white;
	cursor: pointer;
	padding: 15px;
	border-radius: 50%;
}

#TopBtn:hover {
	background-color: rgb(0,0,0,0.5);
}



@media (max-width: 600px) {

	/* Center and stack contained items */

	.up2-container {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0 0;
		justify-content: center;
	
		& .up2 {
			margin: 0;

			& p {
				margin-top: 1rem;
			}
		}
	}

	nav {
		grid-template-columns: 1fr;
	}

	footer {
		display: flex;
		justify-content: center;
		align-items: center;

		& p {
			text-align: center;
		}
	}

}



/* Custom */

/* Credentials */
.creds-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	& .creds {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 0.8rem;
		border: 1px solid lightgray;
		border-radius: 10px;
		padding: 0 0.8rem;

		& img {
			width: 40px;
			border: none;
			box-shadow: none;
			margin: 0.8rem auto 0 auto;
		}
		& p {
			margin: 0 10px 10px 10px;
			text-align: center;
		}
	}
}



/* Touch Ups */

.no-wrap {
	white-space: nowrap;
}