:root{
    --text-span-color:#ff004f;
}


@media (max-width:960px) {
  .main{
    flex-direction: column-reverse;
    gap: 50px;
  }
  .home{
    height: auto;
  }
 }
@media (max-width:550px) {
    .box{
        height: 500px;  
    }
    .message{
        width: 80%;
    }
}
@media (max-width:450px) {
    .box{
        height: 400px;
        width: 400px;
    }
   .message{
    padding: 10px;
   }
  

    /* -------text-contents---- */
   .key-btn{  /*  glowing button a */
    flex-direction: column-reverse;
    justify-content: start;
    align-items: start;
    gap: 5px;
    }
    .key-btn a{
        width: 100%;
        border-radius: 10px;
    }

    .text-content h1{
        /* hi there */
        font-weight: 800;
        height: 70px;
        font-size: 4rem;
    }
    .text-content h4{
        /* its me  */
        font-weight: 700;
        font-size: 2rem;
        margin: 0;
    }
    .text-content h3{
        font-weight: 700;
        font-size: 2rem;
        margin: 0;
    }
}
@media (max-width:400px) {
    .box{
        height: 350px;
        width: 350px;
       
    }
}
@media (max-width:360px) {
    .box{
        height: 320px;
        width: 320px;
    }
    .buttons{
       height: fit-content;
    }
    .buttons .icon{
        height: 30px;
        width: 30px;
        border: 2px solid #ff004f;
        border-radius: 50px;
        font-size: 14px;   
     }
    .key-btn a{
        width: 100%;
        border-radius: 10px;   
        font-size: 14px;
        font-weight: 400;
        padding: 3px 10px;
        border: 2px solid #ff004f;
     }
    .text-content h1{
        /* hi there */
        font-weight: 700;
        height: 50px;
        font-size: 2.5rem;   
    }
    .text-content h4{
        /* its me  */
        font-weight: 600;
        font-size: 1.5rem;       
    }
    .text-content h3{
        font-weight: 600;
        font-size: 1.5rem;     
    }
}
@media (max-width:250px) {
    .box{
        height: 200px;
    }
    
}