/* PORTFOLIO SITE STYLING */

body {
    background-color: black;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
}

a,
p,
h1,
h2,
h3,
h4,
h5,
div,
button,
body {
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
}

.codeYellow {
    color: khaki;
}

.codeRed {
    color: #d63384;
}


/*Intro screen Animation*/
.terminalText {
    color: limegreen;
    text-shadow: 0 0 4px lime;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    border-right: 18px solid transparent;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.4rem;
}

@media (min-width: 768px) {
    .terminalText {
        font-size: 2rem;
    }
}

.line-1 {
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: typewriter 3s steps(9) 1s 1 normal both,
        blinkTextCursor 500ms steps(9) infinite normal;
}

@keyframes typewriter {
    from {
        width: 0;
    }

    50% {
        width: 5.5em;
    }

    to {
        visibility: hidden;
    }
}

@keyframes blinkTextCursor {
    from {
        border-right-color: limegreen;
    }

    to {
        border-right-color: transparent;
    }
}

@media (min-width: 768px) {
    .content-wrap {
        margin-top: 7vh;
    }
}

.shell {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0px 0px 27px -3px limegreen;
    color: white;
    z-index: 1;
    /*Remove padding from being automatically added by bootstrap*/
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
}

.main-content {
    border: 14px solid lightgreen;
    height: 100vh;
    scrollbar-width: none;
}

@media (min-width: 768px) {
    .main-content {
        border: 18px solid lightgreen;
        height: 85vh;
    }
}

/*Background File Tower Windows*/
#tower {
    position: absolute;
    /*using rgba instead of opacity to only apply to the background element, not the child elements*/
    background-color: rgba(0, 0, 0, 0.7);
    color: limegreen;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
}

#towerIntro {
    position: absolute;
    /*using rgba instead of opacity to only apply to the background element, not the child elements*/
    background-color: rgba(0, 0, 0, 0.7);
    color: limegreen;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    /*to hide towers before animation.*/
    width: 0px;
}

/*
"light" animation below has to be used "in chain" with the other animations
in order for multiple animations to work. When done under a different
class, one overrides the other. This is why they must be called under
class.
*/
@keyframes light {
    from {
        border: none;
        box-shadow: none;
    }

    to {
        border: 1px solid limegreen;
        box-shadow: 0px 0px 27px -3px limegreen;
    }
}

#tower img {
    visibility: visable;
    background-color: transparent;
    width: 100%;
    height: 99%;
    opacity: 0.4;
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: towerText 3s 6s 1 normal forwards;
}

#towerIntro img.intro {
    visibility: hidden;
    background-color: transparent;
    width: 100%;
    height: 99%;
    opacity: 0.4;
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: towerText 3s 6s 1 normal forwards;
}

@keyframes towerText {
    from {
        visibility: hidden;
    }

    to {
        visibility: visible;
    }
}

.blur {
    filter: blur(0.7px);
}

.scanLine {
    width: 100%;
    border-bottom: 0.1em solid limegreen;
    position: absolute;
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: scanLine 12s 0s infinite normal forwards;
}

@keyframes scanLine {
    from {
        display: none;
        height: 0%;
    }

    1% {
        display: block;
    }

    to {
        display: block;
        height: 100%;
    }
}

/*Menu*/
.menuTitle {
    color: lightgreen;
    font-size: 1.5rem;
}

.menuBtn {
    border: 2px solid lightgreen;
}

.menuBtn:hover {
    background-color: lightgreen;
    box-shadow: 0px 0px 12px lightgreen;
    text-shadow: 0px 0px 4px black;
    color: black;
}

.menu {
    text-align: center;
    border-top: 4px dashed lightgreen;
    border-bottom: 4px dashed lightgreen;
    padding: 1%;
}

.menu li {
    margin-top: 1%;
    margin-bottom: 1%;
    margin-left: 2%;
    margin-right: 2%;
}

.menu a {
    color: lightgreen;
    display: inline;
    text-decoration: none;
    width: 50%;
    text-shadow: 0 0 4px limegreen;
    opacity: 1;
    font-size: 1.4rem;
}

@media (min-width: 992px) {
    .menu a {
        font-size: 1.8rem;
    }
}

.menu a:hover {
    background-color: lightgreen;
    box-shadow: 0px 0px 12px lightgreen;
    text-shadow: 0px 0px 4px black;
    color: black;
}

.info {
    scrollbar-width: none;
    border: 4px double lightgreen;
}

@media (min-width: 768px) {
    .info {
        font-size: 1.2rem;
        height: 68%;
    }
}

.info::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.info img {
    margin-bottom: 30px;
}

/*links*/
#about {
    display: none;
}

#portfolio {
    display: none;
}

#resume {
    display: none;
}

#contact {
    display: none;
}

.img-responsive {
    opacity: .7;
}

.img-responsive:hover {
    opacity: 1;
}

.link {
    color: lightgreen;
    display: inline;
    padding: 0 1% 0 1%;
    text-decoration: none;
    width: 50%;
    text-shadow: 0 0 4px limegreen;
    opacity: 1;
    font-size: 1.4rem;
}

.link:hover {
    background-color: lightgreen;
    box-shadow: 0px 0px 12px lightgreen;
    text-shadow: 0px 0px 4px black;
    color: black;
}


.LHchildTower1 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    height: 67.4%;
    left: 23.3%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.LHchildTowerIntro1 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: LHchildTowerOne 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards, textShadow 1.6s infinite;
}

@keyframes LHchildTowerOne {
    from {
        width: 0%;
        height: 100%;
        left: 0%;
    }

    to {
        width: 20%;
        height: 67.4%;
        left: 23.3%;
    }
}

.LHchildTower2 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 15%;
    height: 49%;
    left: 30.4%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.LHchildTowerIntro2 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: LHchildTowerTwo 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes LHchildTowerTwo {
    from {
        width: 0%;
        height: 100%;
        left: 0%;
    }

    to {
        width: 15%;
        height: 49%;
        left: 30.4%;
    }
}

.LHchildTower3 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 13%;
    height: 37%;
    left: 34.4%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.LHchildTowerIntro3 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: LHchildTowerThree 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes LHchildTowerThree {
    from {
        width: 0%;
        height: 100%;
        left: 0%;
    }

    to {
        width: 13%;
        height: 37%;
        left: 34.4%;
    }
}

.LHchildTower4 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 11%;
    height: 29%;
    left: 37.4%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.LHchildTowerIntro4 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: LHchildTowerFour 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes LHchildTowerFour {
    from {
        width: 0%;
        height: 100%;
        left: 0%;
    }

    to {
        width: 11%;
        height: 29%;
        left: 37.4%;
    }
}

.LHchildTower5 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10%;
    height: 23%;
    left: 39.4%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.LHchildTowerIntro5 {

    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: LHchildTowerFive 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes LHchildTowerFive {
    from {
        width: 0%;
        height: 100%;
        left: 0%;
    }

    to {
        width: 10%;
        height: 23%;
        left: 39.4%;
    }
}

.LHchildTower6 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8%;
    height: 18.4%;
    left: 41.6%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.LHchildTowerIntro6 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: LHchildTowerSix 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes LHchildTowerSix {
    from {
        width: 0%;
        height: 100%;
        left: 0%;
    }

    to {
        width: 8%;
        height: 18.4%;
        left: 41.6%;
    }
}

.LHchildTower7 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6%;
    height: 15.3%;
    left: 43.4%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.LHchildTowerIntro7 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: LHchildTowerSeven 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes LHchildTowerSeven {
    from {
        width: 0%;
        height: 100%;
        left: 0%;
    }

    to {
        width: 6%;
        height: 15.3%;
        left: 43.4%;
    }
}

.LHchildTower8 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 12.3%;
    left: 45.1%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.LHchildTowerIntro8 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: LHchildTowerEight 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes LHchildTowerEight {
    from {
        width: 0%;
        height: 100%;
        left: 0%;
    }

    to {
        width: 4%;
        height: 12.3%;
        left: 45.1%;
    }
}

.LHchildTower9 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2%;
    height: 10.2%;
    left: 46.6%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.LHchildTowerIntro9 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: LHchildTowerNine 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes LHchildTowerNine {
    from {
        width: 0%;
        height: 100%;
        left: 0%;
    }

    to {
        width: 2%;
        height: 10.2%;
        left: 46.6%;
    }
}

.LHchildTower10 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2%;
    height: 8.3%;
    left: 47.1%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.LHchildTowerIntro10 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: LHchildTowerTen 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes LHchildTowerTen {
    from {
        width: 0%;
        height: 100%;
        left: 0%;
    }

    to {
        width: 2%;
        height: 8.3%;
        left: 47.1%;
    }
}

.LHchildTower11 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2%;
    height: 6.5%;
    left: 47.6%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.LHchildTowerIntro11 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: LHchildTowerEleven 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes LHchildTowerEleven {
    from {
        width: 0%;
        height: 100%;
        left: 0%;
    }

    to {
        width: 2%;
        height: 6.5%;
        left: 47.6%;
    }
}

.LHchildTower12 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.5%;
    height: 5%;
    left: 48.2%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.LHchildTowerIntro12 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: LHchildTowerTwelve 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes LHchildTowerTwelve {
    from {
        width: 0%;
        height: 100%;
        left: 0%;
    }

    to {
        width: 1.5%;
        height: 5%;
        left: 48.2%;
    }
}

.LHchildTower13 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1%;
    height: 3.7%;
    left: 48.78%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.LHchildTowerIntro13 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: LHchildTowerThirteen 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes LHchildTowerThirteen {
    from {
        width: 0%;
        height: 100%;
        left: 0%;
    }

    to {
        width: 1%;
        height: 3.7%;
        left: 48.78%;
    }
}

.LHchildTower14 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.7%;
    height: 2.6%;
    left: 49.2%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.LHchildTowerIntro14 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: LHchildTowerFourteen 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes LHchildTowerFourteen {
    from {
        width: 0%;
        height: 100%;
        left: 0%;
    }

    to {
        width: 0.7%;
        height: 2.6%;
        left: 49.2%;
    }
}

.LHchildTower15 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.5%;
    height: 1.9%;
    left: 49.5%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.LHchildTowerIntro15 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: LHchildTowerFifteen 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes LHchildTowerFifteen {
    from {
        width: 0%;
        height: 100%;
        left: 0%;
    }

    to {
        width: 0.5%;
        height: 1.9%;
        left: 49.5%;
    }
}

/*RH Towers*/
.RHchildTower1 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    height: 67.4%;
    right: 3.3%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.RHchildTowerIntro1 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: RHchildTowerOne 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes RHchildTowerOne {
    from {
        width: 0%;
        height: 100%;
        right: 0%;
    }

    to {
        width: 20%;
        height: 67.4%;
        right: 3.3%;
    }
}

.RHchildTower2 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 15%;
    height: 49%;
    right: 15.4%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.RHchildTowerIntro2 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: RHchildTowerTwo 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes RHchildTowerTwo {
    from {
        width: 0%;
        height: 100%;
        right: 0%;
    }

    to {
        width: 15%;
        height: 49%;
        right: 15.4%;
    }
}

.RHchildTower3 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 13%;
    height: 37%;
    right: 21.4%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.RHchildTowerIntro3 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: RHchildTowerThree 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes RHchildTowerThree {
    from {
        width: 0%;
        height: 100%;
        right: 0%;
    }

    to {
        width: 13%;
        height: 37%;
        right: 21.4%;
    }
}

.RHchildTower4 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 11%;
    height: 29%;
    right: 26.4%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.RHchildTowerIntro4 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: RHchildTowerFour 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes RHchildTowerFour {
    from {
        width: 0%;
        height: 100%;
        right: 0%;
    }

    to {
        width: 11%;
        height: 29%;
        right: 26.4%;
    }
}

.RHchildTower5 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10%;
    height: 23%;
    right: 29.4%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.RHchildTowerIntro5 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: RHchildTowerFive 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes RHchildTowerFive {
    from {
        width: 0%;
        height: 100%;
        right: 0%;
    }

    to {
        width: 10%;
        height: 23%;
        right: 29.4%;
    }
}

.RHchildTower6 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8%;
    height: 18.4%;
    right: 33.5%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.RHchildTowerIntro6 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: RHchildTowerSix 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes RHchildTowerSix {
    from {
        width: 0%;
        height: 100%;
        right: 0%;
    }

    to {
        width: 8%;
        height: 18.4%;
        right: 33.5%;
    }
}

.RHchildTower7 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6%;
    height: 15.3%;
    right: 37.4%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.RHchildTowerIntro7 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: RHchildTowerSeven 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes RHchildTowerSeven {
    from {
        width: 0%;
        height: 100%;
        right: 0%;
    }

    to {
        width: 6%;
        height: 15.3%;
        right: 37.4%;
    }
}

.RHchildTower8 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4%;
    height: 12.3%;
    right: 41.1%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.RHchildTowerIntro8 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: RHchildTowerEight 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes RHchildTowerEight {
    from {
        width: 0%;
        height: 100%;
        right: 0%;
    }

    to {
        width: 4%;
        height: 12.3%;
        right: 41.1%;
    }
}

.RHchildTower9 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2%;
    height: 10.2%;
    right: 44.6%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.RHchildTowerIntro9 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: RHchildTowerNine 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes RHchildTowerNine {
    from {
        width: 0%;
        height: 100%;
        right: 0%;
    }

    to {
        width: 2%;
        height: 10.2%;
        right: 44.6%;
    }
}

.RHchildTower10 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2%;
    height: 8.3%;
    right: 45.1%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.RHchildTowerIntro10 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: RHchildTowerTen 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes RHchildTowerTen {
    from {
        width: 0%;
        height: 100%;
        right: 0%;
    }

    to {
        width: 2%;
        height: 8.3%;
        right: 45.1%;
    }
}

.RHchildTower11 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2%;
    height: 6.5%;
    right: 45.5%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.RHchildTowerIntro11 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: RHchildTowerEleven 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes RHchildTowerEleven {
    from {
        width: 0%;
        height: 100%;
        right: 0%;
    }

    to {
        width: 2%;
        height: 6.5%;
        right: 45.5%;
    }
}

.RHchildTower12 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.5%;
    height: 5%;
    right: 46.7%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.RHchildTowerIntro12 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: RHchildTowerTwelve 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes RHchildTowerTwelve {
    from {
        width: 0%;
        height: 100%;
        right: 0%;
    }

    to {
        width: 1.5%;
        height: 5%;
        right: 46.7%;
    }
}

.RHchildTower13 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1%;
    height: 3.7%;
    right: 47.7%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.RHchildTowerIntro13 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: RHchildTowerThirteen 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes RHchildTowerThirteen {
    from {
        width: 0%;
        height: 100%;
        right: 0%;
    }

    to {
        width: 1%;
        height: 3.7%;
        right: 47.7%;
    }
}

.RHchildTower14 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.7%;
    height: 2.6%;
    right: 48.4%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.RHchildTowerIntro14 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: RHchildTowerFourteen 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes RHchildTowerFourteen {
    from {
        width: 0%;
        height: 100%;
        right: 0%;
    }

    to {
        width: 0.7%;
        height: 2.6%;
        right: 48.4%;
    }
}

.RHchildTower15 {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.5%;
    height: 1.9%;
    right: 48.94%;
    border: 1px solid limegreen;
    box-shadow: 0px 0px 27px -3px limegreen;
}

.RHchildTowerIntro15 {
    top: 50%;
    transform: translate(-50%, -50%);
    /*name, duration, delay, itteration, direction, fill-mode*/
    animation: RHchildTowerFifteen 1s 5s 1 normal forwards,
        light 0.4s 5s 1 normal forwards;
}

@keyframes RHchildTowerFifteen {
    from {
        width: 0%;
        height: 100%;
        right: 0%;
    }

    to {
        width: 0.5%;
        height: 1.9%;
        right: 48.94%;
    }
}


/*CRT Screen effect*/
@keyframes flicker {
    0% {
        opacity: 0.27861;
    }

    5% {
        opacity: 0.34769;
    }

    10% {
        opacity: 0.23604;
    }

    15% {
        opacity: 0.90626;
    }

    20% {
        opacity: 0.18128;
    }

    25% {
        opacity: 0.83891;
    }

    30% {
        opacity: 0.65583;
    }

    35% {
        opacity: 0.67807;
    }

    40% {
        opacity: 0.26559;
    }

    45% {
        opacity: 0.84693;
    }

    50% {
        opacity: 0.96019;
    }

    55% {
        opacity: 0.08594;
    }

    60% {
        opacity: 0.20313;
    }

    65% {
        opacity: 0.71988;
    }

    70% {
        opacity: 0.53455;
    }

    75% {
        opacity: 0.37288;
    }

    80% {
        opacity: 0.71428;
    }

    85% {
        opacity: 0.70419;
    }

    90% {
        opacity: 0.7003;
    }

    95% {
        opacity: 0.36108;
    }

    100% {
        opacity: 0.24387;
    }
}

@keyframes textShadow {
    0% {
        text-shadow: 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5), -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    5% {
        text-shadow: 2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5), -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    10% {
        text-shadow: 0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5), -0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    15% {
        text-shadow: 0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5), -0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    20% {
        text-shadow: 3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5), -3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    25% {
        text-shadow: 1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5), -1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    30% {
        text-shadow: 0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5), -0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    35% {
        text-shadow: 3.896914047650351px 0 1px rgba(0, 30, 255, 0.5), -3.896914047650351px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    40% {
        text-shadow: 3.870905614848819px 0 1px rgba(0, 30, 255, 0.5), -3.870905614848819px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    45% {
        text-shadow: 2.231056963361899px 0 1px rgba(0, 30, 255, 0.5), -2.231056963361899px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    50% {
        text-shadow: 0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5), -0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    55% {
        text-shadow: 2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5), -2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    60% {
        text-shadow: 2.202193051050636px 0 1px rgba(0, 30, 255, 0.5), -2.202193051050636px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    65% {
        text-shadow: 2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5), -2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    70% {
        text-shadow: 0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5), -0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    75% {
        text-shadow: 1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5), -1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    80% {
        text-shadow: 0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5), -0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    85% {
        text-shadow: 0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5), -0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    90% {
        text-shadow: 3.443339761481782px 0 1px rgba(0, 30, 255, 0.5), -3.443339761481782px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    95% {
        text-shadow: 2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5), -2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }

    100% {
        text-shadow: 2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5), -2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
    }
}

/*Ficker effect*/
.crt::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    animation: flicker 0.15s infinite;
}

.crt::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

/* .crt {
  animation: textShadow 1.6s infinite;
} */