body {
    color: white;
    background-color: #000000;
    position: relative;
}

.content {
    right: 0;
    left: 0;
    position: absolute;
    margin-top: 10vh;
    padding: 10vh;
}

#logo {
    animation: glowingRed 2s infinite alternate;
	margin-bottom: 100px;
}

#particles-js {
    height: 100vh;
}

.mediaLink {
    padding: 1%;
    cursor: pointer;
}

#ytLink:hover {
    animation: yt 0.82s;
    animation-fill-mode: forwards;  
}

#twitchLink:hover {
    animation: twitch 0.82s;
    animation-fill-mode: forwards;  
}

#instagramLink:hover {
    animation: instagram 0.82s;
    animation-fill-mode: forwards;  
}

#steamLink:hover {
    animation: steam 0.82s;
    animation-fill-mode: forwards;  
}

#githubLink:hover {
    animation: github 0.82s;
    animation-fill-mode: forwards;  
}

.scrollContainer {
    background-color: #0f0f0f;
}

.scrollContent {
    padding: 5%;
}


.card {
    background-color: #212121;
    padding: 5%;
    margin-bottom: 2vh;
}

@keyframes yt {
  from {color: white;}
  to {color: red;}
}

@keyframes twitch {
  from {color: white;}
  to {color: rebeccapurple;}
}

@keyframes instagram {
  from {color: white;}
  to {color: palevioletred;}
}

@keyframes steam {
  from {color: white;}
  to {color: #002258;}
}

@keyframes github {
  from {color: white;}
  to {color: #d3d3d3;}
}

@keyframes glowingRed {
  from {
      -webkit-filter: drop-shadow(0px 0px 0px rgba(0,0,0,0.0));
    }
  to {
      -webkit-filter: drop-shadow(1px 1px 12px rgba(255, 0, 0, 0.5));
    }
}

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}