/*---Universal---*/
    * {
        margin: 0;
        padding: 0;
        font-family: Arial;
    }
    a {
        text-decoration: none;
    }
    ol {
        list-style-type: decimal;
        padding-left: 20px;
        text-align: left;
    }
    li {
        margin-top: 10px;
    }
    ul {
        padding-left: 10px;
    }
    ol ol {
        list-style-type: upper-alpha;
    }
    ol ol ol {
        list-style-type: lower-roman;
    }
    ol ol ol ol {
        list-style-type: lower-alpha;
    }
/*---Subheader/Footer and Website Navigation---*/
    .subheader{
    	height: 50%;
    	width: 100%;
    	background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,1));
    	background-position: center;
    	background-size: cover;
    	text-align: center;
    	color: white;
    }
	.header{
		min-height: 100vh;
		width: 100%;
		background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/banner25.png);
		background-position: top;
		background-size: cover;
		position: relative;
	}
	.text-box{
		width: 90%;
		color: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
	}
	.text-box h1{
		font-size: 40px;
	}
	.text-box p{
		margin: 10px 0 40px;
		font-size: 14px;
		color: white;
	}
    .subheader h1{
    	margin-top: 0px;
    	padding-bottom: 40px;
    }
    .subheader h3{
        padding-bottom: 10px;
    }
	nav{
		display: flex;
		padding: 2% 6%;
		justify-content: space-between;
		align-items: center;
	}
	nav img{
		width: 150px;
	}
	.nav-links{
		flex: 1;
		text-align: right;
	}
	.nav-links ul li{
		list-style: none;
		display: inline-block;
		padding: 8px 12px;
		position: relative;
	}
	.nav-links ul li a{
		color: #fff;
		text-decoration: none;
		font-size: 13px;
		font-weight: bold;
	}
	.nav-links ul li::after{
		content: '';
		width: 0%;
		height: 2px;
		background: #ffc000;
		display: block;
		margin: auto;
		transition: .5s;
	}
	.nav-links ul li:hover::after{
		width: 100%;
	}
	nav .fa{
		display: none;
	}
	.footer{
		width: 80%;
		text-align: center;
		padding: 30px 0;
		margin: auto;
	}
	.footer h4{
		margin-bottom: 10px;
		margin-top: 20px;
		font-weight: 600;
	}
	@media(max-width: 700px){
		.nav-links ul li{
			display: block;
		}
		.nav-links{
			position: fixed;
			background: grey;
			height: 100%;
			width: 200px;
			top: 0;
			right: -200px;
			text-align: left;
			z-index: 2;
			transition: right 0.5s ease;
		}
		nav .fa{
			display: block;
			color: white;
			margin: 10px;
			font-size: 22px;
			cursor: pointer;
		}
        .nav-overlay {
	        position: fixed;
	        top: 0;
	        left: 0;
	        width: 100%;
	        height: 100%;
	        background-color: rgba(0, 0, 0, 0.5);
	        display: none;
	    }
		nav img{
			height: 70px;
			width: 70px;
		}
		.nav-links ul{
			padding: 30px;
		}
	}
/*---Subpage Navigation---*/
    .title {
        width: 100%;
        margin: auto;
    }
    .title h1{
        padding-bottom: 10px;
    }
    .subpage-nav{
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        font-style: italic;
    }
    .subpage-nav a{
        color: white;
        width: 140px;
        margin: 10px 0;
    }
    .subpage-nav h3{
        width: 140px;
    }
/*-----------Site Links Section----------*/
	.index-row{
		max-width: 80%; 
		margin: 0 auto;
	}
	.about-section{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin-bottom: 20px;
	}
	.about{
		width: 80%;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.about-col{
		position: relative;
		overflow: hidden;
		margin-inline: 10px;
		display: flex;
	}
	.about-col img{
		display: block;
		max-width: 300px;
		aspect-ratio: 1/1;
		object-fit: cover;
		border-radius: 10px;
	}
	.about-layer{
		background: transparent;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.about-layer h2{
		font-weight: bold;
		color: white;
		font-size: 26px;
		bottom: 10%;
		left: 15%;
		margin: auto;
		position: absolute;
		background: black;
		padding: 5px;
	}
	@media(max-width: 1500px){
	    .about{
	        width: 95%;
	    }
	}
	@media(max-width: 700px){
		.index-row{
			max-width: 95%;
		}
		.about{
			width: 95%;
			padding-top: 10px;
			margin: 10px;
		}
		.about-col{
			max-width: 175px;
			margin-bottom: 10px;
		}
		.about-col img{
			max-width: 175px;
		}
		.about-layer h2{
			font-size: 20px;
			left: 5%;
			margin: auto;
		}
	}
	@media(max-width: 450px){
		.index-row{
			padding-bottom: 20px;
		}
		.about-section{
			margin-bottom: 0;
		}
		.about-col{
			margin-inline: 5px;
			margin-bottom: 10px;
		}
		.about-col img{
			max-width: 160px;
		}
	}
/*---Main Body Content---*/
    .body {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin: auto;
    }
    .textblock{
        text-align: left;
        padding: 10px;
        background: white;
        margin: 10px 20px;
    }
    .block{
        text-align: center;
        margin: 30px auto 10px;
        max-width: 90%;
    }
    .links{
        margin-top: 10px;
        padding-top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background: white;
        max-width: 80%;
        text-align: center;
    }
    .links-item {
        border-radius: 10px;
        position: relative;
        margin-inline: 10px;
        display: flex;
        overflow: hidden;
        margin-bottom: 30px;
    }
    .links-item img {
        display: block;
        max-width: 300px;
        aspect-ratio: 1;
        object-fit: contain;
    }
    .links-item-layer {
        background: transparent;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        transition: 0.5s;
    }
    .links-item-layer h3{
        width: 100%;
        color: white;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        position: absolute;
        opacity: 0;
        transition: 0.5s;
    }
	.links-item-layer:hover{
		background: rgba(0,0,0,0.6);
	}
	.links-item-layer:hover h3{
		bottom: 20%;
		opacity: 1;
	}
    .table-container {
        overflow: scroll;
        border-radius: 10px;
        border: 2px solid black;
        max-height: 600px;
    }
    .block table{
        border-spacing: 0;
        margin: 0;
        width: 100%;
        background: white;
    }
    .block td{
        padding: 8px;
    }
    .block th{
        background: black;
        color: white;
        padding: 5px 10px;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .block tr:nth-child(even){
        background: lightgrey;
    }
    .card{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px 20px;
        margin: 5px 0;
        border: solid black 2px;
        border-radius: 10px;
        color: black;
        background: white;
        min-height: 30px;
    }
    .card img{
        max-height: 80px;
    }
    .cardlist {
        padding: 10px;
        overflow: scroll;
        background: white;
        border: solid black 2px;
        border-radius: 10px;
        margin: auto;
    }
    .cardlist img{
        max-height: 40px;
        border-radius: 10px;
    }
    .cardlist-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 5px 10px;
        margin: 5px 0;
        border: solid black 2px;
        border-radius: 10px;
        color: black;
    }
    .cardlist-item h2{
        margin: auto 10px;
    }
    .list {
        border-radius: 10px;
        border: solid black 2px;
        background: white;
        margin: 30px 10px 10px;
        min-width: 230px;
    }
    .list h2 {
        padding: 20px;
        color: white;
        background: black;
        border-radius: 5px 5px 0 0;
    }
    .list-item {
        padding: 0 5px 5px;
    }
    .list-item h3 {
        padding-top: 10px;
        color: black;
    }
    .writeup {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .writeup a{
        color: black;
    }
    .writeup-item {
        margin: 10px;
        height: 80px;
        width: 80px;
        background: white;
        border: solid black 2px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .bank {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        border: solid black 2px;
        border-radius: 10px;
        background: white;
        padding: 10px 0;
    }
    .bank img {
        border-radius: 10px;
        margin: auto;
        display: block;
        aspect-ratio: 1/1;
        max-height: 90px;
        object-fit: contain;
    }
    .bank h3 {
        margin: 10px 0;
    }
    .bankitem {
        width: 100px;
        height: 100px;
        padding: 5px;
        margin: 10px;
    }
	.collapsible {
		  color: black;
		  cursor: pointer;
		  padding: 18px;
		  width: 100%;
		  border: none;
		  text-align: center;
		  outline: none;
		  font-size: 30px;
		  font-weight: bold;
		  margin: 15px auto;
	}
	.active, .collapsible:hover {
	  background-color: #555;
	}
    .collapsible-block{
        width: 90%;
	 	margin: auto;
	 	display: none;
	  	overflow: scroll;
	  	background-color: white;
	  	padding: 10px;
    }
	.collapsible-block h1{
	 	text-align: center; 
	 	margin: 10px auto; 
	 	padding: 20px 0;
	 }
	 .profile{
	     margin-top: 30px;
	 }
	.profile img{
	    max-width: 250px;
	    border-radius: 10px;
	}
    @media (max-width: 700px){
        .block {
            max-width: 95%;
        }
        .block table {
            font-size: 12px;
        }
        .links {
            max-width: 95%;
        }
        .links-item {
            margin-block: 10px;
        }
        .links-item img {
            max-width: 140px;
        }
        .card {
            font-size: 12px;
        }
    }
/*--Page-Specific Content---*/
    /*---SeasonPage---*/
        .trophy img{
            max-height: 200px;
        }
        .topplayer {
            display: flex;
        }
        .topplayer p {
            padding: 10px;
            margin: auto;
        }
        .topplayer h2 {
            margin: auto 10px;
        }
        @media (max-width: 1300px){
            .trophy img{
                max-width: 150px;
            }
        }
        @media (max-width: 700px){
            .trophy img{
                max-width: 100px;
            }
            .topplayer h2 {
                margin: auto 0;
            }
            .topplayer p {
                padding: 10px 0;
            }
        }
/*----------Index Carousel------------*/
	.carousel-section{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 35px;
		margin: 20px 0;
	}
	.wrapper{
		max-width: 1100px;
		width: 100%;
		position: relative;
	}
	.wrapper i{
		height: 50px;
		width: 50px;
		background: white;
		text-align: center;
		line-height: 50px;
		border-radius: 50%;
		cursor: pointer;
		position: absolute;
		top: 50%;
		font-size: 1.25rem;
		transform: translateY(-50%);
		box-shadow: 0 3px 6px rgba(0,0,0,0.23);
	}
	.wrapper i:first-child{
		left: -22px;
	}
	.wrapper i:last-child{
		right: -22px;
	}
	.wrapper .carousel{
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: calc(33% - 12px);
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
	}
	.carousel::-webkit-scrollbar{
		display: none;
	}
	.carousel :where(.news, .newsimg){
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.carousel.dragging{
		scroll-behavior: auto;
		scroll-snap-type: none;
	}
	.carousel.dragging .news{
		cursor: grab;
		user-select: none;
	}
	.carousel .news{
		scroll-snap-align: start;
		height: 342px;
		list-style: none;
		background: lightgrey;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		cursor: pointer;
	}
	.news .newsimg img{
		height: 342px;
		aspect-ratio: 1/1;
		object-fit: cover;
		border-radius: 10px;
		box-shadow: 0 0 3px 3px rgba(0,0,0,0.3);
	}
	@media(max-width: 1300px){
		.news .newsimg img{
		max-height: 300px;
		aspect-ratio: 1/1;
		object-fit: cover;
		border-radius: 10px;
		}
	}
	@media(max-width: 1000px){
		.news .newsimg img{
		max-height: 250px;
		aspect-ratio: 1/1;
		object-fit: cover;
		border-radius: 10px;
		}
	}
	@media(max-width: 900px){
		.wrapper .carousel{
			grid-auto-columns: calc(50% - 9px);
		}

	}
	@media(max-width: 600px){
		.wrapper .carousel{
			grid-auto-columns: 100%;
		}
	}
/*---Trade Logs---*/	
    .trade-log {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      max-height: 570px;
      overflow-y: auto;
      padding: 15px;
      background: #f9fafb;
      border-radius: 10px;
      border: solid black 2px;
      margin: 5px 2px;
      overflow: scroll;
    }
    
    .trade-block {
      background: white;
      border-radius: 12px;
      padding: 1rem 1.25rem;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      width: 100%;
      max-width: 500px;
      box-sizing: border-box;
      border: solid black 2px;
    }
    
    .trade-header {
      display: flex;
      justify-content: space-between;
      font-size: 0.9em;
      color: #666;
      margin-bottom: .5rem;
      border-bottom: 1px solid #eee;
      padding-bottom: .25rem;
    }
    
    .trade-body {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 2rem;
    }
    
    .trade-side {
      flex: 1;
      min-width: 45%;
    }
    
    .trade-side.left {
      text-align: left;
    }
    
    .trade-side.right {
      text-align: right;
    }
    
    .trade-side .owner {
      font-weight: 700;
      font-size: 1.1em;
      margin-bottom: 10px;
    }
    
    .trade-side ul {
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 0.95em;
    }
    
    .trade-notes {
      margin-top: 0.5rem;
      font-size: 0.9em;
      color: #444;
      border-top: 1px dashed #ccc;
      padding-top: 0.5rem;
    }
/*---Table Filters (Draft, Games, and Players pages)---*/
	.filter-section {
	    padding: 10px;
	    background-color: #f0f0f0;
	    display: flex;
	    flex-wrap: wrap;
	    gap: 10px;
	    width: 80%;
	    justify-content: space-between;
	    margin: 15px auto 5px;
	    border: solid black 2px;
	    border-radius: 10px;
	}
	.filter-label {
	    min-width: 120px;
	    text-align: right;
	    margin-bottom: 5px;
	    font-size: 20px;
	}
	.filter-section select{
		flex: 1;
		font-size: 20px;
	}
	@media (max-width: 1300px) {
	    .filter-label {
	        text-align: center; 
	    }
	}
	@media (max-width: 700px) {
	    .filter-label {
	        flex-basis: 100%; 
	        text-align: center;
	        font-size: 12px;
	    }
	}
/*---Call to All Games---*/
	.cta{
		margin: 50px auto;
		width: 80%;
		background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(images/stadiumbackground.jpg);
		background-position: bottom;
		background-size: cover;
		border-radius: 10px;
		text-align: center;
		padding: 100px 0;
		box-shadow: 0 0 3px 3px rgba(0,0,0,0.3);
	}
	.cta h1{
		color: white;
		margin-bottom: 40px;
		margin: 10px;
		padding: 0;
	}
	.cta-btn{
		display: inline-block;
		text-decoration: none;
		color: #fff;
		border: 1px solid #fff;
		padding: 12px 34px;
		font-size: 13px;
		background: transparent;
		position: relative;
		cursor: pointer;
	}
	.cta-btn:hover{
		border: 1px solid #ffc000;
		background: #ffc000;
		transition: 0.3s;
		color: black;
	}
	@media(max-width: 700px){
		.cta h1{
			font-size: 24px;
		}
	}
/*------------------Newsletter------------------------------------------*/
	.newslettercontent{ 
	 	font-size: 15px;
	 	padding: 15px 15px;
	 	margin: 30px auto 0;
	 	background: white;
	 	box-shadow: 0 0 20px grey;
	 	text-align: left;
	 }
	.newslettercontent h2{
	 	padding: 15px 0;
	 	text-align: left;
	 }
	 .newslettercontent h3{
	 	text-align: left;
	 }
	 
	 .newslettercontent ul li{
	 	margin-inline-start: 40px;
	 }
	 .newslettercontent ol li{
	 	margin-inline-start: 40px;
	 }
	.newsletterbank {
	    border-collapse: collapse;
	    font-weight: 400;
	}
	.newsletterbank td {
	    text-align: center;
	    padding: 8px;
	    font-size: 15px;
	}
	.newsletterbank th{
		background-color: green;
		color: black;
		font-size: 15px;
		padding: 5px 10px;
	}
	.newsletterbank tr:nth-child(even){
		background-color: #f2f2f2
	}
	@media (max-width: 1300px) {
		.newslettercontent{
			width: 90%;
			margin-top: 15px;
    	 	font-size: 15px;
    	 	text-align: left;
		}
	 	.newslettercontent h2{
	 	padding: 15px 0;
	 	text-align: center;
	 	}
	 	.newslettercontent h1{
	 	padding: 15px 0;
	 	text-align: left;
	 	font-size: 25px;
	 	}
	}
	@media (max-width: 700px) {
	 	.newslettercontent{
	 	width: 90%;
	 	padding-top: 15px;
	 	text-align: left;
		}
	 	.newslettercontent h2{
	 	padding: 15px 0;
	 	text-align: center;
	 	}
	 	.newslettercontent h1{
	 	padding: 15px 0;
	 	text-align: left;
	 	font-size: 25px;
	 	}
	}