/*
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

::-webkit-scrollbar { display: none; }
*/

@font-face {
  font-family: 'BicrodePersonalUse';
  src: url('./fonts/bicrodepersonaluse.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

body, header, footer {
  margin:0;
  padding: 0;
}

body {
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: 'BicrodePersonalUse', 'JetBrains Mono', Arial, sans-serif;
  font-size: 50px;
  background-color: #000000;
}

p {
  font-size: 25px;
}

#content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  text-align: center;
  color: #f1f1f1;
}

#hero-bg-div
{
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#hero-bg-div video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  min-width: 100%;
  min-height: 100%;

  margin: 0;
  padding: 0;
  z-index: -2;
}

.logo
{
  position: absolute;
  left: 50%;
  top: 25%;
  width: 100%;
  transform: translate(-50%, -50%);
  animation-duration: 5.5s;
  animation-name: logo;
  overflow: hidden;
  z-index: 2;
}

.logo-arial h1 {
  font-family: Arial, Helvetica, sans-serif;
}

.logo-bicrode h1 {
  font-family: 'BicrodePersonalUse', Arial, Helvetica, sans-serif;
}

.logo-jetbrains h1 {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}


.logo-clone {
  position: absolute;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  animation-duration: 5.5s;
  animation-name: logo;
  overflow: hidden;
}

.logo-clone-1 {
  top: 35%;
}

.logo-clone-2 {
  top: 45%;
}

.subtitle-arial {
  font-family: Arial, Helvetica, sans-serif !important;
}

.ascii-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* behind content, above video */
  opacity: 0.03; /* very transparent */
  pointer-events: none;
  overflow: hidden;
}

.ascii-art pre {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1); /* JS will adjust scale */
  transform-origin: center center;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 14px; /* base size; JS scales to cover */
  line-height: 1;
  white-space: pre;
  margin: 0;
  color: #ffffff;
  text-align: left;
}

.desc {
  position: absolute;
  bottom: 15%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, 0);
  animation-duration: 5.5s;
  animation-name: desc;
  z-index: 2;
}

@keyframes logo {
  0% {  top: 50%; }
  50% { top: 50%; }
  100% { top: 25%;}
}

@keyframes desc {
  0% {   bottom: 50%; }
  50% {  bottom: 50%; }
  100% {  bottom: 15%; }
}


@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeIn2 {
  0% { opacity: 0; }
  50% {opacity: 0; }
  100% { opacity: 1;}
}
@keyframes fadeIn3 {
  0% { opacity: 0; }
  20% {opacity: 0;}
  30% {opacity: 1; color:orange;} 
  34% {opacity: 1; color:orange;}
  100% { opacity: 0.5; color:white;}
}

@keyframes slidein {
  0% {
    margin-left: 100%;
    width: 300%;
    opacity:0; 
  }
  50%{
    opacity:0; 
  }
  100%  {
    margin-left: 0%;
    width: 100%;
    opacity: 1; 
  }
}



.button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  background-color: #f96854;
  border: none;
  color: white;
  padding: 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  border-radius: 12px;
  height: auto;
  min-width: 100px;
}

.button:hover {
  background: #ddd;
  color: black;
}

/* @media all and (min-width: 800px) 
{  
  .desc
  {
    position: absolute;
    animation-duration: 5.5s;
    animation-name: desc;
  }
} */

@media all and (max-width: 800px) and (min-height: 480px)
{  
  body
  {
    font-size: 6.25vw;
  }

  p {
    font-size: 3.7vw;
  }

  .button {
    font-size: 3.5vw;
    padding:  3.5vw;
    border-radius:  2.3vw;
  }
}

@media screen and (max-height: 480px)
{  
  body
  {
    font-size: 6.25vh;
  }

  p {
    font-size: 3.7vh;
  }

  .button {
    font-size: 3.5vh;
    padding:  3.5vh;
    border-radius:  2.3vh;
  }
}