#wrapper-canvas canvas {
    max-width: 100%;
   
}


  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');
 


  .animated-text{
font-size: 50px;
font-weight: 600;
min-width: 280px;
}

.animated-text span{
position: relative;
}

.animated-text span::before{
content: "Youtuber";
color: #b74b4b;
animation: words 20s infinite;
}

.animated-text span::after{
content: "";
position: absolute;
width: calc(100% + 8px);
height: 100%;
background-color: #111;
border-left: 2px solid #ff7f50;
right: -8px;
animation: cursor .8s infinite, typing 20s steps(14) infinite;
}

@keyframes cursor {
to{
    border-left: 2px solid #ff7f5000;
}
}

@keyframes words {
0%,20%{
    content: "Youtuber";
}
21%,40%{
    content: "Blogger";
}
41%,60%{
    content: "Developer";
}
61%,80%{
    content: "Designer";
}
81%,100%{
    content: "Gamer";
}
}

@keyframes typing {
10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{
    width: 0;
}
5%,20%,25%,40%,45%,60%,65%,80%,85%{
    width: calc(100% + 8px);
}
}
.btn{
display: inline-block;
padding: 10px;
background-color: black;
border-radius: 4rem;
font-size: 1.2rem;
color: #b74b4b;
letter-spacing: 0.2rem;
font-weight: 600;
border: 2px solid #b74b4b;
transition: 0.3s ease;
cursor: pointer;
}

.btn:hover{
transform: scale3d(1.03);
background-color: #b74b4b;
color: black;
box-shadow: 0 0 25px #b74b4b;
}
.social-icons a{
display: inline-flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
background-color: transparent;
border: 0.2rem solid #b74b4b;
font-size: 2rem;
border-radius: 50%;
transition: 0.3s ease;
color: #b74b4b;
}

.social-icons a:hover{
color: black;
transform: scale(1.3) translateY(-5px);
background-color: #b74b4b;
box-shadow: 0  0 25px #b74b4b;
}