body {
	font-family: "Arial", sans-serif;
	background-color: #00172d !important; /* Use !important to ensure it overrides other styles */
	background: #00172d;
	margin: 0;
	padding: 0;
	color:#ECF5EF;
}

a  {
	color:#ECF5EF;
	padding:10px;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
}

.team {
	margin-bottom: 30px;
	padding: 20px;
	border-radius: 30px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	width: 90%;
	max-width: 500px;
	border: 3px solid #53C0FF;
	text-align: center;
}

h1, h2, h3 {
	text-align: center;
	color: #ECF5EF; /* Text color */
}

h2 {
	font-size: 16px;
}

.team h3 {
	text-align: center;
	font-family: "Arial", sans-serif;
	color: #ECF5EF;
}

.point-boxes {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 500px; /* Adjust as needed */
}

.point-box {
	margin-bottom: 30px;
	padding: 20px;
	border-radius: 20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	width: calc(25% - 10px); /* 1/3 of the screen width with margin included */
	max-width: calc(500px / 3 - 10px); /* Maximum width for responsiveness */
	border: 2px solid white;
	box-sizing: border-box; /* Include padding and border in the width calculation */
}

.point-box h1 {
	margin:0px;
	padding:0px;
}

.point-box img {
	width: 100%;
	margin-bottom:15px;
}

select {
	width: 95%;
	margin-bottom:30px;
	margin-top:20px;
	background: rgb(45, 45, 45);
	max-width: 500px; /* Adjust as needed */
	color:white;
	font-size: 100%;
	padding:20px;
}

.button {
  display: inline-block;
  padding: 5px 10px;
  background-color: #39b6ff;
  color: white;
  text-decoration: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  width: 90%;
  max-width: 460px;
  text-align: center;
  height: 30px;
  font-weight: bold;
  line-height: 30px; /* Adjust this value based on your button's height */
  border: 2px solid white; /* Add 'solid' or another border style */
}

/* Styles for the button on hover */
.button:hover {
  background-color: #006cc2;
}

/* Styles for the button on active */
.button:active {
  background-color: #006cc2;
}

/* Styles for the button on focus */
.button:focus {
  outline: none;
}

.points {
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	color: #ECF5EF; /* Text color */
}

.movie-posters {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.movie {
	display: flex;
	margin-bottom: 25px;
}

.release_date {
  position: absolute;
  bottom: 3px; /* Adjust this value as needed to position the text */
  left: 6%; /* Adjust this value as needed to position the text */
  transform: translateX(-6%); /* Center horizontally */
  background-color: rgba(255, 255, 255, 0.8); /* Shadow background */
  color: #ECF5EF; /* Text color */
  font-weight:bold;
  padding: 3px 6px; /* Padding around the text */
  border-radius: 3px; /* Rounded corners */
  font-size: 11px; /* Font size */
  text-align: center;
}

.release_counter {
	background-color: rgba(255, 0, 0, 0.8); /* Shadow background */
	color: #ECF5EF; /* Text color */
}

.poster {
	position: relative;
	width: 65%;
	margin-right: 10px;
}

.counterpick {
	position: relative; 
	width: 65%;
	margin-right: 10px;
}

.movie-info {
	width: 50%;
}

.movie .movie-info p {
	margin: 4px 6px;
	color: #ECF5EF; /* Text color */
}

.red {
	color:red;
}

.movie-points {
	font-size:19px;
	font-weight: bold;
}

.poster img {
	max-width: 100%; /* Ensure the image doesn't exceed its container's width */
	height: auto; /* Maintain aspect ratio */
	border: 3px solid #53C0FF; /* Black border for movie posters */
}

.counterpick img {
	max-width: 100%; /* Ensure the image doesn't exceed its container's width */
	height: auto; /* Maintain aspect ratio */
	border: 4px solid red; /* Black border for movie posters */
}

.earnings {
	border-top: 2px solid white;
	padding-top:4px;
	font-weight: bold;
}

.percentage, .audience {
	font-weight: bold;
}

.team-logo {
	display: flex;
	justify-content: center;
	align-items: center;
}

.team-logo img {
	100%;
}

.orange {
	background: rgb(235, 152, 80);
	background: linear-gradient(0deg, rgba(235, 152, 80, 1) 0%, rgba(188, 72, 0, 1) 100%);
}

.blue {
	background: rgb(60, 173, 255);
	background: linear-gradient(180deg, rgba(0, 80, 246, 1) 0%, rgba(60, 173, 255, 1) 100%);
}

.purple {
	background: rgb(187, 144, 254);
	background: linear-gradient(0deg, rgba(187, 144, 254, 1) 0%, rgba(55, 8, 125, 1) 100%);
}

.sydney {
	background: rgb(244, 68, 190);
	background: linear-gradient(0deg, rgba(255, 41, 162, 1) 0%, rgba(148, 0, 102, 1) 100%);
}

.undrafted {
	background: #006cc2;
}

a {
	padding: 10px 10px; /* Padding around the text */
	border-radius: 3px; /* Rounded corners */
	margin: 10px;
	display: inline-block;
}