body {
    background-color: black;
    color: #0e0;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: sans-serif;
}

.navbar {
    opacity: 50%;
}

.maincontent {
    background-color: rgba(32,32,32,0.8);
    border-radius: 5px;
    padding: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 150%;
    border: 5px solid rgba(64,64,255, 0.2);
}

@keyframes glowh {
    from {
        color: #00ee00;
        text-shadow: 0px 0px 0.0rem #00ee00;
        transform: scale(1.0);
    }
    to {
        color: #00ff00;
        text-shadow: 0px 0px 0.5rem #00ff00;
        transform: scale(1.05);
    }
}

.maincontent h1, h2 {
    text-align: center;
    margin-bottom: 20px;
    animation-name: glowh;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

.social-container {
    text-align: center;
}

.social-container a {
    margin-left: 20px;
    margin-right: 20px;
}

.my-name {
    text-shadow:
        -1px -1px 0px #888888, -1px 0px 0px #888888, -1px 1px 0px #888888,
        0px -1px 0px #888888, 0px 0px 0px #888888, 0px 1px 0px #888888,
        1px -1px 0px #888888, 1px 0px 0px #888888, 1px 1px 0px #888888
    ;
}

#theCarousel img {
    object-fit: contain;
    height: 50vh;
}

#theCarousel .carousel-caption {
    color: white;
    text-shadow:
        -1px -1px 0px #000000, -1px 0px 0px #000000, -1px 1px 0px #000000,
        0px -1px 0px #000000, 0px 0px 0px #000000, 0px 1px 0px #000000,
        1px -1px 0px #000000, 1px 0px 0px #000000, 1px 1px 0px #000000
    ;
}

#bglayer {
  position: fixed;
  top: 0px;
  left: 0px;
  width:100%;
  height:100%;
  z-index: -1;
}

@keyframes pride {
    0% {
        color: hsl(0, 100%, 50%);
        text-shadow: 0px 0px 1.0rem #00ff00 hsl(0, 100%, 50%);
    }
    25% {
        color: hsl(90, 100%, 50%);
        text-shadow: 0px 0px 1.0rem hsl(90, 100%, 50%);
    }
    50% {
        color: hsl(180, 100%, 50%);
        text-shadow: 0px 0px 1.0rem hsl(180, 100%, 50%);
    }
    75% {
        color: hsl(270, 100%, 50%);
        text-shadow: 0px 0px 1.0rem hsl(270, 100%, 50%);
    }
    100% {
        color: hsl(360, 100%, 50%);
        text-shadow: 0px 0px 1.0rem hsl(360, 100%, 50%);
    }
}

span.pride0 {
    animation-name: pride;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}
span.pride1 {
    animation-name: pride;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-delay: -9s;
}
span.pride2 {
    animation-name: pride;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-delay: -8s;
}
span.pride3 {
    animation-name: pride;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-delay: -7s;
}
span.pride4 {
    animation-name: pride;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-delay: -6s;
}
span.pride5 {
    animation-name: pride;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-delay: -5s;
}
span.pride6 {
    animation-name: pride;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-delay: -4s;
}
span.pride7 {
    animation-name: pride;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-delay: -3s;
}
span.pride8 {
    animation-name: pride;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-delay: -2s;
}
span.pride9 {
    animation-name: pride;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-delay: -1s;
}