body {
  background-color: #E8F9FD;
  margin: 0px;
  text-align: center;
}

/*All The H1 / H2 / H3 / P / Horizontal-rules / Anchor-tags / spans-elements Styles*/

#amir-h1 {
  margin: 20% auto 3%;
}

h1 {
  margin: 30px auto 2px auto;
  font-size: 6rem;
  color: #334257;
  font-family: 'Dancing Script', cursive;
}

h2 {
  margin: 5% auto 1%;
  font-size: 3rem;
  text-align: center;
  color: #334257;
  font-family: 'Caveat', cursive;
}

h3 {
  width: 100%;
  font-size: 1.75rem;
  margin: 0;
  padding-bottom: 6%;
  text-align: center;
  color: #334257;
  font-family: 'Caveat', cursive;
}

p {
  line-height: 2;
  font-size: 25px;
  width: 60%;
  margin: 2% auto 5%;
  text-align: center;
  color: #334257;
  font-family: 'Patrick Hand', cursive;
}

#profile-p1 {
  width: 80%;
  height: auto;
  font-size: 1.4rem;
  margin: auto auto 7% auto;
  line-height: 2;
}
#profile-p2 {
  width: 85%;
  height: auto;
  margin: 7% auto 1%;
  font-size: 1.1rem;
  line-height: 2;
  border-radius: 10px;
  color:#fff;
  background-color: #334257;
}
#profile-p3 {
  width: 25%;
  height: auto;
  margin: auto auto 7% auto;
  font-size: 1.2rem;
  line-height: 2;
  border-radius: 10px;
  color:#fff;
  background-color: #334257;
}


hr {
  border: dotted #334257 6PX;
  border-bottom: none;
  width: 6%;
  margin: 10% auto;
}

a {
  font-size: 25px;
  color: #334257;
  font-family: 'Patrick Hand', cursive;
  margin: 10px 20px;
  text-decoration: none;
}

a:hover {
  color: #EAF6F6;
}

.Span-pro {
  color: #019267;
  text-decoration: underline;
}

.Span-good {
  color: #019267;
  text-decoration: none;
}

.Span-site {
  color: #019267;
  text-decoration: none;
}

.span-web {
  color: #019267;
}

.web1 {
  color: #334257;
  text-decoration: none;
}


#copyright-2022 {
  font-size: 0.90rem;
  padding-top:15px;
  margin-bottom: 0;
  color: #334257;
}

/*****************************All The Divs Styles******************************/

.container-fluid {
  text-align: center;
  width: 80%;
  margin: 0 auto 2%;
  background-color: #E8F9FD;
  padding-top: 2%;
}

/*************************All The Media screen Styles**************************/

@media only screen and (max-width: 900px) {
  #cloud-1 {
    width: 22%;
    position: absolute;
    right: 7%;
    top: 7%;
  }

  #cloud-2 {
    width:25%;
    position: absolute;
    left: 10%;
  }

  .mountain {
    width: 40%;
  }

  #amir-h1{
    font-size: 3rem;
    position: relative;
    z-index: 1;
  }
  h2{
  font-size: 1.5rem;
  }
  .Span-pro{
  font-size: 1.5rem;
  }
  #profile-p1 {
    width: 350px;
    height: auto;
    border: 5px solid;
    border-radius: 10px;
    font-size: 1rem;
    margin: auto auto 2% auto;
    line-height: 2;
  }
  #profile-p2{
    width: 350px;
    height: auto;
    font-size: 1rem;
    margin: auto auto 2% auto;
    line-height: 2;
  }
  #profile-p3{
    width: 350px;
    height: auto;
    font-size: 1rem;
    margin: auto auto 2% auto;
    line-height: 2;
  }
   #h2-of-trip-section{
   font-size: 1.6rem;
   }
   #p-of-trip-section{
     width: 60%;
     height: auto;
     color: #334257;
     background-color: #E8F9FD;
     font-size: 1.1rem;
     line-height: 2;
   }
   #get-in-touch{
   font-size: 2rem;
  }
  #p-of-contact-section{
    width: 60%;
    height: auto;
    border: 5px solid;
    border-radius: 10px;
    color: #E8F9FD;
    background-color: #334257;
    font-size: 1.2rem;
    line-height: 2;
  }

 }

/***************All of what is inside the middle-container1********************/
#h2-S-L{
  font-size: 2rem;
}
#middle-container1{
  width: 100%;
  height: 80%;
  margin-top: 2%;
  margin-bottom: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #E8F9FD;
}


#h3-my-lan {
  margin: 50px auto;
  width: 30%;
  padding: 5px;
  display: inline-block;
  text-align: center;
  color: #334257;
  border-radius: 10px;
  background-color: #D7E9F7;
  transition: all 1s;
}

#h3-my-lan:hover {
  width: 95%;
  color: #fff;
  border-radius: 30px;
  background-color: #334257;
}

#all-divs-lan{
  width: 70%;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #E8F9FD;
}

.frist-2-lan{
  display: inline-block;
  margin: 5% 5%;
}
.second-2-lan{
  display: inline-block;
  margin: 5% 5%;
}
.frist-2-rows-ski{
  display: inline-block;
}
.second-2-rows-ski{
  display: inline-block;
}
#h3-arabic{
margin: 25px;
width: 150px;
height: 40px;
padding: 10px;
font-size: 1.1rem;
border-radius: 10px;
color:#fff;
background-color: #334257;
transition-duration: 500ms;
transition-timing-function: ease-in;
}

#h3-arabic:hover .stars-span{
  display: block;
  position: relative;
  right:10px;
  box-shadow: 5px 5px 20px;
  background-color:#D7E9F7;
  width: 150px;
  height: 28px;
}

#h3-english{
margin: 25px;
width: 150px;
height: 40px;
padding: 10px;
font-size: 1.1rem;
border-radius: 10px;
color:#fff;
background-color: #334257;
transition-duration: 500ms;
transition-timing-function: ease-in;
}

#h3-english:hover .stars-span{
  display: block;
  position: relative;
  right:10px;
  box-shadow: 5px 5px 20px;
  background-color: #D7E9F7;
  width: 150px;
  height: 30px;

}

#h3-portugese{
margin: 25px;
width: 150px;
height: 40px;
padding: 10px;
font-size: 1.1rem;
border-radius: 10px;
color: #fff;
background-color: #334257;
transition-duration: 500ms;
transition-timing-function: ease-in;
}

#h3-portugese:hover .stars-span{
  display:block;
  position: relative;
  right:10px;
  box-shadow: 5px 5px 20px;
  background-color: #D7E9F7;
  width: 150px;
  height: 30px;
}

#h3-spanish{
margin: 25px;
width: 150px;
height: 40px;
padding: 10px;
font-size: 1.1rem;
border-radius: 10px;
color: #fff;
background-color: #334257;
transition-duration: 500ms;
transition-timing-function: ease-in;
}

#h3-spanish:hover .stars-span{
  display:block;
  position: relative;
  right:10px;
  box-shadow: 5px 5px 20px;
  background-color: #D7E9F7;
  width: 150px;
  height: 30px;
}
/*
.stars-span{
  display: none;
  border-radius: 10px;
  font-size: 1.0rem;
  padding: 6px 0;
  margin: 8px 0;
}
/*




/***********All of what is inside the middle-container2************************/

#middle-container2{
width: 100%;
height: 80%;
margin-top: 2%;
margin-bottom: 2%;
display: flex;
justify-content: center;
align-items: center;
background: #E8F9FD;
}

#h3-skills {
  width: 30%;
  margin-bottom: 50px;
  margin-top: 50px;
  padding: 5px;
  display: inline-block;
  text-align: center;
  color: #334257;
  background-color: #D7E9F7;
  border-radius: 10px;
  transition: all 1s;
}

#h3-skills:hover {
  width: 95%;
  color: #fff;
  border-radius: 30px;
  background-color: #334257;
}

/************Here is the row num 1 inside the middle-container2****************/

#all-divs-skills1{
  margin: 0 3%;
  text-transform: uppercase;
  display: inline-block;
  justify-content: center;
  align-items: center;
  background: #E8F9FD;
}

#h3-html{
  margin-bottom: 35%;
  width: 150px;
  height: 40px;
  padding: 10px;
  font-size: 1.1rem;
  border-radius: 10px;
  color:#fff;
  background-color: #334257;
}

#h3-html:hover .stars-span{
  display: block;
  position: relative;
  right:10px;
  box-shadow: 5px 5px 20px;
  background-color:#D7E9F7;
  width: 150px;
  height: 28px;
}
#h3-css{
  margin-bottom: 35%;
  width: 150px;
  height: 40px;
  padding: 10px;
  font-size: 1.1rem;
  border-radius: 10px;
  color:#fff;
  background-color: #334257;
}
#h3-css:hover .stars-span{
  display: block;
  position: relative;
  right:10px;
  box-shadow: 5px 5px 20px;
  background-color:#D7E9F7;
  width: 150px;
  height: 28px;
}

#h3-Bootstrap4{
  margin-bottom: 35%;
  width: 150px;
  height: 40px;
  padding: 10px;
  font-size: 1.1rem;
  border-radius: 10px;
  color:#fff;
  background-color: #334257;
}
#h3-Bootstrap4:hover .stars-span{
  display: block;
  position: relative;
  right:10px;
  box-shadow: 5px 5px 20px;
  background-color:#D7E9F7;
  width: 150px;
  height: 28px;
}

.stars-span{
  display: none;
  border-radius: 10px;
  font-size: 1.0rem;
  padding: 6px 0;
  margin: 8px 0;
}

/****************************Here is the row num 2*****************************/
#all-divs-skills2{
  margin: 0 3%;
  text-transform: uppercase;
  display: inline-block;
  justify-content: center;
  align-items: center;
  background: #E8F9FD;
}

#h3-Javascript{
  margin-bottom: 35%;
  width: 150px;
  height: 40px;
  padding: 10px;
  font-size: 1.1rem;
  border-radius: 10px;
  color:#fff;
  background-color: #334257;
}
#h3-Javascript:hover .stars-span{
  display: block;
  position: relative;
  right:10px;
  box-shadow: 5px 5px 20px;
  background-color:#D7E9F7;
  width: 150px;
  height: 28px;
}

#h3-Wordpress{
  margin-bottom: 35%;
  width: 150px;
  height: 40px;
  padding: 10px;
  font-size: 1.1rem;
  border-radius: 10px;
  color:#fff;
  background-color: #334257;
}
#h3-Wordpress:hover .stars-span{
  display: block;
  position: relative;
  right:10px;
  box-shadow: 5px 5px 20px;
  background-color:#D7E9F7;
  width: 150px;
  height: 28px;
}

#h3-PHP{
  margin-bottom: 35%;
  width: 150px;
  height: 40px;
  padding: 10px;
  font-size: 1.1rem;
  border-radius: 10px;
  color:#fff;
  background-color: #334257;
}
#h3-PHP:hover .stars-span{
  display: block;
  position: relative;
  right:10px;
  box-shadow: 5px 5px 20px;
  background-color:#D7E9F7;
  width: 150px;
  height: 28px;
}
/*
.stars-span{
  display: none;
  border-radius: 10px;
  font-size: 1.0rem;
  padding: 6px 0;
  margin: 8px 0;
}
/*
/******************************Here is the row num 3***************************/
#all-divs-skills3{
  margin: 0 3%;
  text-transform: uppercase;
  display: inline-block;
  justify-content: center;
  align-items: center;
  background: #E8F9FD;
}

#h3-SQL{
  margin-bottom: 35%;
  width: 150px;
  height: 40px;
  padding: 10px;
  font-size: 1.1rem;
  border-radius: 10px;
  color:#fff;
  background-color: #334257;
}
#h3-SQL:hover .stars-span{
  display: block;
  position: relative;
  right:10px;
  box-shadow: 5px 5px 20px;
  background-color:#D7E9F7;
  width: 150px;
  height: 28px;
}

#h3-Python{
  margin-bottom: 35%;
  width: 150px;
  height: 40px;
  padding: 10px;
  font-size: 1.1rem;
  border-radius: 10px;
  color:#fff;
  background-color: #334257;
}
#h3-Python:hover .stars-span{
  display: block;
  position: relative;
  right:10px;
  box-shadow: 5px 5px 20px;
  background-color:#D7E9F7;
  width: 150px;
  height: 28px;
}

#h3-React{
  margin-bottom: 35%;
  width: 150px;
  height: 40px;
  padding: 10px;
  font-size: 1.1rem;
  border-radius: 10px;
  color:#fff;
  background-color: #334257;
}
#h3-React:hover .stars-span{
  display: block;
  position: relative;
  right:10px;
  box-shadow: 5px 5px 20px;
  background-color:#D7E9F7;
  width: 150px;
  height: 28px;
}
/*
.stars-span{
  display: none;
  border-radius: 10px;
  font-size: 1.0rem;
  padding: 6px 0;
  margin: 8px 0;
}
/*

/********************************Here is the row num 4*************************/
#all-divs-skills4{
  margin: 0 3%;
  text-transform: uppercase;
  display: inline-block;
  justify-content: center;
  align-items: center;
  background: #E8F9FD;
}

#h3-Node{
  margin-bottom: 35%;
  width: 150px;
  height: 40px;
  padding: 10px;
  font-size: 1.1rem;
  border-radius: 10px;
  color:#fff;
  background-color: #334257;
}
#h3-Node:hover .stars-span{
  display: block;
  position: relative;
  right:10px;
  box-shadow: 5px 5px 20px;
  background-color:#D7E9F7;
  width: 150px;
  height: 28px;
}

#h3-Swift{
  margin-bottom: 35%;
  width: 150px;
  height: 40px;
  padding: 10px;
  font-size: 1.1rem;
  border-radius: 10px;
  color:#fff;
  background-color: #334257;
}
#h3-Swift:hover .stars-span{
  display: block;
  position: relative;
  right:10px;
  box-shadow: 5px 5px 20px;
  background-color:#D7E9F7;
  width: 150px;
  height: 28px;
}

#h3-Photoshop5{
  margin-bottom: 35%;
  width: 150px;
  height: 40px;
  padding: 10px;
  font-size: 1.1rem;
  border-radius: 10px;
  color:#fff;
  background-color: #334257;
}
#h3-Photoshop5:hover .stars-span{
  display: block;
  position: relative;
  right:10px;
  box-shadow: 5px 5px 20px;
  background-color:#D7E9F7;
  width: 150px;
  height: 28px;

}

/*
.stars-span2{
  display: none;
  border-radius: 10px;
  font-size: 1.0rem;
  padding: 6px 0;
  margin: 8px 0;
}
/*

/*******************************trip-photos-section****************************/

#trip-photos-section{
  width: 80%;
  height: 100%;
  margin: 0 auto;
  display: inline-block;
  line-height: 2;
}

#last-welcoming-section {
  margin: 2% 0 0;
}

#bottom-container {
  background-color: #79DAE8;
  padding: 30px 0 5px;
  margin-bottom: 0;
}

/***************************All the images Styles******************************/

#cloud-1 {
  position: absolute;
  right: 20%;
  top: 10%;
}

#cloud-2 {
  position: absolute;
  left: 10%;
}
.mountain {
  width: 80%;
}


.profile-pic {
  margin: 7%;
  width: 300px;
  height: 300px;
  border: 7px solid;
  border-color: #334257;
  box-shadow: 5px 5px 20px;
  border-radius: 100%;
}

.resume-pic1 {
  width: 150px;
  height: 150px;
  margin-bottom: 10%;
  border: 7px solid;
  border-color: #334257;
  box-shadow: 5px 5px 20px;
  border-radius: 100%;
}

.resume-pic2 {
  width: 150px;
  height: 150px;
  margin-bottom: 10%;
  border: 7px solid;
  border-color: #334257;
  box-shadow: 5px 5px 20px;
  border-radius: 100%;
}

.flag-1 {
  width: 20px;
  position: relative;
  right:19px;
  bottom: 2px;
  display: inline;
}

.flag-2 {
  width: 20px;
  position: relative;
  right:15px;
  bottom: 3px;
  display: inline;
}

.flag-3 {
  width: 20px;
  position: relative;
  right:8px;
  bottom: 3px;
  display: inline;
}

.flag-4 {
  width: 20px;
  position: relative;
  right:17px;
  bottom: 3px;
  display: inline;
}


/****************************All The logos Styles******************************/
.html-logo {
  width: 20px;
  position: relative;
  right:26px;
  bottom: 3px;
  display: inline;
}
.css-logo {
  width: 20px;
  position: relative;
  right:30px;
  bottom: 3px;
  display: inline;
}
.Bootstrap4-logo {
  width: 20px;
  position: relative;
  right: 10px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 100%;
  display: inline;
}
.Javascript4-logo {
  width: 20px;
  position: relative;
  right: 10px;
  bottom: 3px;
  display: inline;
}

.Wordpress-logo {
  width: 20px;
  position: relative;
  right: 6px;
  bottom: 3px;
  display: inline;
}

.php-logo {
  width: 20px;
  position: relative;
  right: 33px;
  bottom: 3px;
  display: inline;
}

.sql-logo {
  width: 20px;
  position: relative;
  right: 33px;
  bottom: 3px;
  display: inline;
}

.python-logo {
  width: 20px;
  position: relative;
  right:20px;
  bottom: 3px;
  display: inline;
}

.react-logo {
  width: 20px;
  position: relative;
  right:25px;
  bottom: 3px;
  display: inline;
}

.node-js-logo {
  width: 20px;
  position: relative;
  right:30px;
  bottom: 3px;
  display: inline;
}

.swift-logo {
  width: 20px;
  position: relative;
  right:25px;
  bottom: 3px;
  display: inline;
}

.Photoshop5-logo {
  width: 20px;
  position: relative;
  right: 6px;
  bottom: 3px;
  display: inline;
}


/**********************************All The Buttons Styles******************************************/

.btn {
  background: #334257;
  background-image: -webkit-linear-gradient(top, #334257, #334257);
  background-image: -moz-linear-gradient(top, #334257, #334257);
  background-image: -ms-linear-gradient(top, #334257, #334257);
  background-image: -o-linear-gradient(top, #334257, #334257);
  background-image: linear-gradient(to bottom, #334257, #334257);
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  font-family: 'Patrick Hand', cursive;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  margin-bottom: 50px;
  text-decoration: none;
}

.btn:hover {
  background: #79DAE8;
  background-image: -webkit-linear-gradient(top, #79DAE8, #28a2b8);
  background-image: -moz-linear-gradient(top, #79DAE8, #28a2b8);
  background-image: -ms-linear-gradient(top, #79DAE8, #28a2b8);
  background-image: -o-linear-gradient(top, #79DAE8, #28a2b8);
  background-image: linear-gradient(to bottom, #79DAE8, #28a2b8);
  text-decoration: none;
}