body {
    background: linear-gradient(rgba(0, 0, 0, 0.833), rgba(0, 0, 0, 0.444)),
        url(images/marc-olivier-jodoin-BC8bitj5J1c-unsplash.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgb(0, 0, 0);  
    background-attachment: fixed;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 10vh;
}

footer#footer {
color: rgb(255, 1, 1);
font-family: monospace;
opacity: 0;
animation: fadeIn 3s ease forwards;
}

nav#foot {
display: flex;
border-style: solid;
border-color: red;
padding: 10px;
opacity: 0;
animation: fadeIn 3s ease forwards;
}


nav#navigation ul#naviul {
display: flex;
justify-content: right;
border-style: solid;
border-color: red;
line-height: 50px;
padding: 0px 20px;
}

nav#navigation ul#naviul h1#yc{
 display: flex;
 margin-right: auto;
 text-decoration: none;
 color: red;
 line-height: 50px;
 font-family: monospace;
}


nav#navigation ul#naviul a {
    padding: 20px;
    text-decoration: none;
    color: red;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

nav#navigation ul#naviul a:hover {
    text-shadow: 2px 2px 15px red;
    font-size: 20px;
}

h1#firstname {
    text-align: left;
    padding-top: 200px;
    padding-left: 100px;
    font-size: 50px;
    color: rgb(0, 0, 0);
    font-family: cursive;
    font-style: italic;
    -webkit-text-stroke-color: rgb(255, 0, 0);
    -webkit-text-stroke-width: 5px;
    line-height: 0;
    text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000, 0 0 20px #ff0000;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeIn 3s ease forwards;
}

p#smallaboutme {
    text-align: left;
    padding-left: 100px;
    color: white;
    font-size: 40px;
    font-style: italic;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    opacity: 0;
    animation: fadeIn 5s ease forwards;
}

p#dummytext {
    text-align: left;
    padding-left: 100px;
    line-height: 30px;
    color: white;
    font-size: 20px;
    font-style: italic;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    opacity: 0;
    animation: fadeIn 8s ease forwards;
}

h1#aboutme {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 30px;
    font-size: 50px;
    color: rgb(0, 0, 0);
    font-family: cursive;
    font-style: italic;
    -webkit-text-stroke-color: rgb(255, 0, 0);
    -webkit-text-stroke-width: 5px;
    line-height: 0;
    text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000, 0 0 20px #ff0000;
    opacity: 0;
    animation: fadeIn 3s ease forwards;
}

.info {
    display: inline-block;
    border: 2px dashed red;
    padding: 20px;
    margin-right: 10px;
    background-color: rgba(0, 0, 0, 0.438);
}

.identity {
    text-align: left;
    font-size: 25px;
    padding-bottom: 20px;
    color:rgb(255, 0, 0);
    font-family:'Courier New', Courier, monospace;
    opacity: 0;
    animation: fadeIn 3s ease forwards;
}

.idanim {
    display: block;
    cursor: pointer;
}

.identity2 {
    opacity: 0;
    transition: opacity 1s ease;
}

.idanim:hover .identity2 {
    opacity: 1;
}

p#aboutme {
    text-align: center;
    font-size: 25px;
    padding-top: 50px;
    line-height: 80px;
    color:white;
    font-family:'Courier New', Courier, monospace;
    opacity: 0;
    animation: fadeIn 3s ease forwards;
}

span#webdevelopment {
    text-align: center;
    font-size: 100%;
    color: red;
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}

h1#myskills {
    text-align: center;
    padding-top: 50px;
    font-size: 50px;
    color: rgb(0, 0, 0);
    font-family: cursive;
    font-style: italic;
    -webkit-text-stroke-color: rgb(255, 0, 0);
    -webkit-text-stroke-width: 5px;
    line-height: 0;
    text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000, 0 0 20px #ff0000;
    opacity: 0;
    animation: fadeIn 3s ease forwards;
}

p#html, p#css, p#csharp, p#videdit, p#yt {
    text-align: center;
    padding-top: 50px;
    font-size: 200%;
    line-height: 0%;
    color:white;
    font-family:'Courier New', Courier, monospace;
    opacity: 0;
    animation: fadeIn 3s ease forwards;
}

h1#myprojects {
    text-align: center;
    padding-top: 50px;
    font-size: 50px;
    color: rgb(0, 0, 0);
    font-family: cursive;
    font-style: italic;
    -webkit-text-stroke-color: rgb(255, 0, 0);
    -webkit-text-stroke-width: 5px;
    line-height: 0;
    text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000, 0 0 20px #ff0000;
    opacity: 0;
    animation: fadeIn 3s ease forwards;
}

img#photo {
    width: 700px;
    height: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    box-shadow: 0 0 10px rgb(255, 0, 0), 0 0 20px rgb(255, 0, 0), 0 0 40px rgb(255, 0, 0);
    opacity: 0;
    animation: fadeIn 3s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}



p#website {
    text-align: center;
    padding-top: 50px;
    font-size: 200%;
    color:white;
    font-family:'Courier New', Courier, monospace;
    opacity: 0;
    animation: fadeIn 3s ease forwards;
}

h1#mycontact {
    text-align: center;
    padding-top: 50px;
    font-size: 50px;
    color: rgb(0, 0, 0);
    font-family: cursive;
    font-style: italic;
    -webkit-text-stroke-color: rgb(255, 0, 0);
    -webkit-text-stroke-width: 5px;
    line-height: 0;
    text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000, 0 0 20px #ff0000;
    opacity: 0;
    animation: fadeIn 3s ease forwards;
}

.fa-square-github {
    color: rgb(0, 0, 0);
    font-size: 150px;
    text-shadow: 2px 2px 25px rgb(255, 0, 0);
    -webkit-text-stroke-color: rgb(255, 0, 0);
    -webkit-text-stroke-width: 1px;
    margin-left: 20%;
    padding-top: 100px;
    opacity: 0;
}

.fa-square-x-twitter {
    color: rgb(0, 0, 0);
    font-size: 150px;
    text-shadow: 2px 2px 25px rgb(255, 0, 0);
    -webkit-text-stroke-color: rgb(255, 0, 0);
    -webkit-text-stroke-width: 1px;
    margin-left: 10%;
    opacity: 0;
}

.fa-envelope {
      color: rgb(0, 0, 0);
    font-size: 150px;
    text-shadow: 2px 2px 25px rgb(255, 0, 0);
    -webkit-text-stroke-color: rgb(255, 0, 0);
    -webkit-text-stroke-width: 1px;
    margin-left: 10%;
    opacity: 0;
}

.fa-square-github,
.fa-square-x-twitter,
.fa-envelope {
  animation:
    fadeIn 3s ease-out forwards,
    neonGlow 2s ease-in-out infinite alternate;
}

@keyframes neonGlow {
  0% {
    text-shadow:
      0 0 5px #ff0000,
      0 0 10px #ff0000,
      0 0 20px #ff0000;
  }

  50% {
    text-shadow:
      0 0 5px #ff000000,
      0 0 10px #ff000000,
      0 0 20px #ff000000;
  }

  100% {
    text-shadow:
      0 0 5px #ff0000,
      0 0 10px #ff0000,
      0 0 20px #ff0000;
  }
}