/*font-family: 'IM Fell English SC', serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'Poppins', sans-serif;
font-family: 'Roboto', sans-serif;*/
:root{
    --default-font-family: 'Poppins', sans-serif;
    --heading-font-family:  'Roboto', sans-serif;
    --primary-color:#814dfb;
    --secondary-color: #1f089803;
}
.new-image{
    border-radius: 15px;
    height: 90%;
}
.exercise-new-image{
    height: 90%;
    margin-left: 20px;
    width: 560px;
}
.container{
    background-color: var(--secondary-color);
    padding-bottom:150px;
    max-width: 100%;
    text-align: center;
}
.navbar-nav li{
    font-family:var(default-font-family);
}
.navbar-brand{
    font-family: var(default-font-family);
    padding: 1px 6px;
    border: 1.95px solid rgba(26, 15, 29, 0.767);
    border-radius:4px;
}

nav{
    background-color:var(--secondary-color);
}
.navbar-nav{
    text-align: left;
    font-size: 19px; 
}
.iAm{
font-family: Poppins;
font-size: 36px;
font-weight: 50;
line-height: 54px;
text-align: center;
display: block;
margin: 0 auto;
margin-top: 100px;  
}
h1{
font-family:var(--heading-font-family);
font-size: 96px;
font-weight: 700;
line-height: 128px;
letter-spacing: 0em;
}
h2{
font-family:var(--heading-font-family)!important;
font-size: 40px;
font-weight: 500;
text-align: left;
margin-top: 60px   
}


h3{
font-family: var(--default-font-family);
font-size: 24px;
font-weight: 400;
line-height: 36px;
letter-spacing: 0em;

}
p{
font-family:var(--default-font-family);
font-size: 16px;
font-weight: 400;
line-height: 30px;
text-align: left;
justify-content: center;
max-width: 400px;
}
.weatherApp, .weatherApp h2{
    text-align:center;
    margin-right: -30px;
 }
 .weatherApp p{
     text-align: left;
     margin: auto;
 }

.btn-branding{
    padding: 14px 40px!important;
    font-family: Poppins;
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    background: var(--primary-color);
    color: white;
    display: block;
    margin: 0 auto;
}
.btn-branding:hover{
    background-color: var(--secondary-color);
    border: 1px solid var(--primary-color);
}

.btn-branding-outline{
    border: 1px solid var(--primary-color);
    padding: 14px 20px;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 500;
    line-height: 10px;
    color: var(--primary-color);
}
.btn-branding-outline:hover{
    background-color: var(--primary-color);
   color: white;
}
h5{
font-family: var(--default-font-family);
font-size: 36px;
font-weight: 530;
line-height: 27px;
text-align: center;
margin: 0px auto 20px auto;
opacity: 0.95;
color: #814dfb;
}
.full-width-line {
    margin-top: 0;
    width: 100vw;
    border: none;
    height: 5px;
    background:#fa7bcd;
  }
.about-Me{
    padding: 140px 80px 10px;
}
.about-Me h2{
    font-family: var(--heading-font-family);
    font-size: 60px;
    font-family: Playfair Display;
    font-weight: 700;
    line-height: 75px;
    font-family: Playfair Display;
    margin-top: 1px;
}
.about-Me p{
    margin-bottom: -7px;
    max-width: 500px;
}
.about-Me img{
border-radius: 10px;
width: 530px;

}
h4{
font-family: var(--default-font-family);
font-size: 18px;
font-weight: 520;
line-height: 27px;
margin-top: 29px;
margin-bottom: 29px;
opacity: 0.9;
}
.projectsDisplay{
    margin: 0 100px;
}
.projectHeading{
    font-size: 53px;
    margin-top: 60px;
    margin-bottom: 50px;
}
.project h3{
    font-weight: 600;
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: -25px;
}
.project p{
    font-size: 14px;
    opacity: 0.7;
}
.project img{
    border-radius: 10px;
}
.contact{
    padding-left: 144px;
    padding-top: 80px;
}
.contact h2{
    margin-bottom: 40px;
    font-size: 54px;
}
.containerBox{
    background: var(--secondary-color);
    padding: 30px 300px;
    border-radius: 10px;
}
.contactBox{
    margin: 200px 90px;
}
.contactBox h2{
        margin-top: 0px;  
}
.socialLinks{
    margin-top: 80px;
}
.emailLink{
font-family: Poppins;
font-size: 20px;
font-weight: 500;
line-height: 36px;
color: black;
opacity: 0.8;
}
.icons a {
    margin: 0 20px;
    color: var(--primary-color);
    background: var(--secondary-color);
    padding: 10px 14px;
    border-radius: 50%;
    font-size: 18px;
    transition: all 100ms ease-in-out;
}
.icons a:hover{
    background-color: var(--primary-color);
    color: white;
}
.contactBox p{
    text-align: center;
    margin: 10px auto;
    max-width: 100%;
}
.active{
    color: var(--primary-color) !important;
}


@media(max-width:1000px){
    .iAm{
        margin-top: 55PX;
        margin-bottom: -30PX;
        font-size: 25px;
    }
    h1{
        font-size: 55px;
        margin-bottom: -20px;
    }
    h3{
        font-size: 21px;
        margin-bottom: -5px;
    }
    .homepage h2{
        font-size: 28px;
        font-weight: 800;
    
     }
    
    .container{
        background-color: var(--secondary-color);
        padding-bottom:75px;
        max-width: 100%;
        text-align: center;
    }
    h5{
        font-weight: 400;
        text-align: center;
        margin: 10px auto;
        opacity: 0.95;
        font-size: 13px;
        margin-bottom: 30px;
        }
       .project-description{
        text-align: center;
       }
       h2{
        text-align: center;
        margin-top: -50px;
       }
       p{
        text-align: center;
        font-size: 14px;
        display: block;
        margin: 0 auto;
        max-width: 80%;
       }
       .btn-branding-outline{
        margin-top: -15px;
       }
       .weatherApp p{
        text-align: center;
       }
      .weatherApp h2{
        text-align:center;
        margin-right: 0px;
        margin-top: 10px;
      }
        

     img{
        margin-bottom: 70px;
        max-width: 80%;
        margin-top: -45px;
     }
     .first_div {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2;
      }
    
       .second_div {
        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1;
      }
      .about-Me{
        text-align: center;
        padding-top: 50px;
        }
        .about-Me img{
            max-width: 100% !important;
            width: 500px;
            margin-bottom: 25px; 

        }
        .about-Me h2{
            font-family: var(--heading-font-family);
            font-size: 38px;
            font-weight: 700;
            line-height: 20px;
           
        }
        h4{
            font-size: 12px;
            font-weight: 550;
            line-height: 25px;
            margin: 18px 0;

        }
        .projectHeading{
           text-align: center;
            font-size: 30px;
            font-family: var(--heading-font-family);
            font-weight: 1000;
            margin-top: 40px;
            margin-bottom: 20px;
        }
        .project h3{
            font-weight: 500;
        }
        .project img{
            margin-top: 10px;
            max-width: 100%;
            width: fit-content;
            height: auto;
            margin-top: 25px;
            width: 500px;
        }
        .projectsDisplay{
            margin: 0 0px;
        }
        .contact{
            text-align: center;
            padding: 100px  50px  100px;
        }
        .contact h3{
            margin-top: 20px;
            margin-bottom: 0px;
        }
        #email{
           margin-left: -30px;
        
        }
        footer p{
            font-size: 13px;
            line-height: 1.8;
        }
        .contactBox{
            margin-top: 100px;
        }
        .line{
            margin-bottom: -60px !important;
            margin-top: 80px;
            max-width: 95%;
            margin-left: 10px;
            margin-right: 5px;
        }
        .navbar-nav{
            font-size: 15px; 
        }   
        
    }