/*General styles for accessibility*/
body {
  font-family: Newsreader;
  font-size: 1.0em;
  line-height: 1.6;
  color: #333;
  background-image: url("https://img.freepik.com/free-vector/paper-style-abstract-background_23-2149116398.jpg?t=st=1728780739~exp=1728784339~hmac=0726ce290a707f3fa17f4fcafd06034ea765b77864876a02b6f29fd96d085569&w=1800");
background-size: cover;
background-attachment: fixed;
}

h2 {
  text-align:center;
} 

a{
  text-decoration: none;
  color: #0066cc;
}

a:link {
  color: #0066cc;
}

a:visited {
  color: #800080;
}

a:hover {
  color:  #ff6600;
  text-shadow: 1px 1px 2px #000000;
}

a:active {
  color:  #ff0000;
}

/* Header */
header {
  position:  sticky;
  top:  0;
  background:  linear-gradient(90deg, #ff7e5f, #feb47b);
  padding:  20px;
  color:  white;
  text-align:  center;
  box-shadow:  0 4px 8px rgba(0, 0, 0, 0.2);
}

nav ul li {
  display:  inline;
  margin: 0 15px;
}

/* Sections */
section {
  margin: auto;
  background: rgb(238,174,202);
	background: linear-gradient(90deg, rgba(238,174,202,1) 0%, 		rgba(148,187,233,1) 100%);
  padding:  0px;
  color:  darkblue;
  text-align:  justify;
  box-shadow:  0 4px 8px rgba(0, 0, 0, 0.2);
}

.section-about {
  position: absolute;
	background-color:  #f1f1f1;
  width: 50%;
  padding: 20px;
	text-align: left;
	border-radius: 10px;
}

.section-rules {
  position: fixed;
	background-color:  #f1f1f1;
  padding: 20px;
	text-align: left;
	border-radius:  10px;
}

.section-players {
	background-color:  #f1f1f1;
  padding: 20px;
	text-align: left;
	border-radius:  10px;
}


/* Vertical text */
.vertical-text {
  writing-mode:  vertical-rl;
  text-orientation:  upright;
  font-size:  24px;
  background:  #ff6699;
  color:  white;
  padding:  10px;
  border-radius:  10px;
}

/* Player images */
.players-container {
  display: flex;
  flex-direction: column;
  padding: 30px;
  align-items: center;
  margin-bottom: 20px;
  height: auto;
}

/* Footer */
footer {
  position: relative;
  background-color:  white;
  padding: 1px;
  text-align: center;
  border-radius:  50px;
}


/* Pseudo-elements */
h1::before {
  content: "🎾";
}
h1::after {
  content: "🎾";
}

h2::before {
  content: "🎾";
}
h2::after {
  content: "🎾";
}

/* Responsive design for accessibility */
@media (min-width: 768px)