/* *{
    display: flex;
    justify-content: center;
    align-items: center;
} */
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    color: rgb(0, 236, 236);
}
backRed{
    background-color: red;
}
title::after{
    content: 'Backend';
}

@keyframes fadeIn {
    0% { 
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1; 
        transform: translateY(100%);
    }
  }
  
.fade-in-text {
    animation: fadeIn 8s ease-in-out infinite alternate;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: roboto;
    font-size: 50px;
  }

.moveDown{
    position: absolute;
    top: 20%;
}
#cloud {
    background: rgb(173, 209, 202);
    width: 300px; 
    height: 100px;
    border-radius: 150px;	
    box-shadow: 10px 10px rgba(0,0,0,0.2);
    animation: move 4s infinite alternate;
    

}
  
#cloud:after {
    content: '';
    background:  rgb(173, 209, 202);
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top: -50px;
    left: 50px;
    /* animation: glow 4s ease-in-out infinite alternate; */
}
  
#cloud:before {
    content: '';
    background:  rgb(173, 209, 202);
    position: absolute;
    width: 170px;
    height: 150px;
    border-radius: 50%;
    top: -90px;
    right: 40px;
    animation: glow 4s ease-in-out infinite alternate;
}
  
@keyframes move {
    0% {
        transform: translatex(0);
        box-shadow: 5px 5px 8px rgb(0, 255, 251), 15px 15px 8px rgb(0, 255, 89); 
    }
    50% {
        transform: translatex(-20px);
        text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;

    }
}
.containerCloud{
    display: flex;
    flex-wrap: wrap;
    animation: glow 1s ease-in-out infinite alternate;

}


.glow {
    font-size: 80px;
    color: #fff;
    text-align: center;
    animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 5px 5px 8px rgb(0, 255, 251), 15px 15px 8px rgb(0, 255, 89);      
    }
    
    to {
      text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    }
}


.glowText {
    font-size: 80px;
    color: #fff;
    text-align: center;
    border-radius: 20%;
    animation: glowText 1s ease-in-out infinite alternate;
  }
  
  @-webkit-keyframes glowText {
    from {
        
      text-shadow: 0 0 10px rgb(0, 255, 251) , 0 0 20px rgb(0, 255, 89);
    }
    
    to {
      text-shadow: 0 0 20px rgb(0, 255, 251), 0 0 30px rgb(0, 255, 251);
    }
  }


@media screen and (max-width: 750px){
    .glowText {
        padding: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color: #fff;
        text-align: center;
        border-radius: 20%;
        animation: glowText 1s ease-in-out infinite alternate;

    }
    .fade-in-text {
        padding: 10%;
        animation: fadeIn 8s ease-in-out infinite alternate;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: roboto;
        font-size: 30px;
    }
}