a {
     color: black;
     text-decoration: none;    
}
 body {
     font-family: 'Arial', sans-serif;
     background-image: url('background.jpg');
     background-attachment: fixed;
     background-size: cover;
     margin:0px;
     margin-bottom: 40px;    
}
 h1 {
     color: #fff;
     font-size: 2em;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
     text-align:center;
     padding:20px;
	 word-wrap: break-word;
}
 p {
     font-size: 20px;
}
 .wrapper {
     margin: 0 auto;
     padding-left: 40px;
     padding-right: 40px;
     max-width: 800px;
}
 .wrapperr {
     background-color: rgba(0, 0, 0, 0.8);
     max-width: 800px;
     text-align:center;
     color: white;
     margin: 0 auto;
     padding:20px;
}
 .table {
     margin: 0 0 0px 0;
     width: 100%;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
     display: table;
}
 @media screen and (max-width: 600px) {
     .table {
         display: block;
    }
}
 .row {
     display: table-row;
     background: #f6f6f6;
     border-top: 2px solid #ea6153;
}
 .row:nth-of-type(odd) {
     background: #e9e9e9;
}
 .row.header {
     font-weight: 900;
     color: #ffffff;
     background: #08a5d8;
}
 .row.green {
     background: #27ae60;
}
 .row.blue {
     background: #2980b9;
}
 @media screen and (max-width: 600px) {
     .row {
         padding: 14px 0 7px;
         display: block;
         text-align:center;
    }
.row.header {
    padding: 0;
    height: 6px;
}

.row.header .cell {
    display: none!important;
}

	/* Safari-specific styles */
  @supports (-webkit-touch-callout: none) {
    .row.header .cell {
    display: none!important;
}
}	
     .cell {
         font-size:23px;
         margin-bottom: 10px;
    }
     .cell:before {
         margin-bottom: 3px;
         content: attr(data-title);
         min-width: 98px;
         font-size: 20px;
         font-weight: bold;
         color: #1e1c1c;
         display: block;
    }
}
 .cell {
     padding: 6px 12px;
     display: table-cell;
}
 @media screen and (max-width: 600px) {
     .cell {
         padding: 2px 16px;
         display: block;
    }
}
 
 .navbar {
     background-color: #333;
     overflow: hidden;
     text-align: center;
}
 .menu-toggle {
     color: white;
     cursor: pointer;
     padding: 14px 16px;
     font-size: 20px;
     display: none;
     background: linear-gradient(to right, #4a90e2, #26c3f6);
     border: none;
     border-radius: 5px;
     transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
 .menu-toggle:hover {
     background: linear-gradient(to right, #26c3f6, #4a90e2);
     color: white;
}
 .nav-list {
     list-style-type: none;
     margin: 0;
     padding: 0;
     transition: opacity 0.3s;
}
 .nav-list li {
     display: inline;
}
 .nav-list a {
     display: inline-block;
     color: white;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     border-radius: 5px;
     transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
 .nav-list a:hover {
     background: linear-gradient(to right, #26c3f6, #4a90e2);
     color: white;
}
 @media screen and (max-width: 600px) {
     .menu-toggle {
         display: block;
    }
     .nav-list {
         display: none;
    }
     .nav-list.show {
         display: block;
         text-align: center;
         opacity: 1;
    }
     .nav-list li {
         display: block;
         margin: 10px 0;
    }
}


 .contentt {
     padding: 20px;
}

  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }

  .pagination a,
  .pagination span {
    display: block;
    text-align: center;
    padding: 10px;
    margin: 5px;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
  }

  .pagination a.active,
  .pagination a:hover {
    background-color: #08a5da;
    color: #fff;
  }

  .pagination a:not(.active) {
    background-color: #007bff;
    color: #fff;
  }

  .pagination span {
    background-color: #ccc;
    color: #000;
  }

  .pagination span.points {
    background-color: transparent;
    color: #000;
  }

  @media only screen and (max-width: 600px) {
    .pagination a,
    .pagination span {
      padding: 8px;
      font-size: 12px;
    }
  }
  
     .errordiv {
     margin: 0 auto;
     padding-left: 40px;
     padding-right: 40px;
     max-width: 800px;
	 text-align:center;
	 font-size:20px;
	 color:white;
}
  
   .searchdiv {
     margin: 0 auto;
     padding-left: 40px;
     padding-right: 40px;
     max-width: 800px;
}

.searchdiv {
    margin-top: 10px;
}

.searchdiv form {
    display: flex;
    justify-content: center;
}

.searchdiv input[type="text"] {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.searchdiv button {
    padding: 8px 16px;
    background-color: #08a5da;
    color: white;
    border: none;
    
    cursor: pointer;
    transition: background-color 0.3s;
}

.searchdiv button:hover {
    background-color: #09baf6;
}

.back-button {
    display: block;
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
	text-align:center;
}

.back-button:hover {
    background-color: #0056b3;
}

.cell1 {
    cursor: pointer;
}

    .server-buttons {
        text-align: center;
        margin-top: 10px;
    }

    .server-button {
        display: inline-block;
        padding: 10px 20px;
        margin: 5px;
        background-color: #333;
        color: white;
        text-decoration: none;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .server-button:hover {
        background-color: #555;
    }
	
	.server-button.active {
    background-color: #007BFF; /* culoarea de fundal verde pentru butonul activ */
    color: white; /* culoarea textului alb pentru butonul activ */
}


/* Your code */