body {
    font-family: 'Cairo', sans-serif;
    font-size:30px;
    background-color:black;
    color:white;
}

a {
    padding-left:25px;
}

i {
    color:white;
}

input {
    background-color:gray;
    border-radius:15px;
    color:rgb(226, 226, 226);
}

::placeholder {
    color:white;
    padding-left:5px;
}

#container {
    /* margin: 0 auto; */
    top:50%;
    left:50%;
    position:absolute;
    transform: translate(-50%, -50%)
}

#textDiv {
    display:inline-block;
    animation: typingEffect 2s forwards;
    width:0%;
    border-width:1px;
    overflow:hidden;
    white-space:nowrap;
}

#box {
    background-color:gray;
    width:15px;
    opacity:0%;
    height:35px;
    border: 1px solid gray;
    animation-name: cursorBlink;
    animation-duration:0.5s;
    animation-iteration-count: infinite;
    margin: -25;
    z-index:1;
    position:absolute;
    transform: translate(-65%, 100%);
}

#extraInfo {
    opacity:0;
    overflow:hidden;
    animation:fadeIn 1s forwards;
    animation-delay:2s;
}

#contact {
    display:none;
}

.contactFade {
    display:block;
    animation: fadeIn 1s forwards;
    animation-play-state:paused;
}

@keyframes cursorBlink {
    0% {opacity:0%;}
    25% {opacity:50%;}
    75% {opacity:0%;}
}

@keyframes typingEffect {
    from {width:0%;}
    to {width:22%;}
}

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