body {
 text-align: center;
 padding: 2.5%;
 font-family: 'Times New Roman', Times, serif;
 background-color: lightblue;
 background-image: url("bg-image/1.jfif");
 color: #fff;
}

.profile {
    height: 200px;
    width: 200px;
    border-radius: 100px;
}

.bio-data {
    height: 250px;
    width: 30%;
    display: inline-table;
    margin: 10px;
    background-color: turquoise;
    border-radius: 15px 25px;
    text-align: justify;
}

.bio-data h3 {
    margin: 5px;
}

.bio-data li {
    margin: 5px;
}

.project {
    height: 250px;
    width: 20%;
    display: inline-table;
    margin: 10px;
    background-color: turquoise;
    border-radius: 15px 25px;
}

.section-wrapper {
    display: inline-flex;
}

.portfolio-card-content {
    text-align: left;
}

.detailed-project-content {
    width: 50%;
    margin: 1% 25% 1% 25%;
    border: solid 1px #000;
    text-align: center;
}

.social-profile-icon {
    height: 50px;
    width: 50px;
    margin: 5px;
}

@media screen and (min-width: 300px) and (max-width: 480px) {
    .section-wrapper {
        display: block;
        min-width: 100%;
    }

    .MuiCard-root {
        min-width: 100%;
    }

    #root button {
        width: 30%;
        height: 80px;
    }
    
    .MuiCardHeader-root {
        height: 5em !important;
    }
    
    .MuiTypography-body1 {
        font-size: 1.5rem !important;
    }
    
    .MuiTypography-body2 {
        font-size: 1.5rem !important;
    }
    
    .MuiButton-label {
        font-size: 1rem !important;
    }
    
    .detailed-project-content {
        width: 80%;
        margin: 1% 5% 1% 5%;
    }
  }

  /* Portrait and Landscape */
@media screen 
and (device-width: 360px) 
and (device-height: 640px) 
and (-webkit-device-pixel-ratio: 2) {
    .section-wrapper {
        display: block;
        min-width: 100%;
    }

    .MuiCard-root {
        min-width: 100%;
    }

    #root button {
        width: 30%;
        height: 80px;
    }

    .MuiCardHeader-root {
        height: 5em !important;
    }
    
    .MuiTypography-body1 {
        font-size: 1.5rem !important;
    }
    
    .MuiTypography-body2 {
        font-size: 1.5rem !important;
    }
    
    .MuiButton-label {
        font-size: 1rem !important;
    }
    
    .detailed-project-content {
        width: 86%;
        margin: 1% 6% 1% 6%;
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  /* Styles */
    .section-wrapper {
         display: block;
         min-width: 100%;
    }

    .MuiCard-root {
        min-width: 100%;
    }

    #root button {
        width: 30%;
        height: 80px;
    }

    .MuiCardHeader-root {
        height: 5em !important;
    }
    
    .MuiTypography-body1 {
        font-size: 1.5rem !important;
    }
    
    .MuiTypography-body2 {
        font-size: 1.5rem !important;
    }
    
    .MuiButton-label {
        font-size: 1rem !important;
    }

    .detailed-project-content {
        width: 86%;
        margin: 1% 6% 1% 6%;
    }
}

/* (320x480) iPhone (Original, 3G, 3GS) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* insert styles here */
}
 
/* (320x480) Smartphone, Portrait */
@media only screen and (device-width: 320px) and (orientation: portrait) {
    /* insert styles here */
}
 
/* (320x480) Smartphone, Landscape */
@media only screen and (device-width: 480px) and (orientation: landscape) {
    /* insert styles here */
}
 
/* (480x800) Android */
@media only screen and (min-device-width: 480px) and (max-device-width: 800px) {
    /* insert styles here */
}
 
/* (640x960) iPhone 4 & 4S */
@media only screen and (min-device-width: 640px) and (max-device-width: 960px) {
    /* insert styles here */
}