h1 {
    font-family: "Arial", Gadget, sans-serif;
	font-size:26px;
    color: #FFF;
    }    

h2 {
    font-family: "Arial", Gadget, sans-serif;
	font-size:20px;
    color: #000;
    }        

h4 {
    font-family: "Arial", Gadget, sans-serif;
	font-size:12px;
    color: #FFF;
    }    


tr:nth-child(even){
	background-color: #6DBFD0;
	}
        
body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    background: #000;
}

    a:link {
      color: #E6DD5B;
      text-decoration: none;
    }

    a:visited {
      color: #F4A64E;
      text-decoration: none;
    }

    a:hover {
      color: #4E9BF4;
      text-decoration: underline;
    }

    a:active {
      color:#4E9BF4;
      text-decoration: underline;
    }
/* search box */
form {
    color:#000;
}

/* Search Box */
.search-box {
    background: #e0e0e0;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.search-box form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    justify-content: flex-start;
}

.search-box .form-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-box label {
    font-weight: bold;
    font-size: 14px;
}

.search-box input[type="text"],
.search-box input[type="date"],
.search-box select {
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.search-box button {
    padding: 6px 12px;
    background: #5cb85c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.search-box button:hover {
    background: #4cae4c;
}

/* Responsive layout */
@media (max-width: 800px) {
    .search-box form {
        flex-direction: column;
        align-items: flex-start;
    }

    .search-box .form-group {
        width: 100%;
        justify-content: flex-start;
    }

    .search-box .form-group input,
    .search-box .form-group select {
        flex: 1;
    }
}


button {
    display: inline-block;
    padding: 6px 12px;
    margin-left: 10px;
    background: #9e9e9e;
    color: white;
    text-decoration: none;
    border-radius: 4px;   
}

.clear-btn {
    display: inline-block;
    padding: 6px 12px;
    margin-left: 10px;
    background: #9e9e9e;
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

.clear-btn:hover {
    background: #c9302c;
}

/* is there a tourney */
.hidden {
  display: none;
}
.visible {
    background: repeating-linear-gradient(
        45deg,             /* stripe angle */
        #702603,           /* color 1 */
        #702603 40px,      /* stripe thickness */
        #888888 20px,      /* color 2 */
        #888888 60px       /* repeat every 40px */
            );
	padding: 5px 10px 15px 10px;
	border-radius: 6px;
	margin-bottom: 20px;
}

.visible h2 {
    text-stroke: 1px #666666;
    -webkit-text-stroke: 1px #666666;
    text-shadow: 5px 5px 0px #666666;

    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: #fbff00;
    font-size: 34px;

    text-transform: uppercase;
}

.currenthammer {
  display: flex;
  justify-content: center;   /* center horizontally */
  align-items: center;       /* center vertically */
  gap: 10px;                 /* space between boxes */
  padding: 5px;
}

.currenthammer .box {
  flex: 1;                    /* equal width for all boxes */
  text-align: center;
  padding: 8px;
  border-radius: 12px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
  cursor: pointer;
}

.box small{
    font-size: 0.7em;
}


.currenthammer a.box {
  background-color: #ffffff;
  text-decoration: none;
}

/* Hover effects for links only */
.currenthammer a.box:hover {
  color: #fdf35f;
  transform: scale(1.05);
  text-decoration: none;
}

.currenthammer #game {
    background: linear-gradient(to bottom, #b1b6cc, #000000);
}

.currenthammer #bracket {
    background: linear-gradient(to bottom, #ac3f00, #000000);
}

.currenthammer #youtube {
    background: linear-gradient(to bottom, #750404, #000000);
}

.currenthammer #twitch {
    background: linear-gradient(to bottom, #6a17f0, #000000);
}


/* end of seach */

.container {
    flex: 3;
    padding: 20px;
    min-width: 300px;
}

.sidebar {
    flex: 1;
    background: #f4f4f4;
    padding: 20px;
    border-left: 2px solid #ddd;
    min-width: 250px;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
    font-size: 14px;
}

tr {
    background: #D07D6D;
}

th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}

th {
    background: #302D2D;
    cursor: pointer;
}

.pagination a {
    margin: 0 5px;
    text-decoration: none;
}

.pagination span {
    margin: 0 5px;
    font-weight: bold;
}

input[type="date"] {
    padding: 4px;
}

@media (max-width: 1200px) {
    body {
        flex-direction: column;
    }
    .sidebar {
        border-left: none;
        border-top: 2px solid #ddd;
    }
}