#topbar{

font-size:20px ;
font: weight 400px;
color: rgb(18, 99, 96);
flex-direction: row;
display: flex;
box-sizing: border-box;
cursor: pointer;
height: 80px;}
#grid{
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
display: grid;
grid-auto-columns: 1fr;}

#contact{
display: flex;
padding-left: 50px;
flex-direction: row;
align-items: center;
column-gap: 10px;
color: #126360;
}
a{
transition-property: background-color, color;
transition-duration: 250ms, 200ms;
transition-timing-function: ease, ease;
color:rgb(18, 99, 96) ;
background-color: transparent;
}
#socialmedia{
display: flex;
padding-left: 400px;
column-gap: 15px;
justify-content: flex-end;
align-items: center;
height: 80px;}
#detail{
background-color: rgb(75, 201, 196);
display: flex;
height: 80px;
align-items: center;
column-gap: 15px;
 width: 180px;
padding-right: 20px;
padding-left: 40px;
}
#first{
margin-right: auto;
margin-left: auto;
padding-right: 00px;
padding-left: 0px;
height: 80px;
}
#second{
font-size: 16px;
justify-content: center;
padding-left: 200px;
padding-right: 100px;
width: 1000px;
height: 130px;
}
#second-grid{
justify-content: space-between;
display: flex;
flex-direction: row;
align-items: center;
}
#animation{
position: relative;
float: left;
color: var(--paragraph-color)
}
#info{
display: flex;
column-gap:15px ;
position: relative;}
button{
align-self: flex-start;
padding: 20px 30px;
justify-content: center;
align-items: center;
border-radius: 34px;
display:flex;
font-size: 18px;
font-weight: 500;
background-color: #ff6d6d;
color:white;
 border-color: transparent;
}
#button > a{
color:transparent ;
}
#button{
float: right;
align-self: flex-start;
order: 1;
text-transform: uppercase;
justify-content:end;
padding-right:5px ;
}
button:hover{
background-color: rgb(75, 201, 196);
cursor: pointer;}
#menu{
position: relative;
justify-content: center;
position: relative;
display: flex;
color: #222222;
padding: 35px;
margin-left: auto;
margin-right: auto;
padding-right: 200px;
width: 500px;
font-weight: bold;
a{
margin-top: 20px;
padding: 0px 25px;
border-right: 1px solid rgb(208, 208, 208);
font-weight: bolder;
color: #080808;
text-decoration: none;

}
}
.home{
color: #ff6d6d;
border-right: 1px solid rgb(208, 208, 208);
font-weight: bold;
padding: 0px 25px;
background-color: transparent;
}
 .about-us{
padding: 0px 25px;
border-right: 1px solid rgb(208, 208, 208);
font-weight: 500;
background-color: transparent;
}
.pages{
padding: 0px 25px;
border-right: 1px solid rgb(208, 208, 208);
font-weight: 500;
}
.link{
padding: 0px 25px;
border-right: 1px solid rgb(208, 208, 208);
font-weight: 500;
background-color: transparent;
}
.link2{
padding: 0px 25px;
border-right: 1px solid rgb(208, 208, 208);
font-weight: 500;}
#donate{
align-content: center;
justify-content: center;

}
#DD{
display: flex;
column-gap: 15px;

}
#ime{
padding-top: 30px;

}
#vid > a{
color: #fff;
}
#content{
padding-bottom: 250px;
}
a > img{
width: 25px;
}
.containerpic > img{
 width: fit-content;
height: 823px;
}
.containerpic > img{
position: absolute;
height: 800px;
width: 1340px;}
.inner{
position:absolute;
width: 1340px;
font-size: 40px;
margin-bottom: 0px;
color:white;
}
.intro > p{
font-family: myfont;
font-size: 50px;
}
.intro{
padding-left: 150px;

}
#povertycircle{
display:flex;
align-items: center;
padding-left: 150px;
}
.circle{
width: 24px;
height: 24px;
border-radius: 100px;
background-color: white;
box-sizing: border-box;
}
.line{
width: 250px;
height: 3px;
background-color: white;
padding-right: 100px;}
#D{
display: flex;
padding: 35px;
column-gap: 15px;
cursor: pointer;
padding-left: 150px;
 position: relative;
padding-top: 500px;
}
.dis{
color: #222222;
}
.dis > button{
background-color: #fff;
cursor: pointer;
color: #222222;
}
.dis >button:hover{
background-color: #080808;
color: #fff;
}
.do >button:hover{
background-color: #77d7d3;
}
.contentbox{
width: 200px;
height: 24px;
border-radius: 100px;
background-color: rgba(255, 255, 255, 0);
opacity: 0px;
box-sizing: border-box;
border-color: #fff;
align-items: center;
border: solid white;
position: relative;
text-align: center;
font-size: small;
}
.contentbox > p{
font-size: small;
text-align: center;
position: inherit;
}
#grid2{
display: grid;
position: relative;
grid-template-columns: 300px 350px 300px;
padding-top: 130px;
padding-left: 200px;
text-align: center;
}
.grid2-item1{
background-color: rgb(75, 201, 196);
color:rgb(18, 99, 96);
padding: 20px;
font-size: x-large;

}
.grid2-item1 > button{
background-color: #fff;
color: rgb(46, 64, 73);

}
.grid2-item1 > button:hover{
background-color: #080808;
color: #fff;
cursor: pointer;
}
.grid2-item2{
background-color: rgb(46, 64, 73);
color: #fff;
padding: 30px;
font-size: x-large;
}
.grid2-item2 > a{
color: #fff;
}
.grid2-item2 > a:hover{
color: red;
cursor: pointer;
}
.grid2-item3{
background-color: #ff6d6d;
.play{
img{
position:absolute;
padding-bottom: 800px;

width: 30px;
height: 30px;
}}
img{
height:500px ;
width: 300px;
opacity: 50%;
 }
}
#aboutus2{
width: 550px;
display: grid;
grid-template-columns: 1fr;
column-gap: 30px;
padding: 50px;
color: #727272;}
#aboutus2 > div > p{
font-size: 20px;
}
.AU{
font-family: myfont;
color: #ff6d6d;
}
#check{
display: flex;
align-content: center;
color: #727272;
position: relative;
column-gap: 20px;
font-family:'Times New Roman', Times, serif;
}
.list{
padding: 10px;
}
.list > img{
height: 15px;
}
#Donation{
background-color: rgb(236, 241, 240);
display: grid;
padding: 50px;

}
#aboutus3{
display: flex;
align-items: center;
padding-right: 200px;
}
.dline{
align-items: center;
display: flex;
}
.dline1{
border-radius: 100px;
width: 250px;
height: 3px;
background-color: #ff6d6d;
}
.dline2{
border-radius: 100px;
width: 100px;
height: 3px;
background-color: rgb(197, 206, 204);
align-items: center;
}
.money{
justify-content: space-between;
display: flex;
}
.DTN > button{
background-color: #fff;
color: rgb(46, 64, 73);

}
.DTN > button:hover{
background-color: #080808;
color: #fff;
cursor: pointer;}
.uc{
display: flex;
align-items: center;
}
.uc > div > p{
font-family: myfont;
color: #ff6d6d;
font-size: large;
}
.mc{
position: relative;
padding-left: 500px;
}
#ourcause{
background-color:rgb(236, 241, 240);
justify-content: flex-start;
padding: 70px;
color: rgb(46, 64, 73);
 }
.grid3{
display: flex;
position: relative;
background-color: #fff;
}
#slider{
display: flex;
column-gap: 40px;
}
.grid-item1{
background-color: #fff;
width: 370px;
height: 680px;
position: relative;
overflow: hidden;
align-items: center;
img{
width: 370px;
height: 350px;
font-size: larger;
}
p{
color: rgb(46, 64, 73);
font-size: x-large;
font-weight: bold;
text-align: center;
}
}
.don{
padding: 25px;
button{
background-color: rgb(46, 64, 73);
color: white;
}
button:hover{
background-color: #fff;
color:rgb(46, 64, 73);
border-color: rgb(46, 64, 73);
}
}
.dline5{
border-radius: 100px;
width: 250px;
height: 3px;
 background-color: #ff6d6d;
}
.dline4{
display: flex;
position: relative;
padding: 25px;
}
.dline6{
border-radius: 100px;
width: 50px;
height: 3px;
background-color: rgb(197, 206, 204);
align-items: center;
}
.dline7{
border-radius: 100px;
width: 150px;
height: 3px;
background-color: #ff6d6d;}
.dline8{
border-radius: 100px;
width: 150px;
height: 3px;
background-color: rgb(197, 206, 204);
align-items: center;}
.dline9{
border-radius: 100px;
width: 260px;
height: 3px;
background-color: #ff6d6d;}
.dline10{
border-radius: 100px;
width: 40px;
height: 3px;
background-color: rgb(197, 206, 204);
align-items: center;}
.money2{
display:flex;
font-size: 5px;
justify-content: space-between;
padding-left: 25px;
position: relative;
padding-right: 25px;
}
#NP{
 justify-content:center;
display: flex;
align-items: center;
column-gap: 400px;
padding: 50px;
button{
height: 60px;
width: 60px;
border-radius: 100px;
background-color: #fff;
}
button:hover{
background-color: rgb(46, 64, 73);
color: #fff;
}
img{
height: 25px;
width: 25px;
}
}
#volu{
background-image: url(image12.jpg);
opacity: 2px;
color: #fff;
font-size: x-large;
div{
padding: 60px;
}
p{
font-family: myfont;
font-size: x-large;
}
img{
width: 400px;

}
}
.bc{
background-color: #2e4049fb;
display: flex;
}
.box{
border: 1px solid white;
width: 400px;
padding-left: 40px;
 font-size:45px;
padding-bottom: 100px;
input{
color: #fff;
}
button{
background-color: #fff;
color: #2e4049;
}
button:hover{
background-color:#77d7d3;
color: #fff;
}
}
.box2{
height: 50px;
width: 350px;
background-color: transparent;
border: 1px solid white;
padding-right: 10px;
color: #fff;
}
.box2 > placeholder{
color: #fff;
}
.box3{
width: 350px;
height: 150px;
background-color: transparent;
border: 1px solid white;
padding-right: 10px;
}
:-ms-input-placeholder{
color: #fff;
opacity: 1px;
}
::placeholder{
color: #fff;
opacity: 1px;
padding-left: 20px;
}
#wwd{
padding: 60px;
text-align: center;
font-size: x-large;
}
.help{
width: 850px;
padding-left: 300px;
font-size:large;
text-align: center;
color: #727272;
}
h4{
font-size: x-large;
}
.help1{
display: flex;
column-gap: 50px;
}
.help2{
display: flex;
column-gap: 50px;
}
.wwdi{
padding-left: 70px;
background-color: #2e4049;
font-size:medium;
color: white;
}
#projectz{
padding-top: 25px;
display: grid;
grid-auto-rows: 300px 200px;
height: 200px;
}
.projectz{
display: grid;
grid-template-columns: 640px 350px 250px;
grid-template-rows: 350px 500px 500px;
position: relative;
font-family: myfont2;
img{
width: 350px;
height: 350px;
}
}
.projectz1{
display: grid;
position: relative;
 grid-template-columns: 320px 320px 350px 250px;
.EH{
background-color: #ff6d6d;
height: 350px;
padding-left: 30px;
color: #fff;
.EH1{
padding-top: 200px;
display: flex;
column-gap: 20px;
position: relative;
button{
background-color: #8145456e;
border-radius: 80px;
height: 1px;
}
button:hover{
background-color: #77d7d3;
color: #080808;
}
}
}
}
.ppl{
column-gap: 20px;
display: flex;
padding-left: 250px;
align-items: center;
.ppl1{
background-color: #dddddd;
color: #2e4049;
height: 175px;
width: 390px;
text-align: start;
padding-left: 40px;
padding: 10px;
display: flex;
.quote{
height: 40px;
width: 60px;
}
img{
height: 175px
}
.frr{
 padding-left: 15px;

}
}
}
#people{
position: absolute;
padding-top: 550px;
text-align: center;
.Au1{
text-align: center;
color: #ff6d6d;
padding-left: 200px;
font-size: x-large;
}
}
#NP2{
justify-content:center;
display: flex;
align-items: center;
padding: 50px;
padding-left: 300px;
button{
cursor: pointer;
height: 60px;
width: 60px;
border-radius: 100px;
background-color: #fff;
border: 1px solid #7272729c;
}
button:hover{
background-color: rgb(46, 64, 73);
color: #fff;
}
img{
height: 25px;
width: 25px;
}
}
.line3{
height: 1px;
width: 250px;
background-color: #727272;
position: relative;
align-items: center;
 opacity: 40%;
}
#followers{
display: grid;
position: relative;
grid-template-columns: 200px 250px 250px 270px;
padding-top: 1100px;
text-align: center;
font-family:myfont2 ;
color: #2e4049;
padding-left: 200px;
font-size: 20px;
font-weight: 20px;
column-gap: 20px;
h1{
font-size: 55px;
}
}
#ll{
padding-left: 200px;
padding-top: 50px;
.ll{
align-items: center;
border-radius: 100px;
width: 1000px;
border: 1px solid #2e4049;
background-color:#3e4c53ab ;
opacity: 20%;
height: 0%;
}
}
#logo{
display: grid;
grid-template-columns: 145px 145px 145px 145px 145px;
position: relative;
padding: 50px;
align-items: center;
padding-left: 250px;
column-gap: 40px;
img{
width: 150px;
}
}
#team{
background-color:rgb(197, 206, 204);
height: 600px;
text-align: center;
color:#2e4049;
.team0{
font-size: x-large;
p{
color: #ff6d6d;
font-family: myfont;
}
}
.team1{
display: flex;
position: relative;
column-gap: 20px;
height: 90px;
padding-left: 250px;
.hc0{
background-color: #77d7d3;
width: 200px;
height: 350px;
color: #2e4049;
padding-left: 10px;
position: relative;
button{
background-color: #2e4049;
padding-left: 30px;
color: #dddddd;
font-size: medium;
}
}
.hc{
display: flex;
padding-left: 30px;
padding-top: 10px;
h3{
text-align: center;
}
img{
height: 50px;
width: 50px;
align-items: center;
}
}
img{
width: 200px;
 }
}
}
.HC{
button{
cursor: pointer;
height: 70px;
width: 70px;
border-radius: 100px;
background-color: #fff;
position: relative;
}
}
.acc{
position: relative;
width: 30px;
height: 40px;
display: flex;
column-gap: 15px;
padding-left: 50px;
img{
width: 20px;
height: 20px;
}
}
.ou{
font-size: x-large;
color: #2e4049;
p{
color: #ff6d6d;
font-family: myfont;
}
}
.date{
display: flex;
font-size: small;
font-family: myfont2;
font-weight: bold;

}
.location{
height: 30px;
text-align: center;
align-items: center;
width: 300px;
 background-color: rgb(197, 206, 204);
font-size: smaller;
color: #2e4049;
p{
padding: 7px;
}
}
#ou{
display: flex;
position: relative;
font-family: myfont2;
width: 1000px;
color: #2e4049;
padding: 75px;
padding-left: 100px;
font-weight: 30px;
h3{
color: #2e4049;
}
}
.june{
height: 120px;
width: 110px;
background-color: #2e4049;
font-family: myfont2;
text-align: center;
color: white;
font-size: x-large;
padding-top: 10px;
font-weight: bold;
}
.djune{
display: flex;
font-size: 12px;
}
.line4{
height: 1px;
width: 500px;
background-color: #727272;
align-items: center;
opacity: 40%;
}
#djune{
padding-top: 250px;
column-gap: 25px;
}
.ou1{
display: flex;
.mr{
width: 200px;
position: absolute;
padding-left: 900px;
}
}
.adate{
.location{
display:flex ;
width: 400px;
img{
height: 25px;
width: 25px;
}
}
.bda{
height: 1px;
width: 450px;
background-color: #727272;
align-items: center;
opacity: 40%;
}
img{
width: 450px;
}
}
.org{
display: flex;
align-items: center;
font-weight:900px;
p{
color: #ff6d6d;
}
}
#blog{
display: grid;
grid-template-columns: 770px 570px;
position: relative;
height: 240px ;
::placeholder{
color: #727272;}
.rblog{
 background-image: url(image4.jpg);
opacity: 2px;
font-size: large;
.rblog1{
background-color: #77d7d2d3;
width: 570px;
opacity: 2px;
height: 250px;
font-family: myfont;
div{
padding-left: 50px;
padding-top: 25px;
}
h2{
font-family: myfont2;
}
}
}
.lblog{
background-color: #ff6d6d;
font-size: medium;
padding-left: 50px;
color:white;
.frm{
padding: 20px;
display: flex;
column-gap: 10px;
}
.box4{
background-color: white;
border-radius: 100px;
border-color: transparent;
height: 40px;
width: 300px;
}

}
p{
font-family: myfont;
font-size: larger;
}
button{
background-color: #2e4049;
color:white;
height: 40px;
 }
}
#finish{
background-color: #2e4049;
color: white;
padding-top: 80px;
font-size: medium;
width: 1340px;
.finish4{
padding-left: 300px;
}
.finish1{
width: 700px;
column-gap: 25px;
display: flex;
.logo2{
display: flex;
column-gap: 35px;
align-items: center;
.logo2b{
img{
padding: 2px;
position: absolute;
align-items: center;
}
.p, .t, .f{
padding: 5px;
}
position: relative;
border-radius: 100px;
width: 35px;
height: 35px;
background-color: rgba(245, 243, 243, 0.404);
}
}
.a{
width: 260px;
}
.finish2{
background-color: rgba(255, 255, 255, 0.103);
color: white;
padding-left: 15px;
font-family: myfont2;
display: flex;
column-gap: 25px;
 width: 500px;
font-size: small;
}
}
.finish3{
border-radius: 100px;
height: 1px;
width: 1337px;
background-color: #727272a2;
border-color: #7272728a;
border: 1px solid #727272a2;
position: relative;
}
.finish5{
padding-left: 600px;
}
}

Sure, let's break down each component of the CSS style and discuss how it can be used:

1. **#topbar**: This defines the styling for a top navigation bar. It sets properties like font size, font
weight, color, flex direction, display, height, and cursor.

Usage: This can be used for the top navigation bar of a website to style its appearance and behavior.

2. **#grid**: Defines a CSS grid layout with two columns and automatically sized rows.

Usage: Used for creating grid-based layouts on web pages where content needs to be organized in a
grid structure.

3. **#contact**: Styles for a contact section, including flex layout, padding, alignment, and color.

Usage: Suitable for styling a section containing contact information on a webpage.

4. **a**: Styles for anchor (link) elements, including transitions, color, and background color.

Usage: Applies styles to all anchor elements, providing consistent appearance and behavior for links
across the website.

5. **#socialmedia**: Styles for a social media section, including flex layout, padding, alignment, and
color.

Usage: Can be used to style a section displaying social media icons or links.

6. **#detail**: Styles for a detailed section, including background color, flex layout, padding, alignment,
and width.

Usage: Suitable for styling a section providing detailed information or features.

7. **#first** and **#second**: Styling for specific sections, including margins, padding, font size, and
width.

Usage: Can be applied to different sections of a webpage to control their appearance and layout.

8. **#animation**: Styles for an element with animation, including position, float, and color.

Usage: Can be used to animate specific elements on a webpage.

9. **#info**: Styles for an informational section, including flex layout, column gap, and position.
 Usage: Suitable for styling sections containing informational content.

10. **button**: Styles for buttons, including alignment, padding, border radius, font size, color, and
background color.

Usage: Used to style buttons across the website for consistent appearance and behavior.

11. **#menu**: Styles for a menu section, including position, padding, width, font weight, and color.

Usage: Suitable for styling a menu bar or navigation menu on a webpage.

12. **.home**, **.about-us**, **.pages**, **.link**, **.link2**: Styles for different types of links or
navigation items, including padding, font weight, background color, and color.

Usage: Can be applied to different navigation items or links within a menu.

13. **#donate** and **#DD**: Styles for a donation section, including alignment and padding.

Usage: Suitable for styling a section dedicated to donation-related content.

14. **#content**: Styles for a content section, including padding.

Usage: Can be used to style a section containing main content on a webpage.

15. **.containerpic** and **.inner**: Styles for container elements and inner content, including
positioning, font size, and color.

Usage: Can be used to create containers for images or other content with specific styling.

16. **.intro** and **#povertycircle**: Styles for introduction and poverty circle sections, including
padding, alignment, and color.

Usage: Suitable for styling introductory sections or sections focused on specific topics.

17. **#D**: Styles for a specific section, including display, padding, cursor, and position.

Usage: Can be applied to various sections of a webpage to control their appearance and behavior.

18. **.contentbox**: Styles for content boxes, including width, height, border radius, background color,
opacity, and text alignment.

Usage: Suitable for creating stylized content boxes to display information or features.

19. **#grid2**: Styles for a grid layout, including display, position, grid template columns, padding, and
text alignment.

Usage: Used to create grid-based layouts for organizing content on a webpage.

20. **.grid2-item1**, **.grid2-item2**, **.grid2-item3**: Styles for specific items within a grid layout,
including background color, padding, font size, and color.
 Usage: Can be applied to individual items within a grid layout to control their appearance.

These are just some of the components and their corresponding styles from the provided CSS. Each
component serves a specific purpose and can be customized and reused across different sections of a
website to maintain consistency in design and layout.

Here's a breakdown of each component of the CSS style you provided and how it can be used:

1. #topbar: This styles a top navigation bar. It sets properties like font size, font weight,
color, flex-direction, display, box-sizing, cursor, and height. This can be used to design
the top navigation bar of a website.

2. #grid: Styles a CSS grid layout, setting properties for columns, rows, display, and auto
columns. It can be used to structure content in a grid layout.

3. #contact: Styles a contact section, setting properties like display, padding, flex-direction,
align-items, column-gap, and color. This could be applied to a contact information
section on a website.

4. a: Styles anchor elements, setting transition properties for background-color and color, as
well as default color and background-color. This can be used to style links throughout the
website.

5. #socialmedia: Styles a section for social media links, setting properties like display,
padding, column-gap, justify-content, align-items, and height. This can be used for a
section containing social media icons or links.

6. #detail: Styles a detail section, setting properties like background-color, display, height,
align-items, column-gap, width, and padding. It can be used for displaying detailed
information with icons or other content.

7. #first: Styles a section with margin and padding properties. This can be applied to the
first section of a webpage to set specific margins and padding.

8. #second: Styles a section with font size, justify-content, padding, width, and height
properties. It can be used for a secondary section with content and spacing.

9. #second-grid: Styles a section with properties for display, flex-direction, and align-items.
This can be applied to a section where content needs to be displayed in a grid layout.

10. #animation: Styles a section with position, float, and color properties. This can be used
for elements requiring animation effects.
And so on for the remaining components...

Certainly, here are the remaining components:

11. **#info**: Styles a section with properties for display, column-gap, and position. This can be used
for a general information section.

12. **button**: Styles button elements with properties like align-self, padding, justify-content, align-
items, border-radius, display, font-size, font-weight, background-color, color, and border-color. This can
be used to style buttons across the website.

13. **#menu**: Styles a menu section with properties for position, display, color, padding, margin,
width, and font-weight. This can be applied to a menu navigation area.

14. **.home, .about-us, .pages, .link, .link2**: Styles navigation links with properties for padding,
border, font-weight, and background-color. These can be used for different types of navigation links on
the website.

15. **#donate**: Styles a donation section with properties for align-content and justify-content. This
can be used to align and justify content within a donation section.

16. **#DD**: Styles a section with properties for display and column-gap. This can be used for a section
containing dropdown menus.

17. **#ime**: Styles a section with padding-top. This can be used to add spacing at the top of a section.

18. **#vid > a**: Styles anchor elements within a specific section with a color property. This can be used
to style video links or embeds.
19. **#content**: Styles a content section with padding-bottom. This can be used to add spacing at the
bottom of a content section.

20. **a > img**: Styles images within anchor elements with a specific width. This can be used to control
the size of images within links.

These are just a few examples of how each component can be utilized in styling various sections of a
website. Depending on the specific design requirements and layout of the website, these styles can be
customized and applied accordingly.