.title-bar{
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
}
.title-bar img {height:auto;
    width: 60px;
    height: auto;
}
/*.body{
    background-image:url("C:\Users\ELVIS ISAAC\Pictures\FELIXWEBSITE\G.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;}*/

    .dd{
        position: relative;
        display: inline-block;
    }
    .dd-content{
        position: absolute;
        display: none;
    }
    .dd.hover>.dd-content{
        display: block;
    }
    .dropdown{
        position: relative;
        display: inline-block;
    }
    .dropbtn{
        padding: 10px 20px;
        font-size: 16px;
        border: none;
        background-color: cadetblue;
        color: white;
        cursor: pointer;
    }
    .dropdown-content{display: none;
        position: absolute;
        background-color:aqua;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rosybrown;
        z-index: 1;
    }
    .dropdown-content a:hover{
background-color: darkgoldenrod;
    }
    .dropdown:hover .dropdown-content{
        display: block;
    }
    .dropdown:hover.dropbtn{
        background-color: blueviolet;
    }
    *{
        box-sizing: border-box;
    }
    html,body{
        margin: 0;
        padding: 0;
    }

 .drol{
        position: relative;
        display: inline-block;
        margin-left: 500px;
    }

    body{
        display: flex;
        min-height: 50vh;
        flex-direction: column;}
    
    footer{
        color: green;
        background: #bcc6cc;
        position: relative;
        font-size: 100%;
    }
    .footer-copyright{
        width: 100%;
        height: 30px;
        background:black;
       /* padding: 5px;
        position: absolute;
        bottom: 0px;
        left: 10px;*/
    }
    .footer-body{
        margin-bottom: 40px;
        padding: 30px;
    }
    .footer-body>div:first-child{
        font-size: 30px;
    }
    .footer-body ul{
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        text-align: center;
    }
    .footer-body li>a{
        color:black;
        text-decoration: none;
        margin-bottom: 6px;
    }
    .image-container{
        display: flex;
       /* flex-wrap: wrap;*/
        gap: 20px;
        justify-content: center;
      /*margin-left: 50%;*/
    
    }
    .image-container img{
        margin: 60px right;
        width: 300px;
        box-shadow: 0 15px 30px rgb(0, 0, 0.30),0 11px 8px rgb(0, 0, 0.22);
        margin-bottom: 20px;
        transition: transform 0.3s ease;
        border-radius: 8px;
       align-items: center;
        display: flex;
    }
    .image-container img:hover{
        transform: scale(1.05);

    }
    img{
        height:auto;
        width: 300x;
        align-items: center;
        

    
    }
    .image-description{
       padding: 0 8px 0px 8px;
        text-align: center;
        color:black;
       position:absolute;
      /*  display: flex;*/
      margin-bottom: 700px;
    }
@keyframes running{
            from{
                bottom:16px;
            }
            to{
                top: 10px;
            }
        }
 /* .running .text {
    
            animation-name: running;
            animation-duration: 10s;
            animation-play-state: running;}*/

     .text-box1 {
        width: 300px;
        padding: 20px;
        background-color: white;
        border: 2px solid greenyellow;
        border-radius: 10px;
        box-shadow: 0 0 10px black;
       opacity: 0;
       transform: rotateY('70px');
       animation: slideup 5s ease-out forwards;
     }
     .text-box2{
        width: 300px;
        padding: 20px;
        background-color: white;
        border: 2px solid greenyellow;
        border-radius: 10px;
        box-shadow: 0 0 10px black;
       opacity: 0;
       transform: rotateY('70px');
       animation: slideup 5s ease-out forwards;
    float:right;
    margin-bottom:20px;
    
}


 .text-box3 {
        width: 300px;
        padding: 20px;
        background-color: white;
        border: 2px solid greenyellow;
        border-radius: 10px;
        box-shadow: 0 0 10px black;
       opacity: 0;
       transform: rotateY('70px');
       animation: slideup 5s ease-out forwards;
       margin-right: 50px;

     }



.pazle{
    
    display: flex;
    justify-content:center;
    gap: 50px;
}

       
     .text-header{
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
        color: aquamarine;
        border-bottom: 1px solid yellow ;
        padding: 5px;
    
        
    
     }
     .text-content{
        font-size: 16px;
        color: black;
        font-family:'Franklin Gothic Medium';
     }
     /*@keyframes slideln{
        0%{
            transform: translateY(-50px);
            opacity: 0;
        }
        100%{transform: translateY(0);
            opacity: 1;
        
        }
     }*/
     .slide-in{
        opacity: 0;

        transform: translateX(-100%);
        animation:slideIn 1s forwards;
        font-size: 2rem;
        font-weight: bold;
        margin-left: 500px;
     }
     @keyframes slideIn{
to{
    opacity: 1;
    transform:translateX(0)
}
     }
    /* .slide-up{
        opacity: 0;
        transform: translateY(50px);
        animation: slideup 2s ease-out forwards;
        font-size: 1rem;
        padding: 10px;
        width: 250px;
        border: 2px solide goldenrod;
        border-radius: 5px;
        display: block;
        margin: auto;
     }*/
     @keyframes slideup{
to{
opacity: 1;
transform: translateY(0);
}
     }

    
    nav{
        background-color: darkgreen;
        padding: 10px;
        text-align: center;
       /* box-shadow: gray;*/
    }
    nav a{
        color: white;
        text-decoration: none;
        margin: 0 15px;
        font-size: 18px;
        padding: 8px 12px;
        border-radius: 4px;
        transition: background 0.3s;
    }
    nav a:hover{
        background-color:rgb(34, 17, 182);
    }
    .dark-mode{background-color: darkgrey;
   /* color: aqua;*/
    }
    .image-as-background{
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
    }
    .slide-in-text{
   opacity: 0;

        transform: translateX(-100%);
        animation:slideIn 2s forwards;
        font-size: 1rem;
       /* font-weight: bold;*/
        margin-left: 100px;
    color:white;
/*border-radius: 6px;*/
/*box-shadow: 0 4px 12px wheat;*/
padding: 50px;
font-size: 25px;}


.donate-button{
    background-color: #00709c;
color: white;
font-size: 16px;
cursor: pointer;
}