/* SPECIFIC CONTENT OF PAGE */

body{
    background-color: #a7b96f;
}

.top-text{
    text-align: center;
    margin-right: 50px;
    margin-top: -40px;
    padding: 0px;
}



.hero{
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px;
  background: transparent;

  display: grid;
  grid-template-columns: 1fr 3fr 5fr 1fr;  /* left / center / sidebar */
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sound  illu  poem"
    "free   free  poem"
    "butn   butn  butn"
    "butn2   butn2  butn2";
  gap: 20px;
  align-items: start;
}

.sound-btn{ grid-area: sound; justify-self: start;}
.illu{ grid-area: illu; }
.poem{ grid-area: poem; text-align: center; }
.butn{ grid-area: butn;}
.butn2{ grid-area: butn2;}

@media (max-width: 900px){

  .hero{
    grid-template-columns: 1fr;
    grid-template-areas:
      "sound"
      "illu"
      "poem"
      "butn"
      "butn2";
  }

}

.sound-btn{
    padding: 15px;
    border-radius: 100%;
    background-color: #3f7f8b;
    color: #2c5870;
    border: 4px solid #2c5870 ;
    font-size: 30px;
    transition: transform .08s ease, box-shadow .24s ease
}

.sound-btn:hover{
    transform: scale(1.09);
    box-shadow: 4px 4px 5px #74865c;
}

.illu img{
    max-width: 150px;
    height: auto;
    margin-top: 40px;
    margin-left: -20px;
    transition: transform .68s ease
}

.illu img:hover{
    transform: scale(0.77) rotate(4deg);
    
}

.poem{
    margin-left: -20px;
    margin-right: -90px;
    margin-top: -20px;
    font-size: 15px;
    line-height: 25px;
}

.butn, .butn2{
    display: flex;
    align-items: center;
    padding-left: 35px;
    margin-right: 60px;
    border-radius: 25px;
    border: 4px solid black ;
    background: #74865c;



    transition: transform .08s ease, box-shadow .24s ease
}




.butn:hover, .butn2:hover{
    transform: scale(1.09) rotate(-1deg);
    box-shadow: 4px 4px 5px #74865c;
    cursor: pointer;
}