@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

body {
    margin: 0;
    padding: 0;
    background-color: white;
    font-family: "Poppins";
    overflow-x: hidden;
}



.header {
    background-color: white;
    padding: clamp(10px, 2vw, 20px);
}

.header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(10px, 2vw, 30px);
    flex-wrap: wrap;
}

.nav-links {
    display: flex;
    gap: clamp(10px, 2vw, 25px);
    flex-wrap: wrap;
    justify-content: center;
}

.header nav a {
    text-decoration: none;
    color: black;
    font-size: clamp(0.8rem, 1.5vw, 1.2rem);
    white-space: nowrap;
}

.header nav img {
    width: clamp(50px, 6vw, 72px);
    height: auto;
    display: block;
}

.header a:hover {
    color: rgb(180, 180, 180);
}



.after-dark {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: clamp(20px, 4vw, 50px);

    padding: 3%;
}

.after-dark img {
    width: min(100%, 600px);

    flex: 1 1 300px;

    border-radius: 20px;
}

.after-dark h2 {
    flex: 1 1 300px;

    font-size: clamp(1rem, 2vw, 2rem);

    line-height: 1.5;

    color: black;
}



.table-container {
    width: 100%;
    overflow-x: auto;

    padding-bottom: 30px;
}

table { /*https://www.youtube.com/watch?v=lXxEm9thbiQ*/
    width: min(95%, 1400px);

    margin: auto;

    border-collapse: collapse;

    border-radius: 20px;

    overflow: hidden;

    font-size: clamp(0.8rem, 1.4vw, 1.2rem);
}

th,
td {
    padding: clamp(10px, 2vw, 20px);

    text-align: left;

    border-bottom: 1px solid #ddd;
}

th {
    background-color: #ff4242;
    color: white;
}

tr {
    background-color: #f3f3f3;
}

tr:hover {
    background-color: #fcfcfc;
}