/* Responsive images */
img {
    height: auto;
    max-height: 500px;
    width: 90%;
}

/* Logo sizing & other minor manipulations */
.logo {
  height: 50px;
  width: 50px;
}

.site-heading {
  text-shadow: 2px 2px 4px gray;
}

/* Extra button styles */
.btn {
  background-color: #E0F7FA; /* Light cyan background */
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all .2s ease-in-out;
}

.btn:hover {
    background-color: #B2EBF2; /* Slightly darker shade for hover effect */
}

.btn:active {
    box-shadow: none;
    transform: translateY(2px);
}

/* Calendar Styling - Schedule page */
.calendar {
  margin: 20px auto;
  text-align: center;
}
.calendar h2 {
  margin-bottom: 10px;
}
.calendar table {
  width: 100%;
  border-collapse: collapse;
}
.calendar th,
.calendar td {
  height: auto;
  width: 14.2%;
  padding: 10px;
  border: 1px solid #ccc;
}
.calendar .today {
  background-color: #00bcd4;
  color: white;
  font-weight: bold;
}
.nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* Table Styling - Statistics page  */


#playerStats {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
  font-family: sans-serif;
  background-color: hsla(180, 50%, 97%, 1); /* light teal background */
}


#playerStats th,
#playerStats td {
  border: 1px solid rgb(216, 236, 236); /* soft teal-gray border */
  padding: 0.6em 1em;
  text-align: left;
}

#playerStats thead th {
  background-color: rgb(223, 245, 245); /* header with light teal */
  font-weight: bold;
}

#playerStats tbody tr:nth-child(even) {
  background-color: hsla(180, 50%, 98%, 1); /* alternating row color */
}

#playerStats tbody tr:hover {
  background-color: hsla(180, 60%, 85%, 0.4); /* hover effect */
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.section-header {
   background-color: #e0e0e0;
  font-size: 1.1em;
  text-transform: uppercase;
  text-align: left;
}

.label-cell {
  font-weight: bold;
  background-color: hsla(180, 40%, 96%, 1); /* label cell with subtle teal */
}

th, td {
  padding: 10px;
  width: 15%;
  /* border: 1px solid navy; */
}

/* tr:nth-child(2n+2) {
  background-color: powderblue;
} */

/* Animations - Contact page */
/* Animation Keyframes */

/* Rolling ball */
/* spin right */
@-webkit-keyframes rollRight {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes rollRight {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}

@-o-keyframes rollRight {
  from { -o-transform: rotate(0deg); }
  to { -o-transform: rotate(360deg); }
}

@keyframes rollRight {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* spin left  */
@-webkit-keyframes rollLeft {
  from { -webkit-transform: rotate(360deg); }
  to { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes rollLeft {
  from { -moz-transform: rotate(360deg); }
  to { -moz-transform: rotate(0deg); }
}

@-o-keyframes rollLeft {
  from { -o-transform: rotate(360deg); }
  to { -o-transform: rotate(0deg); }
}

@keyframes rollLeft {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* move from left to right  */
@-webkit-keyframes moveRight {
  from { left: 0; }
  to { left: 90%; }
}

@-moz-keyframes moveRight {
  from { left: 0; }
  to { left: 90%; }
}

@-o-keyframes moveRight {
  from { left: 0; }
  to { left: 90%; }
}

@keyframes moveRight {
  from { left: 0; }
  to { left: 90%; }
}

/* move from right to left  */
@-webkit-keyframes moveLeft {
  from { right: 0; }
  to { right: 90%; }
}

@-moz-keyframes moveLeft {
  from { right: 0; }
  to { right: 90%; }
}

@-o-keyframes moveLeft {
  from { right: 0; }
  to { right: 90%; }
}

@keyframes moveLeft {
  from { right: 0; }
  to { right: 90%; }
}

/* Animation Styles */
.animation {
  height: 150px;
  width: 90%;
  position: relative;
}

.ball {
  position: absolute;
  height: 75px;
  width: 75px;
  animation: rollRight .5s linear 4,
  rollLeft .5s linear 2s 4,
  moveRight 2s ease-out,
  moveLeft 2s ease-out 2s;
}

footer {
  background-color: #E0F7FA;
  padding-bottom: 20px;
}