body {
	font-family: Arial;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 1px;
	width: 100%;
}

h1 {
	font-size: 60px;
	letter-spacing: 3px;
	color: #007bff;
}

h2 {
	font-size: 30px;
	letter-spacing: 2px;
	color: #007bff;
}

h3 {
	font-size: 20px;
	letter-spacing: 1.5px;
	color: #007bff;
}

p {
	color: #555;
	padding-top: 2px;
	padding-bottom: 2px;
}

hr {
	color: #007bff;
	border: none;
	height: 1px;
	background-color: #007bff;
}

footer {
	margin-top: 20px;
	border-top: 1px solid #007bff;
}

footer p {
	width: 100%;
	text-align: center;
	color: #007bff;
	font-weight: bold;
}

/* to simulate a tabulation */
.tab {
	margin-left: 40px;
}

.custom-button {
	display: inline-block;
	background: #007bff;
	color: white;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 5px 5px 5px grey;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	margin-right: 5px;
}

.custom-button:active {
	box-shadow: none;
}

.label {
	font-size: 20px;
}

.basic-link:link {
	color: #007bff;
	text-decoration: none;
}

.basic-link:active {
	color: #007bff;
	text-decoration: none;
}

.basic-link:visited {
	color: #007bff;
	text-decoration: none;
}

.basic-link:hover {
	color: #007bff;
	text-decoration: underline;
}

#main-title {
	background: #007bff;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

#main-title a {
	text-decoration: none;
}

#main-title h1 {
	color: white;
	text-shadow: 3px 3px 3px grey;
	margin-top: 5px;
	margin-bottom: 5px;
}

/* Styles for the responsive top menu*/
#main-menu {
	border-bottom: 1px solid #007bff;
}

.topnav {
	background-color: white;
	overflow: hidden;
	margin: 0px;
	list-style: none;
	display: inline-block;
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
}

/* Style the links inside the navigation bar */
.topnav a {
	float: left;
	display: block;
	color: #007bff;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 20px;
}

/* Change the color of links on hover */
.topnav a:not(.icon):hover {
	background-color: #007bff;
	color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
	display: none;
	color: #007bff;
	font-size: 30px;
}

.main-section {
	/*width: 100%;*/
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 40px;
}

.main-section-index {
	flex: 3;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 40px;
}

#article-content {
	width: 75%;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
	border: 1px solid #007bff;
	box-shadow: 10px 10px 10px grey;
}

.code-block {
	overflow-x: auto;
	white-space: pre;
	background-color: white;
	border: 0.1px solid #007bff;
	color: black;
	font-size: 15px;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 40px;
	padding-bottom: 40px;
	border-radius: 10px;
	box-shadow: 5px 5px 5px #007bff;
}

.article-image {
	max-width: 75%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* Style for access modifiers */
.accessModifiers {
	color: #922b21;
	font-weight: bold;
}

/* Style for data types */
.dataTypes {
	color: #4682b4;
	font-style: italic;
}


.table-list {
	width: 80%;
	border-collapse: collapse;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

.table-list th, td {
	border: 2px solid #007bff;
	font-size: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

.table-list th {
	background: #a6dbff;
	color: #007bff;
	font-weight: bold;
}

.table-title {
	width: 80%;
	text-align: left;
}

.table-action {
	width: 10%;
	text-align: center;
}

.table-action a:link {
	color:#007bff;
}

.table-action a:visited {
	color:#007bff;
}

.table-action a:active {
	color:#007bff;
}

.table-action a:hover {
	color:#031752;
}

.form-element {
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 5px;
	padding-right: 5px;
	width: 90%
}

.main-article {
	width: 75%;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
	border: 1px solid #007bff;
	box-shadow: 10px 10px 10px grey;
}

.main-article-index {
	width: 90%;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
	border: 1px solid #007bff;
	box-shadow: 10px 10px 10px grey;
}

/* styles to show all articles */
.articles-list {
    list-style: none;
    padding: 0;
}

.article-card {
    background: #fff;
    border-radius: 10px;
	border: 1px solid #007bff;
	margin-top: 30px;
	margin-bottom: 30px;
    padding: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
}

.article-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.article-card p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}
/* End styles to list all articles */

/* Styles to show list of contents */
.list-contents ul {
	list-style: none;
    padding: 0;
    margin: 10px;
    width: 98.5%;
}

.list-contents ul li {
	margin-bottom: 30px;
}

.list-contents a {
	display: block;
    padding: 12px 20px;
    background: white;
    color: #007bff;
    font-size: 16px;
    font-weight: normal;
    text-decoration: none;
	border: 1px solid #007bff;
    border-radius: 8px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    text-align: left;
}

.list-contents a:hover {
	background: #007bff;
	color: white;
    transform: translateY(-3px);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}
/* End of styles to show list of contents */

.topic-link:hover {
	background: white !important;
}

.article-h3 {
	font-size: 25px;
	letter-spacing: 1.5px;
	color: #007bff;
	margin: 5px 0px 5px 0px;
}

.article-p {
	margin: 5px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
}

/* Styles for index news scrollbar */
.news-ticker {
	overflow: hidden;
	background-color: white;
	border-top: 2px solid #007bff;
	border-bottom: 2px solid #007bff;
	padding: 8px 0;
	margin-top: 20px;
	margin-bottom: 0px;
	white-space: nowrap;
	position: relative;
}

.ticker-content {
	display: inline-block;
	padding-left: 100%;
	white-space: nowrap;
	animation: ticker-scroll 40s linear infinite;
}

.last-news-header-item {
	display: inline;
	margin-right: 50px;
	font-weight: bold;
	font-size: 20px;
	color: #555;
}

.news-item {
	display: inline;
	margin-right: 0px;
	font-weight: bold;
	color: #007bff;
}

.news-item a:link {
	color: #007bff;
	text-decoration: none;
}

.news-item a:visited {
	color: #007bff;
	text-decoration: none;
}

.news-item a:active {
	color: #007bff;
	text-decoration: none;
}

.news-item a:hover {
	color: #007bff;
	text-decoration: underline;
}

.news-separator {
	color: #007bff;
	margin-right: 60px;
	margin-left: 60px;
}

@keyframes ticker-scroll {
	0% {
		transform: translateX(0%);
	}

	100% {
		transform: translateX(-100%);
	}
}
  
/* End of styles for index news scrollbar */

.content-wrapper {	
	display: flex;
}

#index-left-aside {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#tags-aside, #articles-aside {
	flex: 1;
	width: 400px;
	padding: 10px;
	background-color: white;
	border: 1px solid #007bff;
	margin: 10px 40px 40px 0px;
	line-height: 1.1;
	box-shadow: 10px 10px 10px grey;
}

#articles-aside {
	padding: 10px 0px 0px 0px;
	width: 420px;
}

#tags-aside {
	margin-top: 40px;
}


#tags-h2 {
	margin-top: 10px;
	margin-bottom: 10px;
}

.tags-span {
	margin: 0px 5px 0px 5px; 
	display: inline-block;
}

#articles-aside-h2 {
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

#articles-aside-hr {
	margin: 0px 10px 0px 10px;
}

#last-articles-list {
	font-size: 20px;
	list-style: none;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

#last-articles-list li {
	padding: 20px 10px 20px 10px;
	margin: 0px 0px 0px 0px;
}

.row-even {
    background-color: #f0f0f0;
}

.row-odd {
    background-color: #ffffff;
}

@media screen and (max-width: 850px) {

	#tags-aside {
		display: none;
	}

	.content-wrapper {	
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#articles-aside {
		padding: 10px 0px 0px 0px;
		width: 100%;
		background-color: white;
		border: 0px;
		margin: 40px 0px 0px 0px;
		line-height: 1.1;
		box-shadow: none;
	}
}

@media only screen and (max-width: 600px) {
	
	.tab {
		margin-left: 10px;
	}
	
	#main-title {
		text-align: center;
	}

	#main-title h1 {
		font-size: 35px;
	}
	
	.main-section {
		padding-top: 0px;
		padding-left: 0px;
		padding-right: 0px;
	}

	.main-article {
		width: 100%;
		padding: 0px 10px;
		border: none;
		box-shadow: 0px 0px 0px;
	}

	.main-article-index {
		width: 100%;
		padding: 0px 10px;
		border: none;
		box-shadow: 0px 0px 0px;
	}

	.main-article h2, p {
		padding-left: 5px;
		padding-right: 0px;
	}

	.main-article-index h2, p {
		padding-left: 5px;
		padding-right: 0px;
	}
	
	#tags-aside {
		display: none;
	}

	#list-articles ul {
		margin-left: 5px;
		margin-right: 5px;
		padding-left: 5px;
		padding-right: 5px;
	}

	.code-block {
		overflow-x: auto;
  		white-space: pre;
		background-color: white;
		border: 0.1px solid #007bff;
		color: black;
		font-size: 15px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 20px;
		padding-bottom: 20px;
		border-radius: 10px;
		box-shadow: 5px 5px 5px grey;
	}

	.article-image {
		max-width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
	}

	* {
		box-sizing: border-box; /* Ensures padding/borders don't add extra width */
	}
	
	.main-section, .main-article, .main-article-index, .topnav, #main-menu {
		max-width: 100%; /* Prevents elements from exceeding the screen width */
		overflow-x: hidden; /* Hides any overflow */
	}

	#article-content {
		width: 100%;
		margin: 0 auto;
		padding-left: 10px;
		padding-right: 10px;
		border: none;
		box-shadow: none;
	}


	/* Styles to show list of contents */
	.list-contents ul {
		margin: 0px;
		width: 100%;
	}

	.list-contents ul li {
		margin-bottom: 20px;
	}

	.list-contents a {
		display: block;
		padding: 12px 20px;
		background: white;
		color: #007bff;
		font-size: 16px;
		font-weight: normal;
		text-decoration: none;
		border: 1px solid #007bff;
		border-radius: 8px;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
		transition: none;
		text-align: left;
	}
	/* End of styles to show list of contents */

	.video-wrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 aspect ratio */
		height: 0;
		overflow: hidden;
		max-width: 100%;
	}
	  
	.video-wrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.content-wrapper {	
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#index-left-aside {
		flex: 1;
	}

	#articles-aside {
		padding: 10px 0px 0px 0px;
		width: 100%;
		background-color: white;
		border: 0px;
		margin: 10px 0px 0px 0px;
		line-height: 1.1;
		box-shadow: none;
	}
}

/* Media queries to control the response top menu*/
@media screen and (max-width: 600px) {
	.topnav a {
		display: none;
	}
	.topnav a.icon {
		float: right;
		display: block;
	}
	.topnav.responsive {
		position: relative;
	}
	.topnav.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a:not(.icon) {
		float: none;
		display: block;
		text-align: left;
		border-bottom: 1px solid #007bff;
	}
}