:root {
    --cyan: hsl(194, 100%, 31%);
    --light-blue: hsl(194, 100%, 70%);
    --light-gray: #ddd;
    --gray: #ccc;
    --dark-gray: #bbb;
    --light-black: #222;
    --black: #111;
}

body {
    background-color: var(--cyan);
    margin: 0;
}

h1, h3, p, th {
    color: var(--light-gray);
}

.container {
    max-width: 1000px;
    padding: 1.5rem;
    display: block;
    margin: auto;
}

ul {
    padding-left: 0;
}

li {
    display: inline;
    margin: 20px;
}

a {
    color: var(--light-blue);
}

img {
    display: block;
    margin: auto;
}

.tab {
    border-collapse: collapse;
    width: 50%;
}

.tab, .tab td, .tab th {
    border: 2px solid var(--light-gray);
}

.tab th {
    background-color: var(--cyan);
}

.tab td {
    background-color: var(--gray);
}

.tab tr:nth-child(odd) td {
    background-color: var(--dark-gray);
}

.t2 .male {
    display: none;
}

.table{
    border-bottom: 3px solid #009879;
    border-collapse: collapse;
    width: 50%;
}

.table td, .table th {
    text-align: left;
    padding: 12px 15px;
    transition-duration: .25s;
}

.table th {
    background-color: #009879;
    color: white;
}

.table td {
    background-color: #f3f3f3;
}

.table tr:not(tr:first-child) {
    border-bottom: 2px solid #dddddd;
}

.table tr:nth-child(odd) td {
    background-color: #e3e3e3;
}

.table tr:hover td {
    color: #009879;
}

.table th:first-child {
    border-top-left-radius: 6px;
}

.table th:last-child {
    border-top-right-radius: 6px;
}