:root {
  --space-bg-color: #000;
  --space-bg-color-2: #1C1A1F;
  --space-text-color: #fff;
  --space-primary-color: #D40019;
}


/*selection color*/
::selection {
  background-color: var(--space-primary-color);
  color:white;
}

/*background image*/
body {
  font-family:'Space Mono', monospace;
  color: var(--space-text-color);
  background-color:#000;
  background-image: linear-gradient(transparent, #FF00008F), url(/assets/images/doxiie_stars.gif);
  background-size:auto;
  background-position:center;
}

.main-card {
  max-width:1000px;
  background-color: var(--space-bg-color-2);
  border-radius: 15px!important;
  overflow: hidden;
}

.nav-dots .fas:nth-child(1) {
  color: #2DE340;
}
.nav-dots .fas:nth-child(2) {
  color: #FFB800;
}
.nav-dots .fas:nth-child(3) {
  color: #D40019;
}

main {
  background-color: var(--space-bg-color);
}
header, footer, main-card {
  background-color: var(--space-bg-color-2);
}
footer > * {
  opacity: 0.5;
}

a {
  color: var(--space-primary-color);
  transition: padding-left ease .5s;
}

/*glitch hover*/
a:hover {
  color:white;
  text-shadow: 2px 1px 2px aqua, -2px -1px 2px red;
  animation-name: example;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

hr {
  border:1px dashed #D40019;
  opacity:1;
}

.linktree li a:hover {
  padding-left:10px;
}

@keyframes example {
  0%   {text-shadow: 3px 2px 2px aqua, -3px -1px 2px red;}
  25%  {text-shadow: 1px 0 2px aqua, -2px 0 2px red;}
  50%  {text-shadow: 1px -2px 2px aqua, -2px -2px 2px red;}
  75%  {text-shadow: -1px 0 2px aqua, -1px 2px 2px red;}
  100% {text-shadow: 2px 1px 2px aqua, -3px 0 2px red;}
}

.insert-shadow {
  box-shadow: 5px 5px 4px rgba(0,0,0,0.5);
}


.image-gallery a {
  text-decoration: none;
}

.image-gallery a .gallery-image {
  border: 1px solid var(--space-primary-color);
  background-size: cover;
  background-position: center;
  height: 200px; width: 200px;
}

.image-gallery a .gallery-caption {
  max-width:200px
}

.image-gallery a:hover > .gallery-image {
  border: 1px solid white;
}

.image-gallery hr {
  border: 1px solid var(--space-bg-color-2);
  opacity: 1;
}

.title {
  font-family:'Zen Dots';
  font-size:48px;
  color:var(--space-primary-color);
}
.subtitle{
  font-family:'Zen Dots'
}

.side-image {
  background-image:url(/assets/images/benry_love.png);
  background-size:cover;
  background-position:center;
  height:500px;
}