@import url('https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i,900|Montserrat:900');
:root {
	--main-color: #333333;
	--accent-color: #10519a;
	--accent-hover-color: #1574d6;
	--text-color: #dddddd;
}

* {
    box-sizing: border-box;
}

body, html {
    color: rgba(229, 229, 229, 0.9);
	/*font: 100%/1.75 Morriweather, Georgia, serif;*/
	font-family: 'Roboto', sans-serif;
	background: var(--main-color);
	height: 100%;
	margin: 0;
}

p a {
	text-decoration: none;
	color: darkgray;
}

.clear {
	clear: both;
}

.parallax {
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	/*background-position: center;*/
	/*background-repeat: no-repeat;*/
	background-size: cover;
}

.parallaxImg2 {
	background-image: url("imgs/background-blur.png");
}

.parallaxImg1 {
	background-image: url("imgs/projectsBackground.png");
}

.main {
	width: 80%;
	margin: auto;
	background: #000000c9;
	padding: 10px;
}

.subSection {
	width: 70%;
	margin: auto;
	padding: 15px;
	height: 200px;
}

.footer {
	width: 60%;
	margin: auto;
}

.profilePicture {
	border-radius: 50%;
	width: 256px;
	height: 256px;
	float: left;
	padding: 10px;
}

#iconColor {
	fill: white;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
	background-color: Transparent;
	background-repeat:no-repeat;
	color: rgba(229, 229, 229, 0.9);
	cursor: pointer;
	padding: 10px;
	width: 100%;
	border: none;
	text-align: center;
	outline: none;
}

.collapsible:hover {
	background-color: rgba(191, 191, 191, 0.7);
}

/* Style the collapsible content. Note: hidden by default */
.content {
	padding: 0 18px;
	/*display: none;*/
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}

/* Personal Projects Section */
.projectsSection h2 {
	text-align: center;
}

/* Float four columns side by side */
.column {
	width: 25%;
	margin: 0 5px;
	background-color: #444;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	padding: 16px;
	text-align: center;
	color: white;
	border-radius: 15px;
}

.column:hover {
	color: black;
	background-color: #6b6b6b;
}

.column a {
	text-decoration: none;
}

.row {
	margin: 0 -5px;
	display: flex;
	align-items: stretch;
	padding-top: 10px;
	padding-bottom: 10px;
}

.center {
	margin: 0 -5px;
	display: flex;
	align-items: stretch;
	justify-content: center;
}

/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
	margin-bottom: 10px;
}

/* Responsive columns */
@media screen and (max-width: 1200px) {
	.main {
		width: 80%;
	}
    .subSection {
		width: 80%;
        height: 300px;
	}
}

@media screen and (max-width: 900px) {
	.column {
		width: 80%;
		margin: auto;
		margin-bottom: 10px;
	}

	.row {
		display: block;
	}
}

@media screen and (max-width: 550px) {
	.main {
		width: 95%;
	}

	.column {
		width: 95%;
	}

	.profilePicture {
		float: auto;
		width: 100%;
		height: 100%;
	}

	.parallaxImg1 {
		background-image: none;
		background: darkgray;
	}

	.parallaxImg2 {
		background-image: none;
		background: darkgray;
	}

	.subSection {
		display: none;
	}

	.hideOnMobile {
		display: none;
	}

	.onlyMobile {
		display: flex;
	}

	.column:hover {
		color: inherit;
		background-color: #444;
	}

	.collapsible:hover {
		background-color: inherit;
	}
}

/* End Person Projects Section */

/* Buttons and such */

.btn {
	background-color: var(--accent-color);
	color: white;
	width: 40%;
	height: 45px;
	cursor: pointer;
	margin: auto;
	border-radius: 5px;

	border: none;
	transition: background-color 0.3s ease, transform 0.2s ease;

	&:hover {
		background-color: #1574d6;
		transform: scale(1.05); /* Slight zoom on hover */
	}
}


/* Skills Section */

.skillsSection {
	width: 80%;
	margin: auto;
	padding-bottom: 25px;
}

.skillsSection h2 {
	text-align: center;
}

/* Container for skill bars */
.skillBar {
	width: 100%; /* Full width */
	background-color: #ddd; /* Grey background */
}

.skills {
	text-align: right; /* Right-align text */
	padding-top: 5px; /* Add top padding */
	padding-bottom: 5px; /* Add bottom padding */
	color: white; /* White text color */
}

.text-center {
	text-align: center;
}

.java {width: 98%; background-color: var(--accent-color); padding-right: 25px;}
.html {width: 95%; background-color: var(--accent-color); padding-right: 25px;}
.cSharp {width: 80%; background-color: var(--accent-color); padding-right: 25px;}
.c {width: 80%; background-color: var(--accent-color); padding-right: 25px;}
.css {width: 90%; background-color: var(--accent-color); padding-right: 25px;}
.sql {width: 65%; background-color: var(--accent-color); padding-right: 25px;}
.dart {width: 85%; background-color: var(--accent-color); padding-right: 25px;}
.javaScript {width: 80%; background-color: var(--accent-color); padding-right: 25px;}
.aws {width: 70%; background-color: var(--accent-color); padding-right: 25px;}
.php {width: 80%; background-color: var(--accent-color); padding-right: 25px;}



.grid-container-new {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
	padding: 20px;
}

.card-new {
	background-color: var(--main-color); /* Charcoal Black for dark theme */
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	padding: 20px;
	color: white;
	transition: transform 0.3s ease, box-shadow 0.3s ease;

	/* Flexbox layout for the card */
	display: flex;
	flex-direction: column; /* Stack elements vertically */
	justify-content: space-between; /* Space out the content and buttons */

	/* Make the card take up full height */
	height: 100%;

	&:hover {
		transform: translateY(-5px);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
	}

	.card-title-new {
		font-size: 1.5rem;
		margin-bottom: 10px;
	}

	.card-subtitle-new {
		font-size: 1.2rem;
		margin-bottom: 15px;
		font-style: italic;
	}

	.card-description-new {
		font-size: 1rem;
		line-height: 1.5;
		margin-bottom: 20px;
		color: var(--text-color);
	}

	.card-buttons-new {
		display: flex;
		gap: 10px;

		.card-btn-new {
			padding: 10px 15px;
			border: none;
			cursor: pointer;
			font-weight: bold;
			transition: background-color 0.3s ease, transform 0.2s ease;

			border-radius: 5px;

			&:hover {
				background-color: #1574d6;
				transform: scale(1.05); /* Slight zoom on hover */
			}

			&.primary-new {
				background-color: var(--accent-color);
				color: var(--text-color);

				&:hover {
					background-color: var(--accent-hover-color);
				}
			}

			&.secondary-new {
				background-color: #444;
				color: var(--text-color);

				&:hover {
					background-color: #555;
				}
			}
		}
	}

	/* Special case: only one button in the container */
	&:has(.card-btn-new:only-child) {
		.card-btn-new {
			flex: 1; /* Makes the button take up full width if it's the only button */
		}
	}
}

.collapsible-cards {
	/* Card styles */
	.card-new {
		margin-bottom: 20px;
		transition: opacity 0.3s ease; /* Transition for opacity */
		opacity: 1; /* Default visible */
	}

	/* Initially hide all additional cards */
	.hidden {
		display: none; /* Hide the card */
		opacity: 0; /* Invisible */
	}
}

.cards-container {
	display: flex;
	flex-direction: column;
	align-items: center;

	/* Styling for the Show More/Less button */
	.toggle-btn {
		background-color: #10519a;
		color: white;
		border: none;
		padding: 12px 24px;
		cursor: pointer;
		border-radius: 5px;
		font-size: 1rem;
		text-align: center;
		margin-top: 20px;
		transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
		display: inline-block; /* Use inline-block to take only necessary space */
		margin-left: auto; /* Center the button if in a flex container */
		margin-right: auto; /* Center the button if in a flex container */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

		&:hover {
			background-color: #1574d6;
			transform: translateY(-2px);
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
		}
	}
}


.progress-section {
	margin: 40px 40px;
}

.progress-bar {
	display: flex;
	align-items: center;
	margin-bottom: 40px;
}

.skill-label {
	width: 100px;
	font-weight: bold;
	margin-right: 10px;
}

.progress {
	height: 40px;
	background: var(--accent-color);
	width: 0;
	border-radius: 15px;
	transition: width 2s ease;
}

.bar-container {
	flex-grow: 1;
	margin-right: 10px;
	overflow: hidden;
	background: #e0e0e0;
	border-radius: 15px;
}


.skill-percentage {
	width: 50px;
	text-align: right;
	font-weight: bold;
}

/* Footer Styles */
.mediaBar {
	padding-top: 20px;
	padding-bottom: 10px;
	display: flex;
	list-style: none;
	justify-content: center;
	margin: auto;
}

.footer_mediaIcon {
	color: var(--text-color);
	padding: 10px;
	cursor: pointer;
	transition: transform .2s;
}

.footer_mediaIcon:hover {
	color: var(--accent-color);
	transform: scale(1.5);
}

.bottom-footer {
	padding-bottom: 20px;
}