:root {
    /* Colours */
    --laghari: #FEDA69;
    --bright: #DDDDDD;

    --slight-highlight: #FEDA6915;
    --strong-highlight: #FEDA6950;

    --solar: var(--laghari);
    --martian: #FF96BB;
    --neptunian: #89B7FF;

    --slight-solar-highlight: #FEDA6915;
    --strong-solar-highlight: #FEDA6950;

    --slight-martian-highlight: #FF96BB15;
    --strong-martian-highlight: #FF96BB50;

    --slight-neptunian-highlight: #89B7FF15;
    --strong-neptunian-highlight: #89B7FF50;

    --background: black;

    --table-scale: 1.0;

    /* Sizes */
    --day-size: calc(120px * var(--table-scale));
    --padding: 20px;
    --line-width: 1px;

    --title-size: 48px;
    --day-text-size: calc(20px * var(--table-scale));
}

* {
    background-color: black;
    color: var(--laghari);

    padding: 0px;
    margin: var(--padding);

    left: 0%;
    top: 0%;
}

.current-day.solar {
    background-color: var(--strong-solar-highlight) !important;
}

.current-day.martian {
    background-color: var(--strong-martian-highlight) !important;
}

.current-day.neptunian {
    background-color: var(--strong-neptunian-highlight) !important;
}

.slider-label {
    margin: 0px;
    display: inline-block;
    vertical-align: super;

    font-size: 18px;
    line-height: 18px;
}

.slider {
    display: inline-block;
    vertical-align: bottom;

    -webkit-appearance: none;
    appearance: none;

    outline: none;
    background: var(--strong-highlight);
    border-radius: 10px;

    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: var(--bright);
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: var(--bright);
    cursor: pointer;
}

.day-contents {
    /* width: 100%; */
    /* height: 100%; */

    display: inline-block;

    margin: 0px;
    left: 7.5%;
    top: 7.5%;

    text-align: left;
    vertical-align: top;
    line-height: var(--day-text-size);
    font-size: var(--day-text-size);

    background-color: transparent;

    position: relative;
}

.title {
    color: var(--laghari);
    font-size: var(--title-size);
}

.calendar-table {
    overflow: hidden;
}

table {
    border: none;
    border-collapse: collapse;
    border-color: var(--laghari);
    padding: var(--padding);

    top: calc(var(--title-size) + var(--padding) * 2);
    left: var(--padding);
}

.laghari {
    color: var(--laghari)
}

.solar {
    color: var(--solar);
}

.martian {
    color: var(--martian);
}

.neptunian {
    color: var(--neptunian);
}

th,
td {
    border: var(--line-width) solid;
    border-collapse: collapse;
}

th.solar,
td.solar {
    border-color: var(--solar);
}

th.martian,
td.martian {
    border-color: var(--martian);
}

th.neptunian,
td.neptunian {
    border-color: var(--neptunian);
}

tr:nth-child(even).solar td:nth-child(even).solar,
tr:nth-child(odd).solar td:nth-child(odd).solar {
    background-color: var(--slight-solar-highlight);
}

tr:nth-child(even).martian td:nth-child(even).martian,
tr:nth-child(odd).martian td:nth-child(odd).martian {
    background-color: var(--slight-martian-highlight);
}

tr:nth-child(even).neptunian td:nth-child(even).neptunian,
tr:nth-child(odd).neptunian td:nth-child(odd).neptunian {
    background-color: var(--slight-neptunian-highlight);
}

td {
    width: var(--day-size);
    max-width: var(--day-size);
    height: var(--day-size);
    max-height: var(--day-size);

    vertical-align: top;
}

/* Dropdowns */

/* Style The Dropdown Button */
.dropbtn {
    background-color: var(--background);

    padding: 7px 7px;
    margin: 0px;
    text-decoration: none;

    font-size: 18px;
    line-height: 18px;

    border: 1px solid var(--laghari);
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    margin: 0px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    /* background-color: var(--laghari); */
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    margin: 0px;
}

/* Links inside the dropdown */
.dropdown-content a {
    padding: 7px 7px;
    margin: 0px;

    font-size: 18px;
    line-height: 18px;

    border-top-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 0px;
    border-style: solid;
    border-color: var(--laghari);

    text-decoration: none;
    display: block;
}

.dropdown-content a:last-child {
    border-bottom-width: 1px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: var(--slight-highlight)
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: var(--slight-highlight);
}