@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Megrim&family=Nabla&family=Oi&family=Silkscreen:wght@400;700&family=Sixtyfour+Convergence&family=Tourney:ital,wght@0,100..900;1,100..900&display=swap');

body{
    background-image: url("download\ \(3\).jpg");
    background-size: 1550px;
} 


.topnav a {
    float: center;
    color: brown(190, 16, 123, 0.53);
    color: rgb(61, 151, 96);
    text-align: center;
    font-size: larger;
    padding: 40px;
    text-decoration: none;
    font-family: "Audiowide", sans-serif;


}
.nav{
position:absolute;
top:20px;
right:30px;

background:rgba(0,0,0,0.6);
padding: 40px;

border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.5);
}
.image img{
    display: block;
    margin-left: auto;
    margin-right:auto ;
    width: 50%;
}
p{
    color:rgb(28, 196, 126);
    font-size: 40px;
}

.name{
text-align: center;
font-size:50px;
color:rgb(177, 13, 13);
font-family: "Audiowide", sans-serif;
overflow:hidden;
white-space:nowrap;
color:white;
font-size:60px;
text-shadow:0 0 20px #00E5FF;

width:0;
animation:typing 3s steps(20,end) forwards;
}

@keyframes typing{
from{
width:0;
}

to{
width:100%;
}
}
h1{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}