body {
    background-color: black;
    background-image: radial-gradient(rgba(0, 150, 0, 0.75), black 120%);    
    height: 100vh;
    margin: 0;
    /* padding: 2rem; */
    color: white;
    /* font: 1.3rem Inconsolata, monospace; */
    font: 1.3rem Consolas, monaco, monospace;
    font-weight: bold;
    text-shadow: 0 0 5px #C8C8C8;
    overflow: hidden;
    animation: fadeIn 1 1s ease-out;
}

body:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px);
    background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px);
    pointer-events: none;
}

:selection {
    background: #0080FF;
    text-shadow: none;
}
  
pre {
    margin: 0;
}


.container {
    display: flex;
    /* margin: 0 auto; */
    width: 100vw;
    height: 100vh;
}

.contactme {
    width: 100%;
    height: 90%;
    font-size: 1.2em;
    color: #696969;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

a {
    text-decoration: none;
    color: white;
    border-top: transparent 1px solid;
    border-bottom: transparent 1px solid;
    transition: all ease-in-out .3s;
}

a:hover {
    cursor:pointer;
    border-color: white;
}

.cursor {
    animation: fadeIn 1 .4s ease-in-out;
    animation-iteration-count:infinite;   
}

.header{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 200;
    font-size: 2em;
  }
  
#head1{
    opacity: 1;
}
  
#head1{    
    /* animation: fadeOut 1 5s ease-in-out;
    animation-iteration-count:infinite;     */
}


.light {
    position: absolute;
    width: 0px;
    background-color: white;
    box-shadow: #e9f1f1 0px 0px 20px 2px;
    opacity: 0;
    top: 100vh;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}

.x1{
    box-shadow: #008106 0px 0px 20px 2px;
    animation: goUp 4s infinite linear;
    transform: scale(1.0);
    font-size: 1em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
  
.x2{
    box-shadow: #494949 0px 0px 20px 2px;
    animation: goDown 7s infinite linear;
    transform: scale(1.6);
    font-size: 1.6em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    left: 15%;
}
  
.x3{
    box-shadow: #008106 0px 0px 20px 2px;
    animation: goUp 2.5s infinite linear;
    transform: scale(.5);
    font-size: .5em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    left: -15%;
}
  
.x4{
    box-shadow: #494949 0px 0px 20px 2px;
    animation: goDown 4.5s infinite linear;
    transform: scale(1.2);
    font-size: 1.2em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    left: -34%;
}
  
.x5{
    box-shadow: #008106 0px 0px 20px 2px;
    animation: goUp 8s infinite linear;
    transform: scale(2.2);
    font-size: 2.2em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    left: -57%;
}
  
  .x6{
    box-shadow: #494949 0px 0px 20px 2px;
    animation: goDown 3s infinite linear;
    transform: scale(.8);
    font-size: .8em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    left: -81%;
}
  
.x7{
    box-shadow: #008106 0px 0px 20px 2px;
    animation: goUp 5.3s infinite linear;
    transform: scale(3.2);
    font-size: 3.2em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    left: 37%;
}
  
.x8{
    box-shadow: #494949 0px 0px 20px 2px;
    animation: goDown 4.7s infinite linear;
    transform: scale(1.7);
    font-size: 1.7em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    left: 62%;
}
  
.x9{
    box-shadow: #008106 0px 0px 20px 2px;
    animation: goUp 4.1s infinite linear;
    transform: scale(0.9);
    font-size: 0.9em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    left: 85%;
}

@keyframes fadeIn{
    from{opacity: 0;}
    to{opacity: 1;}
}
 
@keyframes fadeOut{
    0%{opacity: 0;}
    30%{opacity: 1;}
    80%{opacity: .9;}
    100%{opacity: 0;}
}

@keyframes goUp{
    0%{top: 100vh; opacity: 0;}
    25%{opacity: 1;}
    50%{top: 0vh; opacity: .8;}
    75%{opacity: 1;}
    100%{top: -100vh; opacity: 0;}
}

@keyframes goDown{
    0%{top: -100vh; opacity: 0;}
    25%{opacity: 1;}
    50%{top: 0vh; opacity: .8;}
    75%{opacity: 1;}
    100%{top: 100vh; opacity: 0;}
}