/*  The userSelect property sets or returns whether the text of an element can be selected or not.*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax *//* CSS user-select Property */
}

/*  :root pseufo-class | var() function used to insert the value of a CSS variable.*/
/*  Custom properties let you create and define custom variables that can be reused, 
    simplifying complex or repetitive rules and making them easier to read and maintain.*/

/*  This is an idea of MDN web docs | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables. */
/*  HSL stands for Hue, Saturation, and Lightness. */
/*  Hue is a degree on the color wheel from 0 to 360. 
    0 (or 360) is red, 120 is green, 240 is blue.*/
    
:root {
    --hue: 33;
    --color0: hsl(calc(var(--hue) + 5), 100%, 65%);
    --color1: hsl(calc(var(--hue) + 10), 100%, 65%);
    --color2: hsl(calc(var(--hue) + 20), 100%, 65%);
    --color3: hsl(calc(var(--hue) + 30), 100% ,65%);
    --color4: hsl(calc(var(--hue) + 40), 100%, 65%);
    --color5: hsl(calc(var(--hue) + 50), 100%, 65%);
    --colorHead: #332900;
    --solid-border: 3px solid hsl(60, 27%, 50%);
    --dashed-border: 1px dashed #332900;
    --backgroundColor: hsl(62, 87%, 25%);
}

.flexBox {
    display: flex;
    display: -webkit-flex;
    align-items: center; /* Position the flex items in the center, inside the same container.*/
    justify-content: center;
    flex-flow: column nowrap; /* The "flex-direction: column;" stacks the flex items vertically (from top to bottom) */
}

body {
    font-family: Verdana, sans-serif;
    background-color: hsl(60, 28%, 84%);
    text-align: center;
}

#containerTable {
    padding: 64px 16px 16px 16px;
}

.mainTitle {
    font: normal small-caps 400 45px "Raleway", sans-serif; /* font: font-style | font-variant | font-weight | font-size/line height | font-family */
    text-transform: capitalize;
    padding-left: 10%;
    height: 77px;
}

/*  Styling table */

table {
    width: 100%;
    max-width: 960px;
    border-collapse: collapse; /* This will make the borders collapse into a single border. */
    margin-inline: auto;
}

caption,
th,
time {
    color: var(--colorHead);
}

caption {
    font-size: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 16%; /* Centered caption */
}

/*======= only by design =========*/
.time-hidden {
    width: 5%;
    font-weight: 300;
    border: none;
    visibility: hidden;
}
/*================================*/
th:not(.time-hidden) {
    height: 32px;
    border: var(--solid-border);
}

td {
    width: 15%;
    height: 64px;
    border-right: var(--solid-border);
    border-left: var(--solid-border);
}

/*  CSS Child (>) Combinator | 
    Select elements that are direct children of a specific parent.*/

/*  The CSS :not() pseudo-class matches any element that is NOT the specified element/selector.*/
.sharp td:not(.time){
    border-bottom: var(--solid-border);
}

.half td:not(.hidden-cell) {
    border-bottom: var(--dashed-border);
}

.time {
    font-weight: 300;
    font-size: 1rem;
    text-align: right;
    border: none;
    border-style: none;
    padding: 0 1rem 0 0;
}

.verticalAlignTop {
    vertical-align: top;
}

.verticalAlignBottom {
    vertical-align: bottom;
}

/*  To create an white space */
.hidden-cell {
    height: 10px;;
    border: none;
}

/*  background colors */
.available-0 {
    background-color: var(--color0);
}

.available-1 {
    background-color: var(--color1);
}

.available-2 {
    background-color: var(--color2);
}

.available-3 {
    background-color: var(--color3);
}

.available-4 {
    background-color: var(--color4);
}

.available-5 {
    background-color: var(--color5);
}

/*  tfoot */
#legend {
    text-align: center;
    color: var(--colorHead);
    font-size: 20px;
    font-weight: 300;
    border: none;
    padding-left: 15%;
    height: 64px;
}

#legend-gradient {
    border: none;
    height: 30px;
    background-image: linear-gradient(to right, 
  var(--color0) 0% 17%,
  var(--color1) 17% 34%,
  var(--color2) 34% 51%,
  var(--color3) 51% 68%,
  var(--color4) 68% 84%,
  var(--color5) 84% 100%);
}

.range-control {
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
    border: 0;
}

.specialHeight {
    height: 32px;
}

.range-control #changeHueValue {
    display: block;
    margin-inline: auto;
    border: 0;
}

/*  empty span */
.whiteSpace {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
}

/*  Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 768px) {
    #containerTable {
        padding: 32px 16px 16px 16px;
        row-gap: 32px;
    }

    .mainTitle {
        font: normal small-caps 400 35px "Raleway", sans-serif; /* font: font-style | font-variant | font-weight | font-size/line height | font-family */
        text-transform: capitalize;
        padding-left: 10%;
        height: 77px;
    }
}