:root{
    --text-color: #dee1ed ;
    --bg-color: #030849;
    --primary-btn-color: #66a5cc;
    --secondary-btn-color: #2a2b56;
    --border-active-color: #40e3dd;
    --navbar-cyan: #00ffd2;
    --accent-color: #f9d676;
    --header-color: rgb(14, 14, 83);
/* goldenrod */
    --scrollbar-width:10px;
    --bodyBorderW: 0px;
    --navBarItemH: 0px;
}

@media (pointer: coarse){
    /* when on mobile devices */
    :root{
        --scrollbar-width:0px;
    }
}
/* https://realtimecolors.com/?colors=dee1ed-030849-66a5cc-1e2057-f9d676 */
/* 
font-family: 'Chakra Petch', sans-serif;
font-family: 'Major Mono Display', monospace;
font-family: 'Nixie One', cursive;
font-family: 'Quicksand', sans-serif; 
*/
*{
    border: 0px solid ;
}

::selection {
    background: var(--accent-color);
    color:  var(--bg-color);
}

html,body{
    background-color: var(--bg-color);
    position: relative;
    margin: 0;
    color:var(--text-color);

    font-family: 'Chakra Petch', sans-serif;
    font-weight: lighter;
    text-align: justify;
}

body{
    --border-width: var(--bodyBorderW);
    border: var(--border-width) solid var(--accent-color);
    min-height: calc(100vh - 2 * var(--border-width));
    width: calc(100vw - var(--scrollbar-width) - 2 * var(--border-width));
}
/* ------------------------------------------------ */
.contactMethods{
    color: var(--text-color);
    text-decoration: none;
    text-transform: capitalize;
}
footer{
    text-align: center;
    background-color: var(--secondary-btn-color);
    padding: 1rem 0 ;
    margin: 0;
}
/* ------------------------------------------------ */
/* ScrollBar */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
}
/* Track */
::-webkit-scrollbar-track {
    background: var(--secondary-btn-color);
}
/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: calc(var(--scrollbar-width) / 2);
    background: var(--accent-color);
}
  /* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}