body {
				font-family: Arial, sans-serif;
				margin: 0;
				padding: 0;
				background-color: #f9f9f9;
			}

			header {
				background-color: #1c1c1c;
				color: white;
				padding: 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		  
			.logo img {
				width: 100px;
				height: 100px;
				border-radius: 5px;
				margin-right: 5px;
				background-color: #1c1c1c;
			}

			header a {
				color: white;
				text-decoration: none;
				margin-left: 15px;
				font-weight: bold;
			}
		  
			nav a {
				margin: 0 10px;
				padding: 5px 10px;
			}
			
		/* Δίνει κίνηση στο menu καθώς ο κέρσορας περνάει από πάνω */
			nav a:hover {
			  background-color: #3d3d3d;
			  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
			  border-radius: 8px;
			}

			nav a:active {
			  background-color: #3d3d3d;
			  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
			  border-radius: 8px;
			}
			
		/* Διαφοροποεί τη σελίδα στην οποία είμαστε.*/
			nav a.active {
			  background-color: #3d3d3d;
			  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
			  border-radius: 8px;
			}

			nav {
				display: flex;
				flex-direction: column; /* Stack navigation links and user info vertically */
				align-items: flex-start; /* Align content to the left */
				padding: 10px;
				background-color: #1c1c1c; /* Match header background color */
				color: white; /* Match header text color */
			}
			
			/* First Line: Navigation Links */
			.nav-links {
				width: 100%;
				display: flex;
				gap: 15px; /* Space between navigation links */
				margin-bottom: 10px; /* Space between links and user info */
			}
			
			/* Second Line: User Information (Right Justified) */
			.user-info {
				width: 100%;
				text-align: right; /* Align user info to the right */
				padding-right: 10px; /* Add padding for better alignment */
				font-weight: bold;
				color: white; /* Match header text color */
			}
			
			/* Ensure the user info doesn't interfere with the navigation links */
			.user-info {
				margin-top: 5px; /* Add space above user info */
			}
			
		/* Δημιουργεί ένα "container" για το περιεχόμενο*/
			.main {
				max-width: 1200px;
				margin: 20px auto;
				padding: 20px;
			}
		  
			.main_header {
			  text-align: center;
			}

			.course {
				margin-bottom: 20px;
			}
		
		/* Για την αρχική σελίδα μορφοποιεί το τμήμα με τις εικόνες */
			.image-links {
				display: flex;
				justify-content: space-between;
				margin: 20px 0;
			}
		/* Ορίζει την κάθε εικόνα στο 30% του container, ώστε να χωράνε τρεις ανά γραμμή */
			.image-links a {
				display: block;
				width: 30%;
				text-align: center;
			}
		/* Κάνει την εικόνα να προσαρμοστεί στο μέγεθος που έχει οριστεί παραπάνω, δίνοντας επίσης radio και σκιά*/
			.image-links img {
				width: 100%;
				height: auto;
				border: 2px solid #ddd;
				border-radius: 8px;
				transition: transform 0.3s ease, box-shadow 0.3s ease;
			}
		/* Προσθέτει εφέ κίνησης στην εικόνα */
			.image-links img:hover {
				transform: scale(1.05);
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			}

			table {
				width: 100%; /* Table takes full width */
				margin-bottom: 20px;
				border: 3px solid black; /* Add a border to the entire table */
			}
			
			th, td {
				border: 2px solid black; /* Add a border to table cells */
				padding: 10px;
				text-align: center;
			}
			
			th {
				background-color: #f2f2f2;
			}

		/* Ιδιαίτερα για τη σελίδα του portfolio χειρίζεται το τμήμα των εργασιών*/
			.assignment {
				display: flex;
				align-items: center;
				text-align: justify;
				border: 1px solid #ddd;
				border-radius: 5px;
				padding: 15px;
				margin-bottom: 15px;
				background-color: #f7f7f7;            
			}

			.assignment img {
				width: 100px;
				height: 100px;
				border-radius: 5px;
				margin-right: 5px;
				background-color: #ddd;
			}

			.assignment-info {
				flex-grow: 1;
			}

			.assignment-info h3 {
				margin: 0 0 5px 0;
			}

			.assignment-info p {
				margin: 10px 10px;            
			}
			
		/* Μορφοποεί την περίληψη - τίτλο του μαθήματος */
			summary {
				cursor: pointer;
				font-size: 1.2em;
				font-weight: bold;
				margin-bottom: 10px;
			}

		/* Δημιουργεί γέμισμα και πλαϊνή γραμμή για το περιεχόμενο του μαθήματος */
			.course-content {
				margin-left: 20px;
				padding: 10px;
				border-left: 2px solid #ddd;
			}

		/* Υπογραμμίζει όταν ο κέρσορας περνάει από πάνω */
			summary:hover {
				text-decoration: underline;
			}
		  
		/*Style για τις φόρμες*/
			form {
			  display: flex;
			  flex-direction: column;  /* Κατανέμει τα στοιχεία κατακόρυφα, αποφυγή br*/
			  align-items: flex-start; /* Αριστερή στίχιση */          
			}

			form label {
			  margin-bottom: 5px;
			}

			form input {
			  padding: 8px;
			  width: 100%;
			  max-width: 300px; /* Ορίζει το μέγιστο όριο πλάτους */
			  box-sizing: border-box; /* Διασφαλίζει ότι το μέγεθος του κειμένου δεν θα μεταβάλει το κελί */
			}

		/* Δημιουργία standard τύπου κουμπιού. */
			.btn-standard {
			  padding: 10px 10px;
			  margin: 20px;
			  background-color: #1c1c1c;
			  color: white;
			  text-decoration: none;
			  border-radius: 8px;
			  font-family: Arial, sans-serif;
			  font-size: 16px;
			  font-weight: bold;
			  min-width: 150px;
			  text-align: center;
			  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
			  transition: all 0.3s ease;
			  display: inline-block;
			  white-space: nowrap;
			}
		  
			.btn-standard a {
			  color: white; /* Διατηρεί το χρώμα του κειμένου λευκό σε περίπτωση link */
			  text-decoration: none; /* Αποφεύγει την υπογράμμιση */
			}

			.btn-standard:hover {
			  background-color: #3d3d3d;
			  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
			  transform: translateY(-2px); /* Δίνει την ψευδαίσθηση της κίνησης όταν περνάει το ο κέρσορας. */
			}

			.btn-standard:active {
			  background-color: #3d3d3d;
			  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
			  transform: translateY(2px); /* Δίνει την ψευδαίσθηση του πατήματος όταν περνάει το ο κέρσορας. */
			}

			.table-container {
				overflow-x: auto;
			}
			
			table {
				width: 100%;
				border-collapse: collapse;
				margin-bottom: 20px;
				border: 2px solid #ddd;
				background-color: white;
			}
			
			th, td {
				border: 2px solid #ddd;
				padding: 10px;
				text-align: center;
			}
			
			th {
				background-color: #f2f2f2;
			}

			footer {
				text-align: center;
				padding: 15px;
				background-color: #1c1c1c;
				color: white;
				margin-top: 20px;
			}

			footer a {
				color: #ddd;
				text-decoration: none;
				margin: 0 10px;
			}