@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    margin: 0;
    font-family: 'Varela Round', sans-serif;
}
#mypho{
    border-radius: 100%;
    margin-right: 10rem;
    margin-top:5rem ;
    
}
#myphomob{
    border-radius: 100%;
}

#dekhero{
    padding-bottom: 10rem;
}

#linkimg{
 margin-left: -8px;

}
#linkimg1{
    margin-left: -8px;
   
   }

#proj1 {
    color: #0099ff
}
#proj2 {
    color: #0099ff
}
#proj3 {
    color: #0099ff
}



#proj1:hover {
    color: #3333cc; /* Change text color */  
}

#proj2:hover {
    color: #3333cc; /* Change text color */    
}

#proj3:hover {
    color: #3333cc; /* Change text color */   
}


/* #skilis{
    margin: 4rem;
}
.skiliele{
    margin: 2rem;
    color: rgb(157, 23 ,77);
    font-weight: bold;
}
.backg{
    margin: 4rem;
    background-color: white;
    border-radius: 50px;
    
}

   .skill-icon {
    position: absolute;
    width: 48px;
    height: 48px;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    opacity: 0;
    
}

.skill-icon-1 {
    top: 30%;
    left: 25%;
    transform: rotate(20deg);
}

.skill-icon-2 {
    top: 30%;
    right: 15%;
    transform: rotate(-15deg);
   
}


.skill-icon-3 {
    bottom: 20%;
    left: 25%;
    transform: rotate(10deg);
    
    
}

.skill-icon-4 {
    bottom: 20%;
    right: 20%;
    transform: rotate(-25deg);
    position: f;
}

.skill-icon-5 {
    bottom: 10%;
    right: 45%;
    transform: rotate(5deg);
}

.skill-icon-6 {
    bottom: 50%;
    left: 10%;
    transform: rotate(10deg);
} */

/* Keep existing desktop styles */
@media (min-width: 1025px) {
    #bgs{
        margin: 4rem;
        background-color: white;
        border-radius: 50px;
        height: 40rem;
        padding-left: 4rem;
        padding-right: 4rem;
        padding-top: 4rem;
    }
    #edu{
        margin: 4rem;
        background-color: white;
        border-radius: 50px;
        height: 27rem;
        padding-left: 4rem;
        padding-right: 4rem;
        padding-top: 4rem;
       
    }
    #skilis {
    margin: 4rem;
    }
    
    .skiliele {
        margin: 2rem;
        color: rgb(157, 23, 77);
        font-weight: bold;
    }
    
    .backg {
        margin: 4rem;
        background-color: white;
        border-radius: 50px;
    }
    
    .skill-icon {
        position: absolute;
        width: 48px;
        height: 48px;
        transition: transform 0.5s ease-out, opacity 0.5s ease-out;
        opacity: 0;
    }
    
    .skill-icon-1 {
        top: 30%;
        left: 25%;
        transform: rotate(20deg);
    }
    
    .skill-icon-2 {
        top: 30%;
        right: 15%;
        transform: rotate(-15deg);
    }
    
    .skill-icon-3 {
        bottom: 20%;
        left: 25%;
        transform: rotate(10deg);
    }
    
    .skill-icon-4 {
        bottom: 20%;
        right: 20%;
        transform: rotate(-25deg);
    }
    
    .skill-icon-5 {
        bottom: 10%;
        right: 45%;
        transform: rotate(5deg);
    }
    
    .skill-icon-6 {
        bottom: 50%;
        left: 10%;
        transform: rotate(10deg);
    }
    
}


/* #skilis {
    margin: 4rem;
}

.skiliele {
    margin: 2rem;
    color: rgb(157, 23, 77);
    font-weight: bold;
}

.backg {
    margin: 4rem;
    background-color: white;
    border-radius: 50px;
}

.skill-icon {
    position: absolute;
    width: 48px;
    height: 48px;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    opacity: 0;
}

.skill-icon-1 {
    top: 30%;
    left: 25%;
    transform: rotate(20deg);
}

.skill-icon-2 {
    top: 30%;
    right: 15%;
    transform: rotate(-15deg);
}

.skill-icon-3 {
    bottom: 20%;
    left: 25%;
    transform: rotate(10deg);
}

.skill-icon-4 {
    bottom: 20%;
    right: 20%;
    transform: rotate(-25deg);
}

.skill-icon-5 {
    bottom: 10%;
    right: 45%;
    transform: rotate(5deg);
}

.skill-icon-6 {
    bottom: 50%;
    left: 10%;
    transform: rotate(10deg);
} */

/* Media query for iPhone 12 (adjust as needed) */
@media only screen and (max-width: 844px) {
    /* Adjustments for mobile view */
    #skilis {
        margin: 4rem;
    }

    .backg {
        margin: 2rem;
        border-radius: 20px;
        height: 30rem;
      
    }

    .skiliele {
        margin: 0.5rem;
    }


}