/* Add the following CSS styles to your career.css file */

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-image: radial-gradient(circle at 10% 8%, rgba(255,255,255, 0.05) 0%, rgba(255,255,255, 0.05) 8%,transparent 8%, transparent 92%),radial-gradient(circle at 87% 45%, rgba(255,255,255, 0.05) 0%, rgba(255,255,255, 0.05) 8%,transparent 8%, transparent 92%),radial-gradient(circle at 9% 67%, rgba(255,255,255, 0.05) 0%, rgba(255,255,255, 0.05) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 31% 83%, rgba(255,255,255, 0.05) 0%, rgba(255,255,255, 0.05) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 46% 54%, rgba(255,255,255, 0.05) 0%, rgba(255,255,255, 0.05) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 16% 24%, rgba(255,255,255, 0.05) 0%, rgba(255,255,255, 0.05) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 18% 9%, rgba(255,255,255, 0.05) 0%, rgba(255,255,255, 0.05) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 85% 69%, rgba(255,255,255, 0.11) 0%, rgba(255,255,255, 0.11) 4%,transparent 4%, transparent 96%),radial-gradient(circle at 55% 7%, rgba(255,255,255, 0.11) 0%, rgba(255,255,255, 0.11) 4%,transparent 4%, transparent 96%),radial-gradient(circle at 69% 69%, rgba(255,255,255, 0.11) 0%, rgba(255,255,255, 0.11) 4%,transparent 4%, transparent 96%),radial-gradient(circle at 68% 60%, rgba(255,255,255, 0.11) 0%, rgba(255,255,255, 0.11) 4%,transparent 4%, transparent 96%),linear-gradient(135deg, rgb(2,5,34),rgb(21,126,133));
    color: #fff; /* Set text color to white */
}


/* Centers the table on the page */
table {
    width: 75%;
    /* padding: 0 10px 0 145px; */
    margin: 1rem auto 2rem auto; /* Changed the left and right margins to 'auto' to center the table */
    border-collapse: collapse;
}

h1{
    text-align: center;
}

th, td {
    padding: 8px;
    text-align: left;
    border: 1px solid #fff; /* Set table border color to white */
}

th {
    background-color: rgba(0, 0, 0, 0.5); /* Set header background color */
}

/* Adjust styles for edit and delete links */
a {
    color: #fff; /* Set link color to white */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Add the following CSS styles to your career.css file to make the table responsive */
/* Add the following CSS styles to your career.css file to make the table responsive for screens with a width between 320 and 768 pixels */


@media screen and (max-width: 600px)  {
    table {
        width: 100%;
        border: none;
    }
    tr{
      border-bottom: 3px solid #ddd;
      display: block;
      margin-bottom: .625em;
    }
     td {
      border-bottom: 1px solid #ddd;
      display: block;
      font-size: .8em;
      text-align: right;
    }

    td::before {
      /*
      * aria-label has no advantage, it won't be read inside a table
      content: attr(aria-label);
      */
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
    }

    td:last-child {
      border-bottom: 0;
    }

    th {
      display: none;
    }

    tr:nth-child(even) {
        background-color: rgba(0, 0, 0, 0.1);
    }

    /* Hide table headers on small screens */
    thead {
        display: none;
    }

    /* Create a new header row for small screens */
    tbody tr:first-child {
        display: none;
        background-color: rgba(0, 0, 0, 0.5);
        border-bottom: 1px solid #fff;
    }

    /* Move table headers into the new header row for small screens */
    tbody tr:first-child th {
        display: block;
        padding: 8px;
        text-align: left;
        border: none;
        background-color: rgba(0, 0, 0, 0.5);
        border-bottom: 1px solid #fff;
    }
}

/* Add the following CSS styles to your career.css file */

/* Adjust styles for edit and delete buttons */
.edit-btn {
    display: inline-block;
    padding: 6px 12px;
    margin-right: 5px;
    border: 1px solid #fff;
    border-radius: 4px;
    background-color: transparent;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.delete-btn{
  display: inline-block;
    padding: 6px 12px;
    margin-right: 5px;
    border: 1px solid #fff;
    border-radius: 4px;
    background-color: transparent;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.edit-btn:hover {
    background-color: #51c4bd;
    border-color: #51c4bd;
    color: #fff;
    text-decoration: none;
}

.delete-btn:hover {
  background-color: red;
  border-color: #51c4bd;
  color: #fff;
  text-decoration: none;
}

       





.login-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
  }
  
  .login-container h2,
  .login-container h3 {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.3s ease;
  }
  
  .login-container h2:hover,
  .login-container h3:hover {
    text-decoration-color: #51c4bd;
  }
  
  
  
  
  .login_Card {
    /* background-color: transparent;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: inline-block;
    border: 1px solid #51c4bd;
    transition: border-color 0.3s ease;
    width: 25rem; */
    user-select:none;
    max-width: 300px;
    margin: 5rem auto;
    border: 1px solid #ffffff22;
    background-color: #282c34;
    background: linear-gradient(0deg, rgba(40,44,52,1) 0%, rgba(17,0,32,.5) 100%);
    box-shadow: 0 7px 20px 5px #00000088;
    border-radius: .7rem;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    overflow: hidden;
    transition: .5s all;
  }
  
  .login_Card:hover {
    border-color: #51c4bd;
  }
  
  .login_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px; /* Added padding */
  }
  
  .login_form label {
    margin-bottom: 8px;
    color: #51c4bd;
  }
  
  .login_form input,
  .login_form button,
  .login_form textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 16px;
    border: 1px solid #51c4bd;
    border-radius: 6px;
    background-color: transparent;
    color: #fff;
    resize: none;
  }
  
  .login_form button[type="submit"] {
    background-color: #51c4bd;
    color: #fff;
    border: none;
    cursor: pointer;
    width: 6rem;
    transition: background-color 0.3s ease; /* Added transition */
  }
  
  .login_form button[type="submit"]:hover {
    background-color: #20828c;
  }
  
  /* Added hover effect for form border */
  .login_Card:hover .Job_form {
    border-color: #51c4bd;
  }
  
  
  /* blog add post css code  */

  
  .blog_Card {
    user-select:none;
    max-width: 300px;
    margin: 5rem auto;
    border: 1px solid #ffffff22;
    background-color: #282c34;
    background: linear-gradient(0deg, rgba(40,44,52,1) 0%, rgba(17,0,32,.5) 100%);
    box-shadow: 0 7px 20px 5px #00000088;
    border-radius: .7rem;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    overflow: hidden;
    transition: .5s all;
  }
  
  .blog_Card:hover {
    border-color: #51c4bd;
  }
  
  .blog_Card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px; /* Added padding */
  }
  
  
  /* Added hover effect for form border */
  .blog_Card:hover  {
    border-color: #51c4bd;
  }
  

  .blog_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px; /* Added padding */
  }
  
  .blog_form label {
    margin-bottom: 8px;
    color: #51c4bd;
  }
  
  .blog_form input,
  .blog_form button,
  .blog_form textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 16px;
    border: 1px solid #51c4bd;
    border-radius: 6px;
    background-color: transparent;
    color: #fff;
    resize: none;
  }
  
  .blog_form input[type="submit"] {
    background-color: #51c4bd;
    color: #fff;
    border: none;
    cursor: pointer;
    width: 6rem;
    transition: background-color 0.3s ease; /* Added transition */
  }
  
  .blog_form input[type="submit"]:hover {
    background-color: #20828c;
  }

  .blog-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
  }
  
  .blog-container h2,
  .blog-container h3 {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.3s ease;
  }
  
  .blog-container h2:hover,
  .blog-container h3:hover {
    text-decoration-color: #51c4bd;
  }