html, body {
	background-color: black;
	color: white;
	font-family: helvetica, arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	padding: 0;
}

.hero-container {
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

.hero-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.hero-content {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.hero-text-box {
  display: inline-block;
  background: rgb(0, 0, 0);
  padding: 15px 55px;
  border-radius: 0px;
}

.container {
	margin: 0 auto;
	max-width: 768px;
	padding: 20px 5%;
}

section {
	background-color: #171717;
}

h1, h2 {
	line-height: 1;
	text-transform: uppercase;
}

h2 {
	margin-top: 40px;
}

h2:first-of-type {
	margin-top: 20px;
}

.logo {
	display: block;
}

img {
	height: auto;
	max-width: 100%;
}

.logo img {
	width: 100%;
  	height: 250px;
 	 object-fit: cover; 
}

.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .hero-container {
    height: auto !important; 
    overflow: visible !important;
  }

  .hero-image {
    height: auto !important; 
    width: 100% !important;
    object-fit: contain !important;
  }

  .hero-content {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    padding: 20px 15px !important;
    background: #000000 !important;
  }
  
  .hero-content h1 {
    font-size: 1.8rem !important;
    color: #ffffff !important;
  }
}
@media all and (max-width: 768px) {
	.logo img {
		width: 450px;
	}
}

@media all and (max-width: 479px) {
	.logo img {
		width: 350px;
	}
}

.icon.heart {
	color: lightcoral;
}

a {
	color: aquamarine;
	font-weight: bold;
}

a:hover, a:active {
	color: mediumaquamarine;
}

a code {
	color: black;
}

code {
	background-color: aquamarine;
	color: black;
	font-family: monospace;
	padding: 1px;
	user-select: all;
}

code.image {
	background-color: lightyellow;
}
.schedule-container{

    width:min(900px,100%);

    margin:30px auto;

    padding:0 15px;

}



.schedule-header h1{

    text-align:center;

    color:#a40000;

    font-size:28px;

}



.schedule-filter{

    display:flex;

    justify-content:center;

    gap:10px;

    margin:20px 0;

}



.schedule-filter button{

    padding:10px 18px;

    border-radius:30px;

    border:1px solid #ddd;

    background:white;

    cursor:pointer;

}



.schedule-filter button.active{

    background:#a40000;

    color:white;

    border-color:#a40000;

}



.league{

    margin-bottom:25px;

}



.league-title{

    color:#a40000;

    font-weight:700;

    border-left:5px solid #a40000;

    padding-left:10px;

    margin-bottom:12px;

}



.match{

    background:white;

    border:1px solid #ddd;

    border-left:4px solid transparent;

    border-radius:10px;

    padding:15px;

    margin-bottom:12px;

}



.match:hover{

    border-left-color:#a40000;

}



.row-top{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    font-size:12px;

    color:#777;

}



.row-top div:last-child{

    text-align:right;

}



.status{

    color:#a40000;

    font-weight:bold;

}



.row-bottom{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    gap:10px;

}



.home,
.away{

    font-size:17px;

    font-weight:600;

}



.away{

    text-align:right;

}



.score{

    color:#a40000;

    font-weight:bold;

}



.loading{

    text-align:center;

    padding:40px;

    color:#777;

}

.responsive-button {

    display: flex;

    width: 100%;

    max-width: 500px;

    height: 50px;

    margin: 20px auto;

    align-items: center;

    justify-content: center;

    background: #a40000;

    color: #ffffff;

    text-decoration: none;

    font-size: 16px;

    font-weight: 600;

    border-radius: 10px;

    transition: 
        transform 0.15s ease,
        background 0.15s ease;

}


.responsive-button:hover {

    background: #c00000;

}


.responsive-button:active {

    transform: scale(0.97);

}

@media(max-width:600px){


    .schedule-header h1{

        font-size:22px;

    }


    .home,
    .away{

        font-size:14px;

    }


}