html, body, .block {
  height: 100vh;
}

nav ul li a:hover, nav ul li a.active {
  background-color: rgba(0, 0, 0, .1);
}

/* Class for when element is above threshold */
.pin-top {
  position: relative;
}

/* Class for when element is below threshold */
.pin-bottom {
  position: relative;
}

/* Class for when element is pinned */
.pinned {
  position: fixed !important;
}

#code-container{
  background: rgb(9 13 18 / 94%);
  padding: .5rem;
  border: 2px solid white;
  border-radius: .2rem;
  max-width: 100%;
}

#canvas{
  position: absolute;
  height: calc(100% - 64px);
  width: 100%;
  filter: blur(0px);
}

.gradient-black-to-white {
        background: #000000;
    background: -webkit-linear-gradient(
181deg
, rgb(0 0 0), #e0e0e0) !important;
    background: linear-gradient(
180deg
, #000000, #fafafa) !important;
}

#img-header{
  max-width: 100%;
  max-height: 100vh;
}

#info/*, #contact*/{
  min-height: 100%;
}

#header, #nav-info, #nav-header, #info, #canvas, #nav-info-2{
  background: #0a0b0b !important;
}

#data-container-header{
  position: relative;
  height: calc(100vh - 64px);
  width: 100%;
}

.page-footer{
  padding-top: 0 !important;
}

#demo{
  width: 100%;
}

@font-face {
  font-family: redCode;
  src: url(../fonts/BPmono/BPmono.ttf);
}

.font-code{
  font-family: redCode !important;
}

.code{
  font-family: redCode !important;
  font-size: 1.3rem;
  font-weight: bold;
}

.btn-back{
  text-transform: none !important; 
  font-size: 1.5rem !important;
  margin-top: 15px;
  opacity: 0;
  transition: opacity 1s ease-out;
}

.display{
  opacity: 100 !important;
}

@media only screen and (max-width: 600px){
  .code{
    font-size: .9rem !important;
  }
  #demo{
    padding: .5rem;
  }

  #text-info{
    font-size: 1.1rem !important;
    padding: 2rem !important;
  }

  .info-card-text{
    font-size: .9rem !important; 
  }

  #chart-data-analysis{
    height: 100px !important;
  }
}

.square{
  /*border: 1px solid white;*/
}

.neon{
  box-shadow: 0px 0px 10px 2px #006cff !important;
}

#particles-js{
  position: absolute;
  height: 100%;
  width: 100%;
  filter: blur(2px);
}

#code-container{
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}
.red-text-code{
  color: #a90b4d !important;
}
.white-text-code{
  color: #b6b1b1 !important;
}
.blue-text-code{
  color: #0e86a3 !important;
}
.yellow-text-code{
  color: #e5c56d !important;
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}
#chart-data-analysis{
  filter: blur(0px);
}
#text-info{
            padding: 5rem;
            font-size: 1.5rem;
            text-align: center;
            font-family: redCode;
          }
          .info-card-title{
            font-size: 3rem;
            margin: 2rem;
            font-family: redCode;
            text-align: center;
            display: grid;
          }

          .info-card-text{
            font-size: 1.1rem;
            font-family: redCode;
            text-align: center;
            display: grid;
          }

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #0a0b0b;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: #151717;
  transition: background-color 3s ease;
  border-radius: .2rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #1b1f1f;
  cursor: pointer;
}

.info-text-big{
  font-size: 17px;
}

.divider-right{
  border-right: 1px solid #ccc;
}

.info-row{
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
  padding-left: 8rem;
  padding-right: 8rem;
}