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

body {
    background-color: black;
    background-image: url(sky.PNG);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

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

.links {
    transform: translate(500px, 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;
      }


.class {
    background: rgba(0, 0, 0, 0.5);
    width: 800px;
    color: rgb(9, 9, 9);
}

.plane {
    background: rgba(0, 0, 0, 0.5);
    width: 800px;
    color: rgb(9, 9, 9);
    transform: translate(300px, 0);
}

.WHAT {
    background: rgba(0, 0, 0, 0.5);
}

.english {
    background: rgba(0, 0, 0, 0.5);
    width: 800px;
    transform: translate(300px, 0);
    color: brown;
}

.video {
    transform: translate(400px, 0);
}

.hope {
    background: rgba(0, 0, 0, 0.5);
    transform: translate(500px, 0);
    width: 400px;
}

.steps {
    color: brown;
    background: rgba(0, 0, 0, 0.5);
    transform: translate(500px, 0);
    width: 400px;
}

.second {
    color: rgb(42, 165, 58);
    background: rgba(0, 0, 0, 0.5);
    transform: translate(450px, 0);
    width: 400px;
}



  .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) {
  .learn,
  .index,
  .links,
  .class,
  .plane,
  .english,
  .hope,
  .steps,
  .second,
  .video,
  .WHAT {
    width: 90%;
    transform: translate(0, 0);
    margin: 10px auto;
    display: block;
  }

  .learn1,
  .learn2,
  .learn3,
  .learn4,
  .learn5,
  .privacy {
    width: 90%;
    transform: translate(0, 0);
    margin: 10px auto;
    text-align: center;
    display: block;
  }

  body {
    background-position: center;
    background-size: cover;
  }
}
#back{
a{text-decoration: none;
color: blue;
}
transform: translate(-50px,0px);
}
#back :hover{
background-color: rgb(128, 128, 128);
  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;
  }
}