/* B A S I C S
================================================== */
/* Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
    --txtColor: #dbd5d5;
    --boxColor: #7c7676;
    --bgColor : #575456; 

    --fsH1: 4.0rem;
    --fsH2: 3.6rem;
    --fsH3: 3.0rem;
    --fsH4: 2.4rem;
    --fsH5: 1.8rem;
    --fsH6: 1.5rem;
    --fsP : 1.2rem;

    --smaller : 90%;
}
/* Document
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html { font-size: 62.5%; }
body {
    font-size: 1.5em;
    line-height: 1.6;
    font-weight: 500;
    font-family: 'Courier New', Courier, monospace, "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: justify;
    background-color: var(--bgColor);
    color: var(--txtColor); }
/* Debug
–––––––––––––––––––––––––––––––––––––––––––––––––– */



/* P O P U P
================================================== */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.75); /* Black w/ opacity */ 
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */ }



/* L A Y O U T
================================================== */
/* Container
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
    position: relative;
    width: 95%;
    max-width: 960px;
    margin: 25px auto;
    padding: 20px;
    box-sizing: border-box; 
    /*background-color: #726b70;*/
    opacity: .96; }
@media (min-width: 500px) {
    .container {
        width: 85%; } }
/* Row
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.row {
    margin: 25px auto 0%;
    width: 100%; }
.row.nomargin {
    margin: 0% auto 0%;
    width: 100%; }
.row.smaller { width: var(--smaller); }
/* Column
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.column {
    width: 100%;
    float: left;
    box-sizing: border-box; }

@media (min-width: 500px) {
    .column {
        margin-left: 4%;}
    .column:first-child {
        margin-left: 0; }
    
    .one.column     { width: 4.66666666667%; }
    .two.column     { width: 13.3333333333%; }
    .three.column   { width: 22%;            }
    .four.column    { width: 30.6666666667%; }
    .five.column    { width: 39.3333333333%; }
    .six.column     { width: 48%;            }
    .seven.column   { width: 56.6666666667%; }
    .eight.column   { width: 65.3333333333%; }
    .nine.column    { width: 74.0%;          }
    .ten.column     { width: 82.6666666667%; }
    .eleven.column  { width: 91.3333333333%; }
    .twelve.column  { width: 100%; margin-left: 0; }
    /* Offsets */
    .offset-by-one.column     { margin-left: 8.66666666667%; }
    .offset-by-two.column     { margin-left: 17.3333333333%; }
    .offset-by-three.column   { margin-left: 26%;            }
    .offset-by-four.column    { margin-left: 34.6666666667%; }
    .offset-by-five.column    { margin-left: 43.3333333333%; }
    .offset-by-six.column     { margin-left: 52%;            }
    .offset-by-seven.column   { margin-left: 60.6666666667%; }
    .offset-by-eight.column   { margin-left: 69.3333333333%; }
    .offset-by-nine.column    { margin-left: 78.0%;          }
    .offset-by-ten.column     { margin-left: 86.6666666667%; }
    .offset-by-eleven.column  { margin-left: 95.3333333333%; }
    .column ~ .offset-by-one.column     { margin-left: 12.66666666667%; }
    .column ~ .offset-by-two.column     { margin-left: 21.3333333333%;  }
    .column ~ .offset-by-three.column   { margin-left: 30%;             }
    .column ~ .offset-by-four.column    { margin-left: 38.6666666667%;  }
    .column ~ .offset-by-five.column    { margin-left: 47.3333333333%;  }
    .column ~ .offset-by-six.column     { margin-left: 56%;             }
    .column ~ .offset-by-seven.column   { margin-left: 64.6666666667%;  }
    .column ~ .offset-by-eight.column   { margin-left: 73.3333333333%;  }
    .column ~ .offset-by-nine.column    { margin-left: 82.0%;           }
    .column ~ .offset-by-ten.column     { margin-left: 90.6666666667%;  }
}
.static .column {
    margin-left: 4%;}
.static .column:first-child {
    margin-left: 0; }

.static .one.column     { width: 4.66666666667%; }
.static .two.column     { width: 13.3333333333%; }
.static .three.column   { width: 22%;            }
.static .four.column    { width: 30.6666666667%; }
.static .five.column    { width: 39.3333333333%; }
.static .six.column     { width: 48%;            }
.static .seven.column   { width: 56.6666666667%; }
.static .eight.column   { width: 65.3333333333%; }
.static .nine.column    { width: 74.0%;          }
.static .ten.column     { width: 82.6666666667%; }
.static .eleven.column  { width: 91.3333333333%; }
.static .twelve.column  { width: 100%; margin-left: 0; }
/* Offsets */
.static .offset-by-one.column     { margin-left: 8.66666666667%; }
.static .offset-by-two.column     { margin-left: 17.3333333333%; }
.static .offset-by-three.column   { margin-left: 26%;            }
.static .offset-by-four.column    { margin-left: 34.6666666667%; }
.static .offset-by-five.column    { margin-left: 43.3333333333%; }
.static .offset-by-six.column     { margin-left: 52%;            }
.static .offset-by-seven.column   { margin-left: 60.6666666667%; }
.static .offset-by-eight.column   { margin-left: 69.3333333333%; }
.static .offset-by-nine.column    { margin-left: 78.0%;          }
.static .offset-by-ten.column     { margin-left: 86.6666666667%; }
.static .offset-by-eleven.column  { margin-left: 95.3333333333%; }
.static .column ~ .offset-by-one.column     { margin-left: 12.66666666667%; }
.static .column ~ .offset-by-two.column     { margin-left: 21.3333333333%;  }
.static .column ~ .offset-by-three.column   { margin-left: 30%;             }
.static .column ~ .offset-by-four.column    { margin-left: 38.6666666667%;  }
.static .column ~ .offset-by-five.column    { margin-left: 47.3333333333%;  }
.static .column ~ .offset-by-six.column     { margin-left: 56%;             }
.static .column ~ .offset-by-seven.column   { margin-left: 64.6666666667%;  }
.static .column ~ .offset-by-eight.column   { margin-left: 73.3333333333%;  }
.static .column ~ .offset-by-nine.column    { margin-left: 82.0%;           }
.static .column ~ .offset-by-ten.column     { margin-left: 90.6666666667%;  }
/* Tabs
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.tab { 
    cursor: pointer; 
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */ }

.tab.purple { background-color: #555;  }
.tab.red    { background-color: #555; }
.tab.orange { background-color: #555; }
.tab.yellow { background-color: #555; }
.tab.green  { background-color: #555; }
.tab.blue   { background-color: #555; }

.tab.purple:hover { background-color: #bdb2ff; color:#555 !important; }
.tab.red:hover    { background-color: #ffadad; color:#555 !important; }
.tab.orange:hover { background-color: #ffd6a5; color:#555 !important; }
.tab.yellow:hover { background-color: #fdffb6; color:#555 !important; }
.tab.green:hover  { background-color: #caffbf; color:#555 !important; }
.tab.blue:hover   { background-color: #a0c4ff; color:#555 !important; }

.tab.purple.active { background-color: #bdb2ff; color:#555 !important; }
.tab.red.active    { background-color: #ffadad; color:#555 !important; }
.tab.orange.active { background-color: #ffd6a5; color:#555 !important; }
.tab.yellow.active { background-color: #fdffb6; color:#555 !important; }
.tab.green.active  { background-color: #caffbf; color:#555 !important; }
.tab.blue.active   { background-color: #a0c4ff; color:#555 !important; }
/* Box & Bar
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.box {
    border:2px solid var(--txtColor);
    border-radius: 5px;
    height: auto;
    background-color: var(--boxColor); }
hr {
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-width: 0;
    border-top: 1px solid var(--txtColor);
    border-bottom: 1px solid var(--txtColor);
    border-radius: 2px; }
hr.smaller { width: var(--smaller); }
hr.nomargin { margin: 0; }
/* Clearing ( Self Clearing Goodness )
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }



/* I C O N  ( SVG )
================================================== */
@keyframes spin-process-CCW {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}
.spinCCW {
    display: inline-block; /* Again, important for transform */
    animation: spin-process-CCW 1500ms linear infinite; /* Adjust duration and easing as needed */
}

@keyframes spin-process-CW {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spinCW {
    display: inline-block; /* Again, important for transform */
    animation: spin-process-CW 1500ms linear infinite; /* Adjust duration and easing as needed */
}

svg.icon {
    width: 1em;
    height: 1em;
    /* vertical-align: middle /* works, but -0.125em often aligns perfectly with the text baseline */
    vertical-align: -0.125em; 
    stroke: currentColor; /* Keeps your dynamic coloring intact */
    fill: none;
}



/* T Y P O G R A P H Y 
================================================== */
/* Heading
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 { width: 100%; margin: 0; font-weight: 750; }
h1 { font-size: var(--fsH1); line-height: 1.2;  letter-spacing: -.1rem;  text-align: center; }
h2 { font-size: var(--fsH2); line-height: 1.25; letter-spacing: -.1rem;  text-align: center; }
h3 { font-size: var(--fsH3); line-height: 1.3;  letter-spacing: -.1rem;  text-align: center; }
h4 { font-size: var(--fsH4); line-height: 1.35; letter-spacing: -.08rem; text-align: center; }
h5 { font-size: var(--fsH5); line-height: 1.5;  letter-spacing: -.05rem; text-align: center; }
h6 { font-size: var(--fsH6); line-height: 1.6;  letter-spacing: 0;       text-align: center; }
/* Paragraph
–––––––––––––––––––––––––––––––––––––––––––––––––– */
p { width: 100%; margin: 0; font-size: var(--fsP); text-align: justify; }
/* Link
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {       color: #1EAEDB; cursor: pointer; }
a:hover { color: #0FA0CE;   text-decoration: none; }
a:link, a:visited, a:active { text-decoration: none; }
/* Text Align
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ltxt { text-align: left; }
.ctxt { text-align: center; }
.rtxt { text-align: right; }
.jtxt { text-align: justify; }



/* M I S C   E L E M E N T S
================================================== */
/* Input
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"], */
input, textarea, select {
    width: 100%;
    height: 38px;
    padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
    background-color: #555;
    color: var(--txtColor);
    border: 1px solid var(--txtColor);
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box; }
textarea {
    height: 100px; }
input.smaller {
    width: 80%; }

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
    padding: .2rem .5rem;
    margin: 0 .2rem;
    font-size: 90%;
    white-space: nowrap;
    background: #393939;
    border: 1px solid #393939;
    border-radius: 4px; }
pre > code {
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre; }
/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table { margin: 0 auto; }
th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--txtColor); }
th:first-child, td:first-child { padding-left: 1rem;  }
th:last-child, td:last-child   { padding-right: 1rem; }
th.number, td.number { text-align: right; }