:root{
  --bg: #161616;
  --col: beige;
}

body{
  width: 100%;
  background: var(--bg);
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* align-items: center; */
}

main{
  max-width: 720px;
  margin-top: 33vh;
  padding: 14px;
  /* white-space:pre-wrap; */
}

#console{
  color: var(--col);
}

/* Text Styles */

h1{
  font-family: 'ancient', serif;
  -webkit-font-smoothing : none;
  text-rendering: optimizeSpeed;
  text-shadow: 0 0 6px var(--col);
  font-size: 5em;
  line-height: 0.9;
  display: inline;
}

h2, h3, h4, h5, h6, p, a {
  font-family: 'victor', monospace;
  text-shadow: 0 0 5px var(--col);
  display: inline;
}

p{
  font-size: 1.2em;
  line-height: 1.8;
}

a{
  color: var(--col);
  text-decoration: underline;
  text-decoration-color: blueviolet;
  text-underline-position: under;
  transition: text-shadow 300ms linear;
  transition: color 300ms linear;
}
a:hover{
  color: blueviolet;
  text-shadow: 0 0 5px blueviolet;
}

/* Image */

.image{
  width: 100%;
  height: 720px;
  /* object-fit: contain; */
  border-radius: 10px;
  box-shadow: 0 0 10px var(--col);
}

.night-vision-effect {
  /* background-image: url(../img/chiro.jpg), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 1.7px, transparent 3px); */
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
  animation: lines 10ms linear 0s infinite alternate;
}

@keyframes lines {
  from {
    background-image: url(../img/chiro.jpg), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 1.7px, transparent 3px);
  }

  to {
    background-image: url(../img/chiro.jpg), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 3px, transparent 6px);
  }
}
/* t.js */
.t-caret{
  font-size:inherit;
  color:blueviolet;
  text-shadow: 0 0 10px blueviolet;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-bottom: 20vh;
}