/*html{
  filter: invert(1);
}*/

.container {
  display:flex;
  flex-direction: row;
  justify-content: left;
  border: 0px solid red;
  margin-left: 50px;
}

body{
    background-image: url('bg-img-coding.png');
      background-size: 100% 100%;
}

.containerascii{
  border: 0px solid red;
}



.ascii{
  font-family:monospace; 
  white-space:pre-wrap;  
  text-align:left;
  font-size: .555vw;}

.asciihead{
  margin-left: 20px;
}


a:visited {
  color: black;
  text-decoration: none;
}

a:link { 
  color: black;
  text-decoration: none; 
  opacity: 100%;
}


.title{
    border: 0px solid blue;
    padding: 4px;
    margin-left: 20px;
    margin-right: 20px;
    font-family: "Courier";
    font-size: 10pt;
    color: white;
    opacity: 0%;
}

.title:hover{
    cursor: crosshair;
    animation-name: hover;
  animation-duration: 6s;
  animation-timing-function: ease;
  opacity: 60%;
}

@keyframes hover {
  0%   {color: green;}
  25%  {color: lightskyblue;}
  30%  {color: green;}
  75%  {color: ghostwhite;}
  90% {color: darkgreen;}
  100% {color: white;}
  from {filter: blur(4px);}
  to {filter: blur(0px);}


}

.title8{
    border: 0px solid blue;
    padding: 4px;
    margin-left: 20px;
    margin-right: 20px;
    font-family: "Courier";
    font-size: 10pt;
    color: white;
    opacity: 0%;
}

.title8:hover{
    cursor: crosshair;
    animation-name: hover;
  animation-duration: 3s;
  animation-timing-function: ease;
  opacity: 60%;
}

@keyframes hover {
  0%   {color: green;}
  25%  {color: lightskyblue;}
  30%  {color: green;}
  75%  {color: ghostwhite;}
  90% {color: darkgreen;}
  100% {color: white;}
  from {filter: blur(4px);}
  to {filter: blur(0px);}


}


.title1{
    border: 0px solid blue;
    padding: 4px;
    margin-left: 20px;
    margin-right: 20px;
    font-family: "Courier";
    font-size: 10pt;
}

.title1:hover{
    color: blue;
    cursor: crosshair;
}

.title2{
    border: 0px solid blue;
    padding: 4px;
    margin-left: 20px;
    margin-right: 20px;
    font-family: "Courier";
    font-size: 10pt;
}

.title2:hover{
    color: blue;
    cursor: crosshair;
}

.title3{
    border: 0px solid blue;
    padding: 4px;
    margin-left: 20px;
    margin-right: 20px;
    font-family: "Courier";
    font-size: 10pt;
}

.title3:hover{
    color: blue;
    cursor: crosshair;
}

.title4{
    border: 0px solid blue;
    padding: 4px;
    margin-left: 20px;
    margin-right: 20px;
    font-family: "Courier";
    font-size: 10pt;
}

.title4:hover{
    color: blue;
    cursor: crosshair;
}


.titletype{
    border: 0px solid blue;
    padding: 4px;
    margin-left: 20px;
    margin-right: 20px;
    font-family: "Courier";
    font-size: 10pt;
}

.titletype:hover{
    color: blue;
    cursor: crosshair;
}

.titlebox{
      border: 1px solid blue;
}

.apoem{
    border: 0px solid blue;
    padding: 4px;
    margin-left: 20px;
    margin-right: 20px;
    font-family: "Courier";
    font-size: 10pt;
    transition: 4s;
}

.apoem a { position:relative; }
.apoem a span {
  position:center; 
  display:none; 
  z-index:99; 
  margin: 20px;
}
.apoem a:hover span {
  padding: 50 ;
  display: block; 
  border: .5px solid black;
}


.headercontainer {
  display:flex;
  flex-direction: row;
  justify-content: left;
  border: 0px solid red;
  margin-left: 20px;
}

img{
  max-width: 50vh;
  pointer-events: none;
}


img:hover{
  pointer-events: none;
}

.apoem a:hover:after {
    content: url(image/circle.PNG); /* no need for qoutes */
    display: block;
}

p:hover{
  cursor: crosshair;
}