/* All HTML and CSS by Coltron.eth 
 Fork and use freely at https://github.com/coltron-code */

/* Custom Fonts */
@font-face {
  font-family:'w95fa';
  src:url('fonts/w95fa.woff') format('woff');
  font-display:auto;
  font-style:normal;
  font-weight:700;
  color: #393939;
  }

  @font-face {
    font-family:'vt323';
    src:url('fonts/vt323.tff') format('truetype');
    font-display:auto;
    font-style:normal;
    font-weight:700;
    color: #393939;
    }

    /***** Top menu *****/

/* rotate first span */
.navbar-dark .navbar-toggler[aria-expanded="true"] span:first-of-type {
  transform: rotate(45deg) translate(6px, 6px);
}

/* hide second span */
.navbar-dark .navbar-toggler[aria-expanded="true"] span:nth-of-type(2) {
  opacity: 0;
}

/* rotate third span */
.navbar-dark .navbar-toggler[aria-expanded="true"] span:last-of-type {
  transform: rotate(-45deg) translate(5px, -5px);
}

.navbar-dark .navbar-toggler[aria-expanded="false"] span {
  transform: none;
  opacity: 1;
}

/* Stand-alone Formating */
.font-w95fa { 
      font-family: 'w95fa', sans-serif; }

.font-roboto { 
        font-family: 'roboto', sans-serif; }
        
.content-text {
    font-family: "SFMono-Regular", "Inconsolata", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

body p {
    color: #393939;  
    font-family: "SFMono-Regular", "Inconsolata", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

h1 h2 h3 {
   color: #393939;
}

.navbar {
    color: #393939
}

#index-banner-container{
    margin-top: 10%;
    margin-bottom: 20%;
}

.h1-banner{
    font-size: 82.5px;
}

.margin-std{
    margin-top: 10%;
    margin-bottom: 10%;
}

.bg-gray{
    background-color: #dedede8f;
}

.left-border {
    border-width: 0px 0px 0px 5px;
    border-style: solid;
    border-color: rgb(0, 82, 14);
}

.highlighter-red {
  background-color: rgba(247, 142, 85, .4);
}
.highlighter-blue {
background-color: rgba(0, 146, 243, 0.4)
}





/* glitch effect 
  .glitch{
    color:black; // #33ff33
    font-size:76px;
    position:relative;
    width:100px;
    margin:0 auto;
  }
  
   // defunct
  .glitch-p{
    color:black;
    font-size:12px;
    position:relative;
    width:100px;
    margin:0 auto;
  }
    
  @keyframes noise-anim{
    $steps:20;
    @for $i from 0 through $steps{
      #{percentage($i*(1/$steps))}{
        clip:rect(random(100)+px,9999px,random(100)+px,0);
      }
    }
  }
  .glitch:after{
    content:attr(data-text);
    position:absolute;
    left:2px;
    text-shadow:-2px 0 white;
    top:0;
    color:black; // #33ff33
    background:white;
    overflow:hidden;
    clip:rect(0, 900px,0,0); 
    animation:noise-anim 12s infinite linear alternate-reverse;
  }
  
  @keyframes noise-anim-2{
    $steps:5;
    @for $i from 0 through $steps{
      #{percentage($i*(1/$steps))}{
        clip:rect(random(100)+px,9999px,random(100)+px,0);
      }
    }
  }
  .glitch:before{
    content:attr(data-text);
    position:absolute;
    left:-2px;
    text-shadow:1px 0 black; 
    top:0;
    color:black; // #33ff33
    background:white; 
    overflow:hidden;
    clip:rect(0,900px,0,0); 
    animation:noise-anim-2 12s infinite linear alternate-reverse;
    }
    }
*/
/* Dark Mode Toggler
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  .switch input {
    display: none;
  }
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    border-radius: 34px;
    transition: .4s;
  }
  .slider:before {
    content: "";
    position: absolute;
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background: #fff;
    border-radius: 50%;
    transition: .4s;
  }
  input:checked + .slider {
    background: #b892ff;
  }
  input:checked + .slider:before {
    transform: translateX(26px);
  }

// Dark Mode Formtatting 
.dark-mode body{
    background: #0b0a14;
  }
.dark-mode h1 h2 h3 p ul li {
    color: #eaf7e9;
  }
*/