@import url('https://fonts.googleapis.com/css2?family=Barriecito&family=Winky+Rough:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Winky+Rough:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Winky+Rough:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans+Arabic:wght@100..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Winky+Rough:ital,wght@0,300..900;1,300..900&display=swap');
/*imported fonts
.barriecito-regular {
  font-family: "Barriecito", system-ui;
  font-weight: 400;
  font-style: normal;
}

.winky-rough {
  font-family: "Winky Rough", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
.playpen-sans-arabic {
  font-family: "Playpen Sans Arabic", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
imported fonts*/

*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;

}
img{
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-size: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 0.75rem;
    border-radius: 10px;
}

body{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100px 100px minmax(300px, auto);
    background-color: azure;
    grid-template-areas: 
    "hd"
    "hd"
    "mn"
    "st"
    "ft";

}

/*Start of header*/
header{
    display: grid ;/*start of child grid*/
    grid-template-columns:1fr;
    grid-template-rows: auto;
    background-color: aliceblue;
    grid-area: hd;
    gap: 5px;
    padding: 5px;

}

#logo{
    align-items: center;
    align-content: center;
    text-align: center;
    background-color: aqua;
    border-radius: 10px;
    grid-area: 1;
   

}

#content{
    align-items: center;
    align-content: center;
    text-align: center;
    font-family: "Barriecito", system-ui;
    font-size: 1.8em;
    font-weight: 600;
    text-shadow: rgb(0, 0, 0) 2px 2px 2px ;
    color: rgb(255, 255, 255);
    background-color: rgb(85, 85, 85);
    border-radius: 10px;
    grid-area: 2;
    letter-spacing: 1px;
    margin-bottom: 20px;
    

}
/*End of header*/
/*Start of card*/
main{
    display: grid ;/*start of child grid*/
    grid-template-columns:1fr;
    grid-template-rows: auto;
    background-color: aliceblue;
    grid-area: mn;
    justify-items: center;
    gap: 5px;
    padding: 5px;
    background-image: url('../images/backGround/work-4051777.jpg');
    background-repeat: repeat;
    background-size: 100%;
    border-radius: 10px;
    
    

}
.card{
    display: grid ;/*start of child grid*/
    grid-template-columns:1fr;
    grid-template-rows: auto;
    background-color: rgb(122, 146, 167);
    max-width: 700px;
    align-items: center;
    align-content: center;
    text-align: center;
    gap: 5px;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.card > img{
    width: 100%;
    align-items: center;
    align-content: center;
    text-align: center;
    background-color: aqua;
    grid-area: 1;

}
.card > p{

    text-align: left;
}
.card > cs, p{

    text-align: center;
}
.card > h2{

    align-items: center;
    align-content: center;
    text-align: center;

}

.card > #ct{
    align-items: center;
    align-content: center;
    text-align: center;
    font-family: "Playpen Sans Arabic", cursive;
    background-color: rgb(177, 216, 216);
    border-radius: 10px;
    grid-area: 2;
    
 

}
.card #cs{
    align-items: center;
    align-content: center;
    text-align: left;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    background-color: rgb(234, 240, 240);
    grid-area: 3;
    padding: 20px;
    border-radius:10px ;
 

}

/*End of card*/

main{
    align-items: center;
    align-content: center;
    text-align: center;
    background-color: antiquewhite;
    grid-area: mn;
}

section{
    align-items: center;
    align-content: center;
    text-align: center;
    background-color: rgb(177, 216, 216);
    grid-area: st;
}

footer{
    align-items: center;
    align-content: center;
    text-align: center;
    background-color: aqua;
    grid-area: ft;
    height: 80px;
}