.learn {
    background: rgba(255, 0, 0, 0.5);
    transform: translate(600px, 0);
    width: 300px;
  }
  
  .index {
    
    background: rgba(255, 255, 255, 0.5);
    width: 250px;

    
    transition: 0.3s;
}
  .index :hover{

  
    background-color: gray;
    color: gold;
    }
  
  body {
    background-image: url(sky.PNG);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  
  .place {
    background: rgba(255, 0, 0, 0.5);
    transform: translate(475px, 0);
    width: 600px;
  }
  
  .where {
    background: rgba(225, 225, 225, 0.5);
    transform: translate(680px, 0);
    width: 125px;
  }
  
  .every {
    background: rgba(255, 0, 0, 0.5);
    transform: translate(400px, 0);
    width: 750px;
    height: 65px;
  }
  .links{
  transform: translate(575px, 0);
  background: rgba(0, 0, 0, 0.5);
  width: 300px;
 
      display: inline-block;
    padding: 10px 20px;
    background-color: black;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    margin: 5px;
    transition: 0.3s;}
  
  
  .links :hover{

  
    background-color: gray;
    color: gold;
    }
  
  #fly {
    background: rgba(0, 0, 0, 0.5);
  }
  
  
  
  .learn1{
 transform: translate(300px,-5px);
  display: inline-block;
  padding: 10px 20px;
  background-color: rgb(9, 9, 9);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  margin: 5px;
  transition: 0.3s;
width: 115px;
height: 20px;
}


.learn1 :hover{


  background-color: gray;
  color: gold;
  
}


 
 .learn2{
transform: translate(300px,-5px);
  display: inline-block;
  padding: 10px 20px;
  background-color: rgb(9, 9, 9);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  margin: 5px;
  transition: 0.3s;
width: 120px;
height: 20px;
}


.learn2 :hover{


  background-color: gray;
  color: gold;
  
}


 
 .learn3{
transform: translate(300px,-5px);
  display: inline-block;
  padding: 10px 20px;
  background-color: rgb(9, 9, 9);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  margin: 5px;
  transition: 0.3s;
width: 280px;
height: 20px;
}


.learn3 :hover{


  background-color: gray;
  color: gold;
  
}



  
 .learn4{
transform: translate(300px,-5px);
  display: inline-block;
  padding: 10px 20px;
  background-color: rgb(9, 9, 9);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  margin: 5px;
  transition: 0.3s;
width: 60px;
height: 20px;
}


.learn4 :hover{


  background-color: gray;
  color: gold;
  
}
.learn5{
transform: translate(300px,-5px);
  display: inline-block;
  padding: 10px 20px;
  background-color: rgb(9, 9, 9);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  margin: 5px;
  transition: 0.3s;
width: 80px;
height: 20px;
}


.learn5 :hover{


  background-color: gray;
  color: gold;
  
}
.privacy{
transform: translate(-800px,-6px);
  display: inline-block;
  padding: 10px 20px;
  background-color: rgb(9, 9, 9);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  margin: 5px;
  transition: 0.3s;
width: 115px;
height: 20px;
}


.privacy :hover{


  background-color: gray;
  color: gold;
  
}

@media (max-width: 768px) {
  body {
    background-position: center;
    background-size: cover;
  }

  .learn,
  .index,
  .place,
  .where,
  .every,
  .links,
  #fly {
    width: 90% !important;
    transform: none !important;
    margin: 10px auto;
    display: block;
  }

  .learn1,
  .learn2,
  .learn3,
  .learn4,
  .learn5,
  .privacy {
    width: 90% !important;
    transform: none !important;
    margin: 10px auto;
    text-align: center;
    display: block;
  }

  /* لو فيه عناصر جنب بعض ممكن تعمل مشاكل */
  .links,
  .index {
    text-align: center;
  }
}
#back{
a{text-decoration: none;
color: blue;
}
transform: translate(-50px,0px);
}
#back :hover{
background-color: gray;
  color: gold;


}
@media (max-width: 768px) {
  #back {
    transform: translate(0, 0);
    text-align: center;
    padding: 10px;
  }

  #back a {
    display: block;
    color: blue;
    font-size: 18px;
  }
}