body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
    color: red;
    margin:0;
    padding: 0;
    cursor: pointer;
}
.animation-up{
    position: relative;
    width: 100%;
    height: 50%;
    align-items: center;
    display: flex;
}
.ab{
    position: absolute;
    white-space:nowrap;
    animation:Slide-in-out 4s 7s ease-in-out infinite;
}
@keyframes Slide-in-out {
    0%{
        right: -100%;
    }
    20%{
        right: 0;

    }
    80%{
        right: 0;
    }
    100%{
        right: 80%;
    }
}
header{
margin: auto;
padding:30px;
background-image: url(IMG-20250821-WA0003.jpg);
background-size:100% 700px ;
background-repeat: no-repeat;
width:90%;
height: 700px;
}
.logo{
    width:150px;
    margin: 30px; 
    padding: 10px;
    border-radius: 50%;
    background-color: rgb(146, 144, 144);
    position: relative;
    top: -60px;
    left: 60px;
}
.about-content{
    display: none;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid  rgb(146, 144, 144);
    border-radius: 5px;
    background-color:rgba(146, 144, 144, 0.425);
}
.about-content:target{
    display: block;
}
.about-button{
    display: inline-block;
    padding:6px 15px;
    background-color:rgb(146,144,144,0.425);
    color: rgb(255, 7, 7);
    border-radius: 5px;
    text-decoration: none;
}
.about-button:hover{
    background-color: black;
    text-shadow: 20px 20px 10px red;
}
video{
    width: 50%;
    height: 510px;
    float: right;
    filter: drop-shadow(5px 5px 10px red);
}
#d1{
    width: 50%;
    height: 510px;
    float:left;
    filter: drop-shadow(5px 5px 10px red);
}
#d2{
    width: 50%;
    height: 510px;
    float:right;
    filter: drop-shadow(5px 5px 10px red);
}
#d3{
    width: 50%;
    height: 510px;
    float:left;
    filter: drop-shadow(5px 5px 10px red);
}
#d4{
    width: 50%;
    height:510px ;
    float:right;
    filter: drop-shadow(5px 5px 10px red);
}
#d5{
    width: 50%;
    height:510px ;
    float:left;
    filter: drop-shadow(5px 5px 10px red);
}
.social{
    margin-top: 50px;
    margin-left: 15px;
}
.social img{
    margin-top: 40px;
    width: 30px;
    margin-right: 10px;
    cursor: context-menu;
    transition: 2s;
}
.social img:hover{
    transform: rotate(360deg);
}
ruby{
    background-color: black;
    color:red;
}
@media screen and (max-width:600px){
     header{
        margin: auto;
        padding:30px;
        background-image: url(IMG-20250821-WA0003.jpg);
        background-size:100% 400px ;
        background-repeat: no-repeat;
        width:80%;
        height: 400px;
        }
        .logo{
            width:90px;
            margin: 30px; 
            padding: 10px;
            border-radius: 50%;
            background-color: rgb(146, 144, 144);
            position: relative;
            top: -60px;
            left: 60px;
        }
        .animation-up{
            position: relative;
            width: 100%;
            height: 50%;
            align-items: center;
            display: flex;
        }
        .ab{
            position: absolute;
            white-space:nowrap;
            animation:Slide-in-out 4s 7s ease-in-out infinite;
        }
        @keyframes Slide-in-out {
            0%{
                right: -100%;
            }
            20%{
                right: 0;
        
            }
            80%{
                right: 0;
            }
            100%{
                right: 70%;
            }
        }
        video{
            width: 50%;
            height: 300px;
            float: right;
        }
        #d1{
            width: 50%;
            height: 300px;
            float:left;
        }
        #d2{
            width: 50%;
            height: 400px;
            float:right;
        }
        #d3{
            width: 50%;
            height: 400px;
            float:left;
        }
        #d4{
            width: 50%;
            height:400px ;
            float:right;
        }
        #d5{
            width: 50%;
            height:400px ;
            float:left; 
        }
}