html {   
    --background: hsl(180, 44%, 64%);
    --white: hsl(180, 30%, 89%);
    --light-gray: hsl(180, 19%, 85%);
    --dark-gray: hsl(180, 4%, 38%);
    --text: #333;
    --accent: hsl(180, 47%, 55%);
    --red: hsl(0, 35%, 79%);
    --red-hover: hsl(0, 41%, 70%);
    --blue: hsl(210, 54%, 73%);
    --blue-hover: hsl(210, 60%, 68%);
}
@media (prefers-color-scheme: dark) {
    html {     
        --background: hsl(180, 98%, 10%);
        --white: hsl(180, 30%, 5%);
        --light-gray: hsl(180, 20%, 15%);
        --dark-gray: hsl(180, 10%, 45%);
        --text: #fafafa;
        --accent: hsl(180, 96%, 19%);
        --red: hsl(0, 50%, 32%);
        --red-hover: hsl(0, 57%, 21%);
        --blue: hsl(210, 54%, 43%);
        --blue-hover: hsl(210, 61%, 30%);
    }

    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
        border-left-color: rgba(255, 255, 255, 0.5);
    }
    table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control::before, table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control::before {
        border-top-color: rgba(255, 255, 255, 0.5);
    }
    div.dt-container.dt-empty-footer tbody > tr:last-child > * {
        border-bottom-color: rgba(255, 255, 255, 0.3);
    }
    table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {
        border-bottom-color: rgba(255, 255, 255, 0.3);
    }
    div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active {
        color: rgba(255, 255, 255, 0.5) !important;
    }
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;

    background-color: var(--background);
    color: var(--text);
}

.navbar {
    position: sticky;
    background-color: var(--background);
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
}

.navbar .navbar-toggle {
    display: none;
    align-self: flex-end;
}

.navbar .navbar-menu {
    display: flex;
    justify-content: space-between;
    height: 100%;
}

.navbar .navbar-menu .navbar-start, nav .navbar-menu .navbar-end {
    display: flex;
}

.navbar-item {
    height: 2.5em;
    line-height: 2.5em;
    padding: 0 1em;
    text-decoration: none;
    color: var(--text);
    transition: background-color 250ms;
}
.navbar-item:hover {
    background-color: var(--accent);
}

@media (max-width: 719px) {
	.navbar .navbar-menu {
        display: none;
    }
    .navbar.open .navbar-menu {
        display: flex;
        flex-direction: column;
    }
    .navbar .navbar-menu .navbar-start, nav .navbar-menu .navbar-end {
        flex-direction: column;
    }
    .navbar .navbar-toggle {
        display: block;
    }
    
    .navbar-item.active {
        border-left: 2px solid var(--accent);
    }
}
@media (min-width: 720px) { 
    .navbar-item.active {
        border-bottom: 2px solid var(--accent);
    }
}

.navbar-toggle {
  height: 2.5em;
  width: 2.5em;
  position: relative;
  cursor: pointer;
}

.navbar-toggle-icon,
.navbar-toggle-icon:before,
.navbar-toggle-icon:after {
  content: '';
  position: absolute;
  height: 2px;
  width: 1.7em;
  background: white;
  transition: all .2s ease;
}

.navbar-toggle-icon {
  top: 1.25em;
  left: 0.4em;
}

.navbar-toggle-icon:before {
  top: -0.55em
}

.navbar-toggle-icon:after {
  top: 0.55em
}

.navbar.open .navbar-toggle-icon {
  background: transparent;
  transform: rotate(-135deg)
}

.navbar.open .navbar-toggle-icon:before,
.navbar.open .navbar-toggle-icon:after {
  top: 0
}

.navbar.open .navbar-toggle-icon:before {
  transform: rotate(90deg)
}

#main {
    flex-grow: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;

    padding: 3rem 1.5rem;
}

#main .container {
    text-align: center;
}

.centered {
    max-width: 600px;
    margin: auto;
}

.box {
    background-color: var(--white);
    border-radius: 6px;
    padding: 1.25rem;
}

.field:not(:last-child) {
  margin-bottom: .75rem;
}

.control {
  position: relative;
}

.input {
    width: 100%;
    padding: 0.65rem;
    border-radius: 6px;
    background-color: var(--light-gray);
    color: var(--text);
    border: 1px solid var(--dark-gray);
}

.checkbox, .radio {
    cursor: pointer;
    display: inline-block;
    line-height: 1.25;
}
.checkbox input, .radio input {
    cursor: pointer;
    accent-color: var(--accent);
}

.button {
    display: inline-block;
    background-color: var(--accent);
    border: none;
    cursor: pointer;
    color: var(--text);
    padding: 5px;
    border-radius: 6px;
    transition: background-color 250ms;
}

.button:hover {
    background-color: var(--background);
}

.submit {
    background-color: var(--blue);
    width: 100%;
    padding: 0.65rem;
}
.submit:hover {
    background-color: var(--blue-hover);
}

.notification {
    padding: 0.65rem;
    margin-bottom: .75rem;
    border-radius: 6px;
}
.danger {
    background-color: var(--red);
}
.button.danger:hover {
    background-color: var(--red-hover)
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table thead {
    border-bottom: 2px solid var(--dark-gray);
}

.table tr:not(:last-child) {
    border-bottom: 1px solid var(--dark-gray);
}

.table td, .table th {
    padding: .5em .75em;
    text-align: left;
    vertical-align: middle;
}
.table td {
    white-space: nowrap;
}