/*FONTS*/
@font-face {
	font-family: "NerdFont";
	src: url("fonts/JetBrainsMonoNerdFont-Medium.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "NerdFont";
	src: url("fonts/JetBrainsMonoNerdFont-Bold.ttf") format("truetype");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "NerdFont";
	src: url("fonts/JetBrainsMonoNerdFont-Italic.ttf") format("truetype");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: "NerdFont";
	src: url("fonts/JetBrainsMonoNerdFont-BoldItalic.ttf") format("truetype");
	font-weight: bold;
	font-style: italic;
}

/* Smartphone styles */
@media screen and (max-width: 768px) {

	#terminal-container {
		border-bottom: 8px solid #434C5E;
		border-radius: 8px;
		padding-top: 20px;
		overflow: hidden;
		width: 90%;
		position: absolute;
		left: 50%; 
    	transform: translateX(-50%); 
	}

	body {
		padding-left: 0px;
		padding-right: 0px;
		font-family: 'NerdFont', monospace;
		font-weight: bold;
		font-style: normal;
		background-repeat: no-repeat;
		background-size: contain;	
		background-image: url('./background.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: fixed; 
		overflow-x: hidden;
		margin: 0; 
		height: 100vh; 
	}

	.about-container {
		display: flex;
		flex-direction: column;
		background-color: #4C566A;
		border-radius: 8px;
		overflow: hidden;
		width: fit-content; 
		box-sizing: border-box; 
	}

	.content-container {
		background-color: #2E3440; 
		width: 100vw;
		padding: 5px;
		border-radius: 2px;
		opacity: 0.8;
		margin-top: -19px;
		background-size: cover;
	}
}
  
/* Monitor/Laptop/Desktop styles*/
@media screen and (min-width: 769px) {

	#terminal-container {
		border-bottom: 8px solid #434C5E;
		border-radius: 8px;
		overflow: hidden;
		width: 40%;
		position: absolute;
		top: 400px; /* Adjust this value to move it up or down */
		left: 800px; /* Adjust this value to move it left or right */
	}

	body {
		padding-left: 0px;
		padding-right: 0px;
		font-family: 'NerdFont', monospace;
		font-weight: bold;
		font-style: normal;
		background-repeat: no-repeat;
		background-size: contain;
		overflow: hidden;
		background-image: url('./background.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: fixed; 
		margin: 0; 
		height: 100vh; 
	}

	.about-container {
		display: flex;
		flex-direction: column;
		background-color: #4C566A;
		border-radius: 8px;
		overflow: hidden;
		width: 40%; /* Set the desired width */
		box-sizing: border-box; /* Include padding in the width calculation */
	}

	.content-container {
		background-color: #2E3440; 
		padding: 5px;
		border-radius: 2px;
		opacity: 0.8;
		margin-top: -19px
	}
}

/*ELEMS*/

button {
	padding: 10px 20px;
	font-size: 20px;
	border: none;
	cursor: pointer;
	margin: 10px 10px 10px 10px;
	border-radius: 5px;
	font-family: 'NerdFont', monospace;
	font-weight: bold;
	font-style: normal;
	transition: transform 0.1s ease-in-out;
}

.source-code {
	position: fixed;
	top: 0.5%;
	left: 0.5%;
	width: 99%;
	z-index: 9999;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-end;
	font-family: 'NerdFont', monospace;
	font-weight: bold;
	font-style: normal;
}

p {
	font-size: 20px;
	padding-left: 16px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	border-radius: 5px;
	font-family: 'NerdFont', monospace;

}
  
.about-header {
background-color: #3B4252;
color: #81A1C1;
margin: 0; /* Remove default margin */
padding-left: 16px;
}

.about {
	width: fit-content;
	margin: 0; /* Remove default margin */
}

.banner {
	color: #81A1C1;
	margin-left: -18px;
	margin-right: -18px;
	margin-top: -8px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}

.end-body {
	background-color: #2E3440; 
}

.git-button {
	background-color: #5E81AC;
	color: #2E3440;
	border-bottom: 8px solid #4a6a92;
}

.project-button {
	background-color: #B48EAD;
	color: #2E3440;
	border-bottom: 8px solid #966d8e;
}

.simple-site-button {
	background-color: #A3BE8C;
	color: #2E3440;
	border-bottom: 8px solid #789460;
}

.cv-button {
	background-color: #D08770;
	color: #2E3440;
	border-bottom: 8px solid #ad6650;
}

.linkdin-button {
	background-color: #81A1C1;
	color: #2E3440;
	border-bottom: 8px solid #627f9c;
}

.source-button {
	background-color: #BF616A;
	color: #2E3440;
	border-bottom: 8px solid #c4525d;
}

button:hover {
	background-color: #88C0D0;
	border-bottom: 8px solid #88C0D0;
}

p {
	color: #D8DEE9;
	background-color: #4C566A;
	border-bottom: 8px solid #434C5E;
}

.about-header {
	background-color: #3B4252;
	color: #81A1C1;
}

.title-bar {
	background-color: #2151c2;
	color: #c9d5e0;
}

.banner {
	background-color: #4C566A;
	border-bottom: 8px solid #434C5E;
	padding-top: 10px;
}


#terminal-container .xterm-viewport {
    border-radius: 8px; 
	padding-left: 10px; 
    padding-right: 10px;
	padding-top: 30px; 
	width: 100%;
	margin: 0;

}

#terminal-container .xterm-viewport::-webkit-scrollbar {
    display: none; /* Hide scrollbar for WebKit browsers (Chrome, Safari, Opera) */
}

#terminal-container .xterm-viewport > :first-child {
    padding-top: 30px; /* Add top padding to the first child (terminal content) */
}

#terminal-container .term-header {
    padding-left: 16px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	border-radius: 5px 5px 0px 0px;
	margin-bottom: 0px;
    font-family: 'NerdFont', monospace;
    background-color: #3B4252;
    color: #81A1C1; 
}