/*style.css*/
/*Styling for the Umbrellapps portal website https://umbrellapps.ovh*/

/*Table of contents:

General unspecific page
Specific page for accounts (account, feed profile, balances)
Containerisation of the specific page for accounts (account, feed profile, balances)
Footer
Menu
Web application
Content at Wall
Button
Table
Video, Image, PDF
Reaction
Dropdown select
Broadcast messenger
Direct messenger
Emoji
High Scores in Games within Play
Div including several anchor tags
Text
*/





/*General unspecific page*/
body {
	background-color: MediumSeaGreen;
}




/*Specific pages for accounts (account, feed profile, balances)*/
body.accounts {
	background-color: white;
}



/*Containerisation of specific pages for accounts (account, feed profile, balances)*/
.containerAccounts {
	display: flex;
	flex-wrap: wrap;
}
.containerAccounts .row {
	display: flex;
  flex-direction: row;
	flex-wrap: wrap; /* Allows flex items to wrap onto multiple lines */
	justify-content: center; /* Centers the items horizontally */
	gap: 10px; /* Adds space between items */
}
.containerAccounts .row .box {
	flex: 1 1 45%; /* Adjust the basis and allow flexibility */
	padding: 10px;
	margin: 5px;
	border: 1px solid #ccc;
	background-color: #f9f9f9;
	box-sizing: border-box;
}

@media (max-width: 750px) {
	.containerAccounts .row .box {
		flex: 1 1 100%; /* Boxes will take full width of the container on smaller screens */
	}
}






/*Footer*/
footer {
    width: 100%;
    background-color: #f8f9fa;
    padding: 20px;
    text-align: center;
    margin-top: 20px;
    box-sizing: border-box; /* Ensures padding is included in the width */
    overflow: hidden; /* Prevents content from overflowing */
}

.footer-links {
    margin-bottom: 10px;
    box-sizing: border-box; /* Ensures padding and borders are included in the width */
}

.footer-links a {
    display: inline-block; /* Keeps links on the same line until wrapping */
    margin: 0 10px;
    color: #007bff;
    text-decoration: none;
    padding: 5px 10px; /* Adds some padding for better touch targets */
    box-sizing: border-box; /* Ensures padding is included in the width */
}

.footer-links a:hover {
    text-decoration: underline;
}

/* Media Query for mobile devices */
@media (max-width: 750px) {
    .footer-links a {
        display: block; /* Stacks links vertically */
        margin: 5px 0; /* Adjusts vertical spacing */
        width: calc(100% - 20px); /* Accounts for padding and ensures full width minus horizontal margin */
    }
}










/*Menu*/
/*Main dropdown menu - 1st layer horizontal navbar, sub-menu - 2nd layer 1st vertical dropdown*/
/*Navbar container*/
.navbar {
	overflow: hidden;
	background-color: #333;
}

/*Links inside the navbar */
.navbar a {
	float: left;
	font-size: 1rem;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

/* The dropdown container */
.dropdown {
	float: left;
	overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
	font-size: 1rem;
	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit; /* Important for vertical align on mobile phones */
	margin: 0; /* Important for vertical align on mobile phones */
}

/*Navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
	background-color: red;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

/*Dropdown links on hover */
.dropdown-content a:hover {
	background-color: #ddd;
}

/*Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: block;
}




/*Sub-sub menu - 3rd layer 2nd vertical sub-dropdown*/
/* Sub-dropdown container */
.sub-dropdown {
	position: relative;
}

/* Sub-dropdown button */
.sub-dropdown .sub-dropbtn {
	left: 100%;
	top: 0;
	font-size: 1rem;
	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	background-color: #333;
	font-family: inherit; /* Important for vertical align on mobile phones */
	margin: 0; /* Important for vertical align on mobile phones */
}

/* Show sub-dropdown content on hover */
.sub-dropdown:hover .sub-dropdown-content {
	display: block;
}

/* Sub-dropdown content (hidden by default) */
.sub-dropdown-content {
	left: 100%;
	top: 0;
	background-color: #f9f9f9;
	position: absolute;
	display: none;
}

/* Links inside the sub-dropdown */
.sub-dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

/*Sub-dropdown links on hover */
.sub-dropdown:hover .sub-dropbtn {
	background-color: red;
}



/*Menu for tablets and mobiles*/
/*Menu, sub-menu, sub-sub-menu*/
@media screen and (max-width: 750px) {
	/* Adjusting the navbar for mobile devices */
	.navbar {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.navbar a {
		font-size: 0.7rem;
	}

	/*Adjusting dropdown buttons for mobile devices*/
	.dropdown, .sub-dropdown {
		width: 100%;
	}

	.dropbtn, .sub-dropbtn {
		width: 100%;
		text-align: left;
		padding: 14px;
		background-color: #333;
		color: white;
		border: none;
		outline: none;
		font-size: 0.7rem;
	}

	/*Styling dropdown content for mobile */
	.dropdown-content, .sub-dropdown-content {
		position: static;
		display: none;
		width: 100%;
		box-shadow: none;
	}

	/*Links inside dropdown and sub-dropdown */
	.dropdown-content a, .sub-dropdown-content a {
		text-align: left;
		padding: 12px 16px;
		background-color: #f9f9f9;
		color: black;
	}

	/*Show dropdown content when the button is clicked */
	.dropdown.active .dropdown-content, .sub-dropdown.active .sub-dropdown-content {
		display: block;
	}

	/*Add red background color on hover */
	.navbar a:hover, .dropdown:hover .dropbtn, .sub-dropdown:hover .sub-dropbtn, .dropdown-content a:hover, .sub-dropdown-content a:hover {
		background-color: red;
	}

	/* Ensuring smooth touch and mouse operations */
	.dropdown, .sub-dropdown {
		cursor: pointer;
	}
}







/*Web application*/
.containerPortalIntroduction {
	background-color: FireBrick;
	color: #fff;
	border: 1px solid #ccc;
	padding: 10px;
	margin: 10px;
	margin-top:70px;
	font-size: 1.5rem;
	text-align: center;
}

.containerPlatformIntroduction {
	background-color: DarkOrchid;
	color: #fff;
	border: 1px solid #ccc;
	padding: 10px;
	margin: 10px;
	margin-top:70px;
	font-size: 1.4rem;
}

.containerAppIntroduction {
	background-color: OrangeRed;
	color: #fff;
	border: 1px solid #ccc;
	padding: 10px;
	margin: 10px;
	margin-top:70px;
	font-size: 1.2rem;
}

.containerAppInput {
	background-color: white;
	border: 1px solid #ccc;
	padding: 10px;
	margin: 10px;
	font-size: 1rem;

	/* Ensures child elements can be positioned relative to the parent */
	/*position: relative;*/
	/*width: 100%;*/
	/* No fixed height, it will automatically adjust based on child size */
	/* box-sizing: border-box;*/ /* Ensures that the padding and border are included in the element's total width and height, preventing the parent div from exceeding the browser window' s width */
}

.containerAppOutput {
	background-color: mistyrose;
	border: 1px solid #ccc;
	padding: 10px;
	margin: 10px;
	font-size: 1rem;
}

.containerAppComment {
	background-color: lightcyan;
	border: 1px solid #ccc;
	padding: 10px;
	margin: 10px;
	font-size: 1rem;
}

/*Style div for Unavailable Access Code comment*/
.containerAppUnavailableAccessCode {
	background-color: Olive;
	color: #fff;
	border: 1px solid #ccc;
	padding: 10px;
	margin: 10px;
	margin-top:70px;
	font-size: 1rem;
}

/*Don not display the div for Unavailable Access Code comment if empty*/
.containerAppUnavailableAccessCode:empty {
	display: none;
}

/*Web applications Mobile*/
@media (max-width: 750px) {
.containerPortalIntroduction {
	font-size: 1rem;
}

.containerPlatformIntroduction {
	font-size: 0.9rem;
}

.containerAppIntroduction {
	font-size: 0.8rem;
}

.containerAppInput {
	font-size: 0.7rem;
}

.containerAppOutput {
	font-size: 0.7rem;
}

.containerAppComment {
	font-size: 0.7rem;
}

/*Style div for Unavailable Access Code comment*/
.containerAppUnavailableAccessCode {
	font-size: 0.7rem;
}
}






/* Content at Wall */
.containerContentWall {
	background-color: LightCyan;
	color: Black;
	border: 1px solid #ddd;
	margin-bottom: 10px;
	/* Includes padding and border in the element's total width and height */
	box-sizing: border-box;
}

/* Mobiles, tablets, laptops, desktops, and ultrawide monitors */
/* Mobile devices, must cover screen 360px */
@media (max-width: 500px) {
	.containerContentWall {
		/* Set width to be fluid within the mobile range */
		width: 100%;
		/* Ensure the container doesn�t exceed the viewport width */
		max-width: 100%;
		/* Avoid content shrinking below a certain point */
		min-width: 320px;
		/* Padding for better spacing */
		padding: 5px;
		/* Small font size */
		font-size: 0.9rem;
		flex: 1;
	}
}

/* Tablets */
@media (max-width: 1100px) and (min-width: 501px) {
	.containerContentWall {
		/* Set width to be fluid within the mobile range */
		width: 100%;
		/* Ensure the container doesn�t exceed the viewport width */
		max-width: 100%;
		/* Avoid content shrinking below a certain point */
		min-width: 501px;
		/* Padding for better spacing */
		padding: 10px;
		/* Smaller font size */
		font-size: 1rem;
	}
}

/* Large screens (e.g., desktops, laptops) */
@media (max-width: 2000px) and (min-width: 1101px) {
	.containerContentWall {
		/* Set width to be fluid within the mobile range */
		width: 100%;
		/* Ensure the container doesn�t exceed the viewport width */
		max-width: 100%;
		/* Avoid content shrinking below a certain point */
		min-width: 1101px;
		/* Padding for better spacing */
		padding: 20px;
		/* Smaller font size */
		font-size: 1.2rem;

		/* Use multi-column layout for two columns */
		/* Two columns */
		column-count: 2;
		/* Space between columns */
		column-gap: 20px;
	}
}

/* High-resolution and ultrawide monitors */
@media (min-width: 2001px) {
	.containerContentWall {
		/* Set width to be fluid within the mobile range */
		width: 100%;
		/* Ensure the container doesn�t exceed the viewport width */
		max-width: 100%;
		/* Avoid content shrinking below a certain point */
		min-width: 2001px;
		/* Padding for better spacing */
		padding: 30px;
		/* Smaller font size */
		font-size: 1.5rem;

		/* Use multi-column layout for two columns */
		/* Two columns */
		column-count: 3;
		/* Space between columns */
		column-gap: 30px;
	}
}









/*Button*/
button {
	cursor: pointer;
}

.buttonApp {
	margin: 10px;
	padding: 10px 10px;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1.3rem;
}

.buttonApp:hover {
	background-color: #0056b3;
	}

.buttonApp:active {
	/*Background color when the button is clicked*/
	background-color: red;
}

@media (max-width: 750px) {
.buttonApp {
	font-size: 1rem;
}
}







/*Button Small*/
button {
	cursor: pointer;
}

.buttonSmall {
	margin-top: 1px;
	padding: 2px 4px;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 1px;
	cursor: pointer;
	font-size: 1rem;
}

.buttonSmall:hover {
	background-color: #0056b3;
	}

.buttonSmall:active {
	/*Background color when the button is clicked*/
	background-color: red;
}

@media (max-width: 750px) {
.buttonSmall {
	font-size: 0.8rem;
}
}





/*Table*/
table {
    width: 100%; /* Ensures table uses the full width of the container */
    border-collapse: collapse;
    overflow-x: auto; /* Adds horizontal scroll if needed */
    display: block; /* Allows table to be scrollable */
	table-layout: fixed;
}

table, th, td {
    border: 1px solid black;
}

th, td {
    padding: 10px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

/* A class to format columns for numbers */
.tableColumnWithNumbers {
    text-align: right;
    padding-right: 10px;
}

/* Optional styling for scroll container */
.table-container {
    overflow-x: auto; /* Adds horizontal scroll if needed */
    -webkit-overflow-scrolling: touch; /* Enables smooth scrolling on iOS devices */
    width: 100%; /* Ensures the container takes full width */
}






/* Video, Image, PDF */
.video-container {
	text-align: center; /* Center-align the content in each container */
	max-width: 300px; /* Set a maximum width for each video container */
	flex: 1; /* Allow the containers to grow equally */
}
.video-container p {
	font-size: 1.2em; /* Adjust the font size of the title */
	font-weight: bold; /* Make the title bold */
	margin-bottom: 10px; /* Add some space between the title and the video */
}
video {
	width: 100%; /* Make the video responsive */
	height: auto; /* Maintain aspect ratio */
}
.image-container img {
	width: 200px;
	max-width: 200px;
	height:auto;
}
.pdf-container embed {
	width:580px;
	max-width: 600px; /* Set a maximum width for each video container */
	height:auto;
}

@media (max-width: 750px) {
	.video-container {
		max-width: 250px; /* Set a maximum width for each video container */
	}
	.image-container img {
		width: 150px;
	}
	.pdf-container embed {
		width:330px;
	}
}








/* Reaction */
.reaction-post {
	background-color: ivory;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	padding: 10px;
	margin: 3px;
	margin-left: 0; /* Aligns the element to the left side of the page */
	left: 0;
}

.reaction-container {
	margin-top: 5px;
	position: relative;
	left: 0;
	display: flex;          /* Use flexbox to align items in a row */
	align-items: center;     /* Aligns button and counts vertically in the middle */
	gap: 10px;               /* Small gap between the button and counts */
}

.reaction-button {
	border: none;
	background-color: #FF4500; /* A more vibrant orange color */
	color: white; /* White text for better contrast */
	padding: 5px 10px; /* Smaller padding for a smaller button */
	border-radius: 25px; /* Keep the roundness, adjust radius to match size */
	cursor: pointer;
	font-size: 0.8rem; /* Smaller font size */
	transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
	box-shadow: 0 2px 8px rgba(255, 69, 0, 0.5); /* Subtle shadow for eye-catching effect */
}

.reaction-button:hover {
	background-color: #FF6347; /* Slightly lighter orange on hover */
	transform: scale(1.15); /* Make it grow a bit more on hover */
	box-shadow: 0 4px 12px rgba(255, 99, 71, 0.7); /* Enhanced shadow on hover */
}

.reaction-button:active {
	background-color: #FF6347; /* Maintain lighter orange on click */
	transform: scale(1.05); /* Slightly reduce size when clicked */
	box-shadow: 0 2px 8px rgba(255, 69, 0, 0.5); /* Return to original shadow */
}

.reaction-options {
	/* Ensure the label and text are displayed inline */
	display: none;
	position: absolute;
	top: 40px;
	left: 0;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	padding: 10px;
	z-index: 10;
}

.reaction-options label {
	display: block;
	margin-bottom: 10px;
	color: #666;
}

.reaction-options input {
	margin-right: 10px;
}

.reaction-counts {
	text-align: center;
	margin-top: 0px;
	font-size: 0.9rem;
	color: #666;
}

.reaction-counts span {
	display: inline-block;
	margin: 0 10px;
}


/* Mobiles, tablets, laptops, desktops, and ultrawide monitors */
/* Mobile devices, must cover screen 360px */
@media (max-width: 500px) {
	.reaction-post {
		/* Set width to be fluid within the mobile range */
		width: 100%;
		/* Ensure the container doesn�t exceed the viewport width */
		max-width: 90%;
		/* Avoid content shrinking below a certain point */
		min-width: 170px;
		/* Padding for better spacing */
		padding: 3px;
		/* Small font size */
		font-size: 0.9rem;
		flex: 1;
	}
}

/* Tablets */
@media (max-width: 1100px) and (min-width: 501px) {
	.reaction-post {
		/* Set width to be fluid within the mobile range */
		width: 100%;
		/* Ensure the container doesn�t exceed the viewport width */
		max-width: 85%;
		/* Avoid content shrinking below a certain point */
		min-width: 250px;
		/* Padding for better spacing */
		padding: 4px;
		/* Smaller font size */
		font-size: 1rem;
	}
}

/* Large screens (e.g., desktops, laptops) */
@media (max-width: 2000px) and (min-width: 1101px) {
	.reaction-post {
		/* Set width to be fluid within the mobile range */
		width: 100%;
		/* Ensure the container doesn�t exceed the viewport width */
		max-width: 80%;
		/* Avoid content shrinking below a certain point */
		min-width: 500px;
		/* Padding for better spacing */
		padding: 7px;
		/* Smaller font size */
		font-size: 1.2rem;
	}
}

/* High-resolution and ultrawide monitors */
@media (min-width: 2001px) {
	.reaction-post {
		/* Set width to be fluid within the mobile range */
		width: 100%;
		/* Ensure the container doesn�t exceed the viewport width */
		max-width: 70%;
		/* Avoid content shrinking below a certain point */
		min-width: 700px;
		/* Padding for better spacing */
		padding: 10px;
		/* Smaller font size */
		font-size: 1.5rem;
	}
}

















/*Dropdown select*/
.dropdown-select-container {
	display: flex;
	/*Align tabs to the left*/
	justify-content: flex-start;
	margin-bottom: 10px;
}
.dropdown-select-container select {
	padding: 0.3rem;
	border-radius: 5px;
	border: 1px solid #ddd;
	color: white;
	/*Default font size*/
	font-size: 1rem;
	background-color: orchid;
	cursor: pointer;
	transition: border-color 0.3s ease;
}
.dropdown-select-container select:focus {
	border-color: #007bff;
}

/* High-resolution and ultrawide monitors */
@media (min-width: 2001px) {
	.dropdown-select-container select {
		/* Large font size */
		font-size: 1rem;
		/* Large min-width */
		min-width: 200px;
	}
}

/* Large screens (e.g., desktops, laptops) */
@media (max-width: 2000px) and (min-width: 1101px) {
	.dropdown-select-container select {
		/* Larger font size */
		font-size: 1rem;
		/* Larger min-width */
		min-width: 200px;
	}
}

/* Tablets */
@media (max-width: 1100px) and (min-width: 501px) {
	.dropdown-select-container select {
		/* Smaller font size */
		font-size: 1rem;
		/* Smaller min-width */
		min-width: 180px;
	}
}

/* Mobile devices, must cover 360px */
@media (max-width: 500px) {
	.dropdown-select-container select {
		/* Small font size */
		font-size: 0.9rem;
		flex: 1;
		/* Small min-width */
		min-width: 150px;
	}
}






/*Broadcast Messenger*/
.messenger-broadcast-container {
	width: 400px;
	margin: 0 auto;
}

.messenger-broadcast-box {
	background-color: moccasin;
	height: 300px;
	overflow-y: scroll;
	border: 1px solid #ccc;
	padding: 10px;
}

.messenger-broadcast-input {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 1rem;
	background-color: moccasin;
}

@media (max-width: 750px) {
.messenger-broadcast-container {
	/* Set the width to 100% of the parent/container */
	width: 100%;
	/* Ensure the width doesn't exceed the viewport width */
	max-width: 100vw;
	margin: 0 auto;
}

.messenger-broadcast-box {
	background-color: moccasin;
	height: 400px;
	overflow-y: scroll;
	border: 1px solid #ccc;
	padding: 10px;
}

.messenger-broadcast-input {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 0.8rem;
	background-color: moccasin;
}
}









/*Direct Messenger*/
.messenger-direct-container {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
}

.messenger-contacts-box {
	background-color: ivory;
	height: 900px;
	border: 1px solid #ccc;
	padding: 10px;
	width 20%;
	/*Allow it to grow if there's extra space*/
	flex-grow: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* Add this line to align items to the bottom */
}

.messenger-direct-container-box {
	background-color: white;
	height: 920px;
	border: 1px solid #ccc;
	width 80%;
	/*Allow it to grow if there's extra space*/
	flex-grow: 4;
}

.messenger-direct-box {
	background-color: beige;
	height: 900px;
	overflow-y: scroll;
	border: 1px solid #ccc;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* Add this line to align items to the bottom */
}

.messenger-direct-input1 {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin: 2px;
	font-size: 1rem;
	background-color: gainsboro;
}

.messenger-direct-input2 {
	padding: 4px;
	border: 2px solid #ccc;
	border-radius: 1px;
	margin: 2px;
	font-size: 1rem;
	background-color: gainsboro;
}

@media (max-width: 750px) {
.messenger-direct-container {
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	/* Set the width to 100% of the parent/container */
	width: 100%;
	/* Ensure the width doesn't exceed the viewport width */
	max-width: 100vw;
	/* Include padding and borders within the width */
	box-sizing: border-box; 
}

.messenger-contacts-box {
	background-color: ivory;
	height: 900px;
	border: 1px solid #ccc;
	padding: 10px;
	width: 100%;
	max-width: 20vw;
}

.messenger-direct-container-box {
	background-color: white;
	height: 920px;
	border: 1px solid #ccc;
	width 100%;
	max-width: 70vw;
	/*Allow it to grow if there's extra space*/
	flex-grow: 0;
}

.messenger-direct-box {
	background-color: beige;
	height: 500px;
	overflow-y: scroll;
	border: 1px solid #ccc;
	padding: 10px;
	width: 100%;
	max-width: 55.5vw;
}

.messenger-direct-input1 {
	width: 100%;
	max-width: 100vw;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin: 1px;
	font-size: 1rem;
	background-color: gainsboro;
}

.messenger-direct-input2 {
	padding: 4px;
	border: 1px solid #ccc;
	border-radius: 1px;
	margin: 1px;
	font-size: 0.8rem;
	background-color: gainsboro;
}

}








/*Emoji*/
.emoji-menu {
	display: flex;
	/* Allow emojis to wrap to the next line if needed */
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
	/* Limit the maximum width to 80% of the viewport width */
	max-width: 100vw;
	/* Set the width to 100% of the parent container */
	width: 100%;
	background-color: white;
	/* Ensure padding and borders are included in the width */
	box-sizing: border-box;
	padding: 10px;
}
.emoji-menu span {
	cursor: pointer;
	font-size: 1.5rem;
}



/* High Scores in Games within Play */
/* Score board div */
#scoreBoard {
	display: flex;
	flex-direction: column;
	max-width: 200px;
	margin: 0;
}

/* Rows */
.score-row {
	display: flex;
	justify-content: space-between;
	padding: 8px;
	border: 1px solid #ccc;
	background-color: Ivory;
}

/* Headers */
.score-row.header {
	font-weight: bold;
	background-color: Orange;
	text-align: center;
}

/* Place column */
.place {
	width: 30%;
	text-align: right;
}

/* Score column */
.score {
	width: 70%;
	text-align: right;
}







/*Div including several anchor tags*/
.containerATags {
    width: 100%; /* or a specific width */
    text-align: center; /* Centers inline or inline-block elements within the container */
}

.containerATags a {
    display: inline-block; /* Ensures <a> tags behave like block elements but on the same line */
    white-space: nowrap; /* Prevents the text inside <a> tags from wrapping */
    margin-bottom: 5px; /* Adds space between links */
    padding: 10px 20px; /* Adds padding inside each <a> tag */
    background-color: DeepPink; /* Background color for the <a> tags */
    color: white; /* Text color inside <a> tags */
    text-decoration: none; /* Removes underline from the links */
    border-radius: 5px; /* Rounds the corners of the <a> tags */
}







/*Text*/
.fontRed {
	color: red;
}

.fontBlue {
	color: blue;
}