@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.content {
    display: block;
    color: #ffffff;
    padding: 60px;
    padding-top: 150px; 
    width: 50%;
    font-size: 18px; 
    font-family: 'Roboto', sans-serif; 
    line-height: 1.6; 
}

.content a {
    font-family: 'Roboto', sans-serif; 
    text-decoration: none; 
    color: #cb202a; 
}

.content a:hover {
    color: #993333; 
    text-decoration: underline; 
}

.content table {
    width: 100%; /* Adjusted to fit within content */
    margin-top: 40px;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}

.content th, .content td {
    padding: 12px 15px;
    text-align: center;
}

.content th {
    background-color: #651015;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.content tr {
    border-bottom: 1px solid #333333;
}

.content tr:nth-child(even) {
    background-color: #333333;
}

.content tr:hover {
    background-color: #cb202a;
}

.content td {
    color: #ffffff;
}

.content th:nth-child(1), .content td:nth-child(1) {
    width: 25%; /* First column (Player Number) */
}

.content th:nth-child(2), .content td:nth-child(2) {
    width: 50%; /* Second column (Last Name) */
}

.content th:nth-child(3), .content td:nth-child(3) {
    width: 25%; /* Third column (Position) */
}

.coach-name {
    text-align: right; /* Aligns the text to the right */
    font-size: 24px; /* Medium font size */
    margin-bottom: 10px; /* Adds some space between the coach name and the table */
    color: #ffffff; /* Keep text color consistent */
}


.phc {
	display: block;
    color: #ffffff;
    padding: 60px;
    padding-top: 100px; 
    width: 50%;
    font-size: 18px; 
    font-family: 'Roboto', sans-serif; 
    line-height: 1.6; 
}

.phc a {
    font-family: 'Roboto', sans-serif; 
    text-decoration: none; 
    color: #cb202a; 
}

.phc a:hover {
    color: #993333; 
    text-decoration: underline; 
}

.phc table {
    width: 100%; /* Adjusted to fit within content */
    margin-top: 40px;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}

.phc table td {
    vertical-align: bottom; /* Align content to the bottom of the cell */
    padding: 0 15px; /* Optional: Adjust spacing between cells */
}

.phc table td:first-child {
    text-align: left; /* Align image to the left */
}

.phc table td:last-child {
    text-align: right; /* Align text to the right */
}

.coaches {
	display: block;
    color: #ffffff;
    padding: 60px;
    padding-top: 100px; 
    width: 50%;
    font-size: 18px; 
    font-family: 'Roboto', sans-serif; 
    line-height: 1.6; 
}

.coaches a {
    font-family: 'Roboto', sans-serif; 
    text-decoration: none; 
    color: #cb202a; 
}

.coaches a:hover {
    color: #993333; 
    text-decoration: underline; 
}

.coaches table {
    width: 100%; /* Adjusted to fit within content */
    margin-top: 20px;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
	background-color: #000000;
}

.coaches tr {
    border-bottom: 1px solid #333333;
}

.coaches td {
	padding-left: 10px;
	padding-right: 20px;
}

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #cb202a;
	color: #ffffff;
	padding: 14px 16px;
	position: fixed;
	top: 0;
	height: 30px;
	width: 100%;
}

.navbar-left {
	display: flex;
	align-items: center;
}

.navbar-left a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: Consolas, sans-serif;
  font-size: 16px; 
  font-weight: 400; 
  text-transform: uppercase;
}

.navbar-left a:hover {
  background: #333333;
  color: red;
  font-weight: 700;
}

.dropdown {
	position: relative;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #cb202a;
	color: #ffffff;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	top: 100%;
	left: 0;
	min-width: 100px;
	border: 1px solid #333333; /* Add border */
}

.dropdown-content a {
	color: red;
	background: #cb202a;
	color: #ffffff;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	border: 1px solid #333333; /* Add border */
	text-align: left; /* Align text to the left */
	white-space: nowrap; /* Prevent text from wrapping */
}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown:hover .dropdown-toggle,
.dropdown-content:hover .dropdown-toggle {
	background: #333333;
	color: red;
	font-weight: 700;
}	

.navbar-right {
	display: flex;
	align-items: center;
	padding: 14px 16px;
}

#toggle-menu {
	display: none;
}

.hamburger {
	display: none;
}

.ham-menu {
	display: none;
}		

@media (hover: none), (pointer: coarse) {
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	.content {
		display: block;
		color: #ffffff;
		padding: 100px 15px;
		width: 100%;
	}
	
	.navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #cb202a;
		color: #ffffff;
		padding: 14px 16px;
		position: fixed;
		top: 0;
		height: 30px;
		width: 100%;
	}

	.navbar-left {
		display: none;
	}
	
	.navbar-right {
		display: flex;
		align-items: center;
		padding: 14px 16px;
	}
	
	.hamburger {
		cursor: pointer;
		display: block;
		color: #f2f2f2;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		font-family: Consolas, sans-serif;
		font-size: 20px; 
		font-weight: 400; 
		text-transform: uppercase;
		
	}

	#toggle-menu {
		display: none;
	}
	
	#toggle-menu:checked + .hamburger {
		color: red; 
		background-color: #333333;
	}

	.ham-menu {
		display: none;
		list-style-type: none;
		padding: 0;
		margin: 0;
		background: #333333;
		position: absolute;
		top: 40px;
		width: 200px; /* Fixed width for main options */
	}

	#toggle-menu:checked + .hamburger + .ham-menu {
		display: block;
	}

	.ham-menu li {
		position: relative;
	}

	.ham-menu a {
		display: block;
		background: #cb202a;
		color: #f2f2f2;
		padding: 14px 16px;
		text-decoration: none;
		font-family: Consolas, sans-serif;
		font-size: 20px; 
		font-weight: 400; 
		text-transform: uppercase;
		border: 1px solid #333333; /* Add border */
		text-align: left; /* Align text to the left */
		white-space: nowrap; /* Prevent text from wrapping */
	}

	.ham-menu a:hover, .ham-menu li:hover > a, .ham-menu li:focus-within > a {
		background: #333333;
		color: #cb202a;
		text-decoration: none; 
	}

	.ham-menu li ul.submenu {
		display: none;
		position: absolute;
		top: 0;
		left: 100%;
		background: #333333;
		list-style-type: none;
		padding: 0;
		margin: 0;
		min-width: 150px; /* Minimum width for sub-options */
		z-index: 1;
	}

	.ham-menu li:hover ul.submenu, .ham-menu li:focus-within ul.submenu {
		display: block;
	}

	.submenu li {
		position: relative;
	}

	.submenu a {
		display: block;
		padding: 10px;
		color: #f2f2f2; 
		text-decoration: none; 
	}

	.submenu a:hover {
		background: #333333;
		color: #f2f2f2; 
		text-decoration: none; 
	}

	.ham-menu li:hover > a {
		background: #333333; 
	}

	.submenu li:hover > a {
		background: #333333; 
	}
	
	.phc {
	    display: block;
        color: #ffffff;
        padding: 60px;
        padding-top: 100px; 
        width: 100%;
        font-size: 18px; 
        font-family: 'Roboto', sans-serif; 
        line-height: 1.6; 
    }

    .phc a {
        font-family: 'Roboto', sans-serif; 
        text-decoration: none; 
        color: #cb202a; 
    }

    .phc a:hover {
        color: #993333; 
        text-decoration: underline; 
    }

    .phc table {
        width: 100%; /* Adjusted to fit within content */
        margin-top: 40px;
        border-collapse: collapse;
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
    }
    
    .phc table td {
        vertical-align: bottom; /* Align content to the bottom of the cell */
        padding: 0 15px; /* Optional: Adjust spacing between cells */
    }

    .phc table td:first-child {
        text-align: left; /* Align image to the left */
    }

    .phc table td:last-child {
        text-align: right; /* Align text to the right */
    }
    
    .coaches {
	    display: block;
        color: #ffffff;
        padding: 60px;
        padding-top: 100px; 
        width: 100%;
        font-size: 18px; 
        font-family: 'Roboto', sans-serif; 
        line-height: 1.6; 
    }

    .coaches a {
        font-family: 'Roboto', sans-serif; 
        text-decoration: none; 
        color: #cb202a; 
    }

    .coaches a:hover {
        color: #993333; 
        text-decoration: underline; 
    }

    .coaches table {
        width: 100%; /* Adjusted to fit within content */
        margin-top: 20px;
        border-collapse: collapse;
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
    	background-color: #000000;
    }

    .coaches tr {
        border-bottom: 1px solid #333333;
    }

    .coaches td {
    	padding-left: 10px;
    	padding-right: 20px;
    	vertical-align: top;
    }
}