style.css

/*
    Colors :
    Light Grey : #525252
    Grey : #414141
    Black : #313131
    Light Red : #ec625f
*/
body {
    margin: 0;
    background-color: #525252;
}
.container {
    border-radius: 20px;
    background-color: #313131;
    margin: 10px 100px;
    height: 618px;
    border: 3px solid #414141;
    font-family: "Forte";
    color: #ec625f;
    overflow: hidden
}
.container h1 {
    font-size: 60px;
    font-weight: 100
}
.container span {
    font-size: 115px;
    font-weight: 100
}
nav {
    display: flex;
    justify-content: center;
    opacity: 0%;
    animation: nav 10000s ease-in-out 28s
}
nav ul {
    list-style: none;
}
nav ul li {
    display: inline-block;
    margin: 0 20px;
}
nav ul li a:hover {
    background-color: #ec625f;
    color: #414141
}
nav ul li a {
    font-family: 'Forte';
    text-decoration: none;
    color: #ec625f;
    letter-spacing: 1px;
    font-size: 27px;
    padding: 10px 15px;
    border-radius: 20px
}
.welcoming {
    position: relative;
    left: 100px;
    animation: welcometo 2000000s ease-in-out;
}
.thank {
    position: relative;
    left: 1160px;
    animation: thanku 8s ease-in-out 8s
}
.enjoy {
    position: relative;
    left: 1160px;
    animation: enjoyit 6s ease-in-out 17s;
}
.me {
    position: relative;
    left: 260px;
    top: 20px;
    animation: me 10000s ease-out 25s
}
.me h1 {
    font-size: 100px
}
@keyframes welcometo 
{
    0%{left: 100px;}
    0.0002%{left: 100px;}
    0.0004%{left: -920px;}
    100%{left: -920px;} 
}
@keyframes thanku {
    0%{left: 1160px;}
    10%{left: 100px}
    90%{left: 100px} 
    100%{left: -1000px}
}
@keyframes enjoyit {
    0%{left: 1160px;}
    10%{left: 100px}
    90%{left: 100px} 
    100%{left: -900px}  
}
@keyframes me {
    0%{top: 20px}
    .05%{top: -430px}
    100%{top: -430px}  
}
@keyframes nav {
    0%{opacity: 0%}
    .025%{opacity: 100%}
    100%{opacity: 100%}
}