body {
    background: black;
    color: #ccc;
}

h1 {
    color: #ccc;
    max-width: 45rem;
    margin: auto;
    padding-top: 10px;
    padding-inline: 1rem;
}

.intro {

    max-width: 45rem;
    margin: auto;
    background: #222;
    padding: .7rem;
    border-radius: 1rem;
}

.button-ish {
    asoutline: .5px solid #679dbf;
    apadding: .3rem .5rem;
    border-radius: .5rem;
    margin-inline: .2rem;
}

.grid {
    grid-template-columns: 1fr 1fr;
    display: grid;
    gap: 1rem; 
    margin: auto; 
    max-width: 1600px
}

.constraint-details {
    background: #111;
    color: #ccc;
    amin-height: 500px;
    padding: .5rem;
}

.puzzles-table {
    background: #111;
    min-height: 500px;
    color: #ccc;
    padding-inline: 0.5rem;
    position: relative;
}

.constraint-code {
    max-height: 340px;
    position: relative;
    max-width: calc(100vw - 1rem)
}

.puzzle-rules {
    background: #222;
    border-radius: .5rem;
    padding: .5rem 1rem;
    margin-top: .5rem;
}

#constraint-name,#puzzle-name {
    font-size:1.1rem;
}

.constraint {
    color: oklch(0.83 0.09 301.16 / 1);
    color: oklch(0.8 0.16 84.92 / 1)
}

.puzzle {
    color: oklch(0.83 0.10 194.77 / 1);
    color: oklch(0.8 0.1455 171.45);
}

.grid > * {
    border-radius: .5rem;
    background: #111;
    color: #ddd;
}

.constraint-details-placeholder,
.puzzle-details-placeholder{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 20rem;
    margin: auto;
}

tr, .clickable {
   cursor: pointer;
}

.constraint.details-label {
   color: oklch(0.7 0.16 84.92 / 1);
}

.puzzle.details-label {
   color: oklch(0.7 0.1455 171.45);
}

#puzzle-rules {
white-space: pre;
text-wrap: auto;
}

.dataTable {
    max-width: unset;
}

.table-wrapper {
    max-width: calc(100vw - 1rem);
}

.dt-search {
    text-align: right;
}

@media (max-width: 1200px) {
    .grid {
        grid-template-columns: 1fr;
    }
    .constraint-detils {
        min-height: unset
    }
    .constraint-code {
        max-height: unset;
    }
}