.pathfinder-page * {

    margin: 0;

    padding: 0;

    outline: none;

    border: none;

    text-decoration: none;

    box-sizing: border-box;

}



:root{

    --start: #2b2ff7;

    --end: #5fb0fc;

    --unexplored-path: #744714;

    --open-path: #d4b85d;

    --closed-path: #d8e2be;

    --path: #9bf776;

    --wall: #492b23;

    --grid-border: #693737;

}



.pathfinder-page {

    width: 100%;

    height: 100%;

    display: flex;

    flex-flow:column nowrap;

    justify-content: flex-start;

    align-items: stretch;

}

.navbar{

    width: 100%;

    display: flex;

    flex-flow: row wrap;

    justify-content: center;

    align-items: stretch;

    font-size: 16px;

    font-weight: bold;

    padding: 15px 0;

}

.navbar-item{

    text-align: center;

    display: flex;

    align-items: center;

    margin: 0 10px;

}

.navbar-item-caption{

    text-align: center;

    background-color: var(--closed-path);

}

.general-button{

    color: #fff;

    font-weight: inherit;

    font-size: inherit;

    padding: 0.5em 1em;

    background-color: transparent;

    transition: background-color 0.3s linear, transform 0.15s ease-out;

}

.general-button:hover{

    cursor: pointer;

}

.general-button:active{

    transform: scale(1.1);

}

.options-button:hover{

    color: var(--path);

}

.start-button{

    background-color: var(--start);

    border-radius: 50px;

    color: #fff;

    padding: 20px 40px;

}

.start-button:hover{

    background-color: var(--end);

}



.speed-container{

    margin-top: 0.2em;

    padding: 0.2em 0.5em;

}



.range-caption{

    font-size: 1em;

    display: block;

    text-align: center;

}



.custom-select {

    position: relative;

    font-size: 1em;

    background-color: transparent;

    height: 100%;

}

.custom-select:hover{

}

.custom-select select {

    font-size: inherit;

}



.select-selected:after {

    position: absolute;

    content: "";

    top: 40%;

    right: 5px;

    width: 0;

    height: 0;

    border: 6px solid transparent;

    border-color: #fff transparent transparent transparent;

}



.select-selected.select-arrow-active:after {

    border-color: transparent transparent #fff transparent;

    top: 30%;

}



.select-items div,.select-selected {

    padding: 0.5em 0 0.5em 0.3em;

    border: none;

    cursor: pointer;

}



/* Style items (options): */

.select-items {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    z-index: 99;

    text-align:left;

    border-radius: 8px;

    overflow: hidden;

    width: 220px;

}

.select-items div{

    background-color: var(--open-path);

    transition: background-color 0.3s linear;

    padding: 12px 20px;

}

/* Hide the items when the select box is closed: */

.select-hide {

    display: none;

}



.select-items div:hover, .same-as-selected {

    background-color: var(--closed-path);

}



.select-selected {

    background-color: transparent;

    border: none;

    height: 100%;

    padding: 1em 1em 1em 0.3em;

}



.slidecontainer {

    width: 100%; 

}

.slider {

    -webkit-appearance: none;  

    overflow: hidden;

    appearance: none;

    width: 100%; 

    height: 18px;

    margin-top: 5px; 

    outline: none; 

    border-radius: 15px;

}



.slider::-webkit-slider-thumb {

    -webkit-appearance: none; 

    appearance: none;

    width: 18px; 

    height: 18px; 

    border-radius: 15px;

    cursor: pointer;

    background: var(--wall);

    box-shadow: -85px 0 0 80px var(--path);

}

.slider::-moz-range-thumb {

    width: 1em;

    height: 1em;

    background: #000; 

    cursor: pointer;

}