body {
    color: #999999;
    background: #010101;
    padding-top: 1cm;
}

h1, h2, h3 {
    color: whitesmoke;
    font-weight: bolder;
}

table {
    width: 100%;
}

thead {
    color: lightgrey;
    font-weight: bold;
}

th {
    padding-top: 0.325cm;
    padding-bottom: 0.325cm;
}

th:not(:last-child) {
    padding-right: 1cm;
}

th:hover {
    color: grey;
    cursor: pointer;
}


td {
    background: #171717;
    background-clip: padding-box;
    padding-top: 0.25cm;
    padding-bottom: 0.25cm;
}

tr:not(:last-child) td {
    border-bottom: 0.5mm solid #2C2C2C;
}

td:first-child, th:first-child {
    padding-left: 0.75cm;
}

tr:first-child td:first-child {
    border-top-left-radius: 5mm;
}

tr:last-child td:first-child {
    border-bottom-left-radius: 5mm;
}

tr:first-child td:last-child {
    border-top-right-radius: 5mm;
}

tr:last-child td:last-child {
    border-bottom-right-radius: 5mm;
}

th button, td button {
    color: whitesmoke !important;
    font-size: large !important;
    font-weight: bolder !important;
}

td button:hover {
    color: grey !important;
}

@media (max-width: 992px) {
    #table-col {
        margin-top: 1cm;
    }
}

input {
    border-color: #999999 !important;
    padding: 0.325cm 0.75cm !important;
    background-color: #171717 !important;
    color: #999999 !important;
}

::placeholder {
    color: #2C2C2C !important;
    font-style: italic;
    opacity: 1;
}

#table-col, #form-col, .contact-row {
    position: relative;
}

.slide-in-left, .slide-in-right {
    animation-duration: 1s;
    animation-timing-function: ease-out;
}

.slide-in-left {
    animation-name: slide-in-left;
}

@keyframes slide-in-left {
    from {
        right: 50vw;
    }
    
    to {
      right: 0;
    }
}

.slide-in-right {
    animation-name: slide-in-right;
}

@keyframes slide-in-right {
    from {
        left: 50vw;
    }
    
    to {
        left: 0;
    }
}

.slide-out-left, .slide-out-right {
    animation-duration: 0.5s;
    animation-timing-function: linear;
}

.slide-out-left {
    animation-name: slide-out-left;
}

@keyframes slide-out-left {
    from {
        right: 0;
    }
    
    to {
      right: 50vw;
    }
}


.slide-out-right {
    animation-name: slide-out-right;
}

@keyframes slide-out-right {
    from {
        left: 0;
    }
    
    to {
      left: 50vw;
    }
}