a:visited, a:link {
    text-decoration: underline;
    color: #7f7f7f;
}

form {
    margin: 0;
}

input, button {
    font-family: monospace;
}

/* *********************** */
/* ****** Variables ****** */
/* *********************** */

:root {
    --title-size: 6rem;
}

/* ************************* */
/* ****** Page Layout ****** */
/* ************************* */

.page {
    display: flex; 
    flex-direction: column; /* Organizes sub elements vertically */
    width: 100%; /* Fills the page horiontally */
    height: 100%; /* Fills the page vertically */
    font-family: monospace;
}

.page_header {
    display: flex;
    flex-direction: row; /* Organizes sub elements horizontally */
    justify-content: center; /* Center horizontally (requires flex) */
    align-items: center; /* Center vertically (requires flex) */
    padding: 0px;
}

.page_header_title {
    display: flex;
    align-items: center;
    height: fit-content;
    flex-grow: 1;

    padding: 0 1rem;
    
    font-size: var(--title-size);
    color: #7f7f7f;
}

.page_header_box {
    display: flex;
    justify-content: center; /* Center horizontally (requires flex) */
    align-items: center; /* Center vertically (requires flex) */
    border-radius: 50%; /* Make circular */

    width: var(--title-size);
    height: var(--title-size);

    margin: 0.25rem;

    background-color: white;
    /* border: 1px solid red; */
}

.page_header_box_button {
    cursor: pointer;

    /* Disable highlighting/selection when clicking */
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -ms-user-select: none;
    
}

.page_canvas {
    display: flex;
    flex-grow: 1; /* Fill the remaining space (requires flex) */
    justify-content: center; /* Center horizontally (requires flex) */
    align-items: center; /* Center vertically (requires flex) */
}

.page_footer {
    display: flex;
    justify-content: center; /* Center horizontally (requires flex) */
    align-items: center; /* Center vertically (requires flex) */

    font-size: 1.25rem;

    color: #7f7f7f;
}

/* ************************** */
/* ****** Board Layout ****** */
/* ************************** */

.board {

}

.board_center {
    position: relative; /* Allow sub elements to be positioned relative to this element */
    width: 0px; /* Shrink to single point */
    height: 0px; /* Shrink to single point */
}

.board_entry {
    position: absolute; /* Relate position to the parent div board_center */
    transform: translate(-50%, -50%);
    text-align: center; /* Center align text in input */
    text-transform: uppercase; /* Convert all characters to uppercase on entry*/
    background-color: transparent; /* Remove background */
    border: none;
    border-radius: 50%;
    z-index: 3;
    color: #7f7f7f;
    padding: 0;
    outline: none;
    user-select: none;
    cursor: text;
}

.board_rule {
    position: absolute; /* Relate position to the parent div */
    display: flex;
    justify-content: center; 
    align-items: center;
    width: max-content; /* Needed for sizing on Firefox*/
    cursor: pointer;
    text-underline-offset: 0.5rem;
}

.board_rule_x {
    transform-origin: 0% 50%;
}

.board_rule_y {
    right: 0;
}

.board_rule_z{
    transform-origin: 0% 50%;
}

.hexagon_center {
    position: absolute; /* Allow sub elements to be positioned relative to this element */
    width: 0px; /* Shrink to single point */
    height: 0px; /* Shrink to single point */
}

.hexagon {
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.highlighted-cell {
    border: 1px dashed;
    border-color: rgba(0, 0, 0, 0.5);
    border-radius: 100%;
}

.rule {
    position: absolute;
    display: inline-block;
    white-space: nowrap;
}

.colorblind .match {
    color: #5D3A9B;
    font-weight: bold;
}

.colorblind .nomatch {
    color: #E66100;
}

.match {
    color: #484;
    font-weight: bold;
}

.nomatch {
    color: #F44;
}

.highlighted {
    text-decoration: underline;
}

/* ***************************** */
/* ****** Settings Layout ****** */
/* ***************************** */

#settings_close_button {
    color: none;
    background-color: white;
    display: none;
}

#settings_overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.settings_element {
    display: flex;
    justify-content: space-between;
    padding: 0.1rem 0;

    color: #7f7f7f;
}

#settings_overlay_box {
    margin: auto;
    width: 70vw;
    padding: 2rem;
    border: 3px solid rgb(198, 198, 198);
    border-radius: 2rem;
    background-color: white;
    z-index: 11;
}

.settings_element_left {

}

.settings_element_center {
    display: flex;
    flex-grow: 1; /* Fill the remaining bottom space (requires flex) */
    justify-content: center; /* Center horizontally (requires flex) */
    align-items: center; /* Center vertically (requires flex) */
    font-size: 3rem;
    color: #7f7f7f;
}

.settings_element_title {
    font-size: 1.5rem;
    color: #7f7f7f;
}

.settings_element_description {
    font-size: 1rem;
    color: #7f7f7f;
}

.settings_element_right {
    display: flex;
    align-items: center; /* Center vertically (requires flex) */
    flex-shrink: 0;
    font-size: 1.5rem;
    color: #7f7f7f;
}

.settings_number_input {
    text-align: right;
    font-size: 1.5rem;
    width: 6rem;
    outline: none;
    border: none;
    color: #7f7f7f;
    border-bottom: 2px solid #7f7f7f;
}

.settings_switch {
    position: relative;
    display: inline-block;
    width: 4rem;
    height: 2rem;
}

.settings_switch input {
    visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.settings_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 0.3s;
    border-radius: 1.5rem;
    background-color: #ccc;   
}

.settings_slider:before {
    position: absolute;
    content: "";
    height: 1.5rem;
    width: 1.5rem;
    left: 0.25rem;
    bottom: 0.25rem;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .settings_slider {
    background-color: #7f7f7f;
}

input:checked + .settings_slider:before {
    transform: translate(2rem);
}

.settings_element_button {
    border: none;
    color: #7f7f7f;
    padding: 0.75rem;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 0.75rem;
    font-size:inherit;
}

.settings_element_button:active {
    background-color: rgb(165, 165, 165);
}

/* ******************************* */
/* ****** Completion Layout ****** */
/* ******************************* */

#completion_overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

#completion_overlay_box {
    margin: auto;
    
    z-index: 11;
    padding: 1rem;
    border-radius: 2rem;

    border: 3px solid rgb(198, 198, 198);
    background-color: white;
}

.completion_element_center {
    display: flex;
    flex-grow: 1; /* Fill the remaining bottom space (requires flex) */
    justify-content: center; /* Center horizontally (requires flex) */
    align-items: center; /* Center vertically (requires flex) */
    
    font-size: 3rem;
    margin: 0.25rem 1rem;

    color: #7f7f7f;
}

.completion_element_button {
    border: none;
    padding: 0.75rem;
    cursor: pointer;
    border-radius: 1rem;
    font-size:inherit;
    
    color: #7f7f7f;
    background-color: #ccc;
}

/* ************************* */
/* ****** Info Layout ****** */
/* ************************* */

#info_overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.info_element {
    display: flex;
    justify-content: space-between;
    padding: 0 0;

    color: #7f7f7f;
}

#info_overlay_box {
    margin: auto;
    padding: 1rem 2rem;
    border: 3px solid rgb(198, 198, 198);
    border-radius: 2rem;
    background-color: white;
    z-index: 11;
}

.info_element_left {

}

.info_element_center {
    display: flex;
    flex-grow: 1; /* Fill the remaining bottom space (requires flex) */
    justify-content: center; /* Center horizontally (requires flex) */
    align-items: center; /* Center vertically (requires flex) */
    font-size: 3rem;
    color: #7f7f7f;
}

.info_element_title {
    text-decoration: underline;
    font-size: 1.75rem;
    color: #7f7f7f;
}

.info_element_description {
    font-size: 1rem;
    width: 80ch;
    color: #7f7f7f;
}

.info_element_right {
    display: flex;
    align-items: center; /* Center vertically (requires flex) */
    flex-shrink: 0;
    font-size: 1.5rem;
    color: #7f7f7f;
}

.info_element_button {
    border: none;
    padding: 0.75rem;
    cursor: pointer;
    border-radius: 1rem;
    font-size:inherit;
    
    color: #7f7f7f;
    background-color: #ccc;
}

/* *************************** */
/* ******** Hint Mode ******** */
/* *************************** */

.hint_toggle_button {
    border-radius: 50%;
    cursor: pointer;
    
    height: var(--title-size);

    background-color: white;
}

.hint_toggle_switch {
    position: relative;
    display: inline-block;

    width: 60px;
    height: 30px;
    top: 1vw;
    right: 1vw;
}

.hint_toggle_switch input {
    visibility: hidden;
    z-index: 10;

    width: 100%;
    height: 100%;
}

.live_hint_counter {
    font-size: 1.75rem;
    pointer-events: none;
    margin: auto;
    z-index: 3;

    position: absolute;
    
    color: white;
}