@import url("https://use.fontawesome.com/releases/v6.4.2/css/all.css");
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #1f1f1f;
    margin: 10px;
}

.navigation {
    margin-top: 1em;
    color: aliceblue;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(38, 38, 38);
    border-radius: 15px;
}

ul.Navigation {
    list-style-type: none;
    overflow: hidden;
    margin-right: 0.1rem;
    padding: 0.2rem;
    flex-wrap: wrap;
}

div.navigation>ul.Navigation>li {
    margin-top: 0.4%;
    margin-right: 0.4rem;
}
div.navigation>ul.Navigation>li>a {
    float: right;
    display: flex;
    justify-content: right;
    margin: 0.2em;
    padding: 0.7rem;
    text-align: -10px;
    background-color: #006435;
    background-image: linear-gradient(to bottom right, #050c37, rgba(15, 106, 15, 0.552));
    text-decoration: none;
    overflow: hidden;
    color: aliceblue;
    border-radius: 10%;
    border: solid 2px #01fe87;
    border-image: linear-gradient(to bottom right, #0055ff, #01fe87);
    border-width: 4px;
}
div.navigation>ul.Navigation>li>a:hover {
    background-color: #01fe87;
    box-shadow: 2px 5px 15px 2px #00ff88;
    color: #01fe87;
    border-radius: 10%;
    border: solid 2px #01fe87;
    border-image: linear-gradient(to bottom right, #0055ff, #01fe87);
    border-width: 4px;
    text-decoration: underline;
}

div.navigation>ul.Navigation>li.HireMe {
    float: right;
}
div.navigation>ul.Navigation>li>a.HireMe {
    float: right;
    display: flex;
    justify-content: right;
    margin-top: 0.2em;
    margin-right: -0.2rem;
    padding: 0.7rem;
    text-align: center;
    white-space: nowrap;
    background-color: #121212;
    background-image: linear-gradient(to top left, #121212, #474747);
    text-decoration: none;
    color: aliceblue;
    border-radius: 10%;
    border: solid 2px #121212;
    border-image: linear-gradient(to bottom right, #121212, #474747);
    border-width: 4px;
}
div.navigation>ul.Navigation>li>a.HireMe:hover {
    box-shadow: 0px 5px 15px 2px #7f7f7f;
    background-image: linear-gradient(to top left, #474747, #121212);
    border-radius: 10%;
    border: solid 2px #626262;
    border-image: linear-gradient(to bottom right, #474747, #121212);
    border-width: 4px;
    text-decoration: underline;
}

.WhoAmI {
    display: block;
    float: left;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: left;
    align-items: center;
    margin-top: 0.2rem;
    margin-left: 0.5rem;
    margin-right: 3rem;
}
.WhoAmI>h2.WhoIAmText {
    display: inline-block;
    color: aliceblue;
    font-size: 1.5rem;
    font-weight: 400;
}
.WhoAmI>h2.WhoIAmText>span {
    position: relative;
    color: transparent;
    -webkit-text-stroke: 1px #01fe87;
    line-height: 1.2em;
    padding: 5px 10px;
    animation: displayText 12s infinite;
    animation-delay: calc(-3s * var(--i));
}
@keyframes displayText
{
    0%
    {
        display: inline-block;
    }
    25%,100%
    {
        display: none;
    }
}
.WhoAmI>h2.WhoIAmText>span::before {
    content: attr(data-text);
    position: absolute;
    top: -2px;
    left: -2px;
    width: 0;
    height: 100%;
    color: #01fe87;
    overflow: hidden;
    white-space: nowrap;
    border: 2px solid #01fe87;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 5px 10px;
    animation: animate 3s linear infinite;
    filter: drop-shadow(0 0 5px #01fe87) drop-shadow(0 0 15px #01fe87);
}
@keyframes animate
{
    0%,10%,100%
    {
        width: 0;
    }
    70%,90%
    {
        width: 100%;
    }
}

@media screen and (max-width: 800px) {
    .left, .main, .right {
      width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
    }
  }

/* -------------------
    Responsive Media
    ------------------ */
    @media screen and (min-width: 375px) {
        .WhoAmI {
            margin-top: 0.2rem;
            margin-left: 0.5rem;
            margin-right: 6rem;
        }
    }
    
    @media screen and (min-width: 425px) {
        .WhoAmI {
            margin-top: 0.2rem;
            margin-left: 0.5rem;
            margin-right: 9rem;
        }
    }
    
    @media screen and (min-width: 768px) {
        .WhoAmI {
            margin-top: 0.2rem;
            margin-left: 0.5rem;
            margin-right: 5rem;
        }
        .WhoAmI>h2.WhoIAmText {
            font-size: 2.4rem;
        }
    }
    
    @media screen and (min-width: 1024px) {
        .WhoAmI>h2.WhoIAmText {
            font-size: 2.4rem;
        }
    }
    
    @media screen and (min-width: 1440px) {
        div.navigation>ul.Navigation>li {
            margin-top: 0.2%;
        }
        div.navigation>ul.Navigation>li>a {
            font-size: 20px;
        }
    }
    
    @media screen and (min-width: 2560px) {
        div.navigation>ul.Navigation>li {
            margin-top: 0.1%;
        }
        div.navigation>ul.Navigation>li>a {
            font-size: 24px;
        }
    }