/* Start Global */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
    font-family: 'Montserrat', sans-serif;
    color:#eee
    
}

body {

    width: 100%;
    height: 100%;
    background: url("images/sitebg4.jpeg") no-repeat center fixed;
    background-size: cover;
      
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}


a {
    text-decoration: none;
    color:#eee;
    
}


p {
    font-size: 1.8rem;
   

}


img {
    width: 100%;
  

}





/* End Global */






/* Start reusuable */



/*.container {
    width: 90%;
    max-width: 120rem;
    height: 100%;
    margin:0;
    position: relative;
}*/

.section-heading {
    text-align: center;
    margin-bottom: 5rem;
}



.section-heading h1 {
    text-align: center;
    color:rgb(255, 255, 255);
    text-transform: uppercase;
    font-weight: 300;
    position: relative;
    margin-bottom: 1rem;
    font-size: 3.5rem;
    margin-top: 5rem;
    padding-top: 3rem;

}


.section-heading h6 {
    font-size: 2rem;
    font-weight: 300;
    text-align: center;
    font-family: 'Playfair Display', serif;
    color:rgb(239, 255, 151);

}



/*.has-margin-right {
    margin-right: 5rem;
}*/

/* End reusuable */




/* Start header */
header {
    width: 100%;
    height: 100vh;
}

#heading-primary-main {
    font-size: 48px;
    display: block;
    
    
}

.top-nav {
    width: 100%;
    height: 100vh;
    position: fixed ;
    top: -100vh;
    background-color: #16162d;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    transition: all 650ms cubic-bezier(1,0,0,1);
    z-index: 50;

}


.nav-list {
    list-style: none;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

li {

    margin: 0 2rem;
}

.nav-link{

    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    padding: 1rem;
    

}

.nav-link:hover,
.nav-link:focus{
    background: linear-gradient(to top, white,  rgb(182, 209, 29));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.top-nav.open {
    top: 0;
    border-radius: initial; 

}

.menu-toggler {
    position: absolute;
    top:5rem;
    right:5rem;
    width:5rem;
    height: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 1500;
    transition: transform 650ms ease-out;
       
}

.menu-toggler.open {
    transform: rotate(270deg);

}

.bar {
    background:  snow;
    width: 100%;
    height: 4px;
    border-radius: .8rem;
    
    
}

.open .bar .start {
    transform: rotate(-450deg) translateX(.8rem);
}

.open .bar .end {
    transform: rotate(-450deg) translateX(-.8rem);
}


.bar.half.start {
    
    width: 100%;
    height: 4px;
    border-radius: .8rem; 
    

}

.bar.half.start {
    
    transform-origin: right;
    transition: transform 650ms cubic-bezier(0.54,-0.81,0.57,0.57);
    
}







.landing-text h1 {

    font-size:10rem;
    font-family: 'Playfair Display', serif;
    background: snow;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding:1rem;
    user-select: none;
    font-weight: 400;
    
}

.landing-text {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
    text-align:center;

}

.landing-text h6 {

    font-size:2rem;
    font-weight: 400;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 100px;
    position: relative;
    bottom: -7rem;
}    

/* Start about */
.about .container {
    display: inline-flex;
    align-items: center;
    justify-content: center;  
    margin-left:  8rem;
    margin-right:  8rem;
    background-size: cover;
    backdrop-filter: blur(2px);
    background-color: rgba(17, 54, 63, 0.5);
    border-radius: .8rem; 
      
    
}

#about {
    width: 100%;
    margin-top: 15rem;
    margin-bottom: 15rem;
    
}


.about-heading h1{
    font-size: 10rem;
    opacity: 0.7;

    
    
}

.about-heading h6{
    font-size: 3rem;
    text-align: left;
    margin-left: 25rem;
    color: rgb(239, 255, 151);
    font-family: 'Playfair Display', serif;
    text-transform: lowercase;
    font-weight: 800;
    z-index: 200;
    
}


.about-heading {
    text-align: left;
    text-transform: uppercase;
    line-height: 0;
    margin-bottom: 6rem;
    
    
}

.profile-img img{
    margin-left: 4rem;
    margin-right: 4rem;
    display: inline-flex;
    width: 90%;
    border-radius: 25%;
    margin-top: 2rem;
    margin-bottom: 2rem;
   
}



ul.nav-list {
    list-style: none;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.about-details {
    display: flex;
    display: inline-block;
    margin-left: 4rem;
    margin-right: 4rem;
    text-align: left;
    
}






.social-media {
    margin-top: 5rem;
    
}


.social-media i{
    font-size: 4rem;
    transition: color 650ms;
    justify-content: space-between;
    margin-bottom: 30%;
    padding-right: 1rem;
}


.social-media .nav-list {
    display: inline-block;
    
       
   
}

.fa-linkedin-square:hover{
    color: snow;
    
     
}

.fa-github-square:hover{
    color: #4267b2;  
    
}

.fa-instagram-square:hover{
    color: #4267b2;   
}


/* End about */



/* Start Services */

.my-skills {
    margin-top: 4rem;
    text-align: center;
    display: flex;
    display: table-cell;
    
    
    

}

.skill {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background-size: cover;
       
       
}



#services {
    
    margin-left: 8rem;
    margin-right: 8rem;
    backdrop-filter: blur(2px);
    background-color: rgba(17, 54, 63, 0.5);
    border-radius: .8rem; 
    margin-top: 15rem;
    
}


#experience {
    background-size: cover;
    backdrop-filter: blur(2px);
    margin-top: 20rem;

}

#contact {

    margin-top: 20rem;
}



 
.skill h1{
    text-transform: uppercase;
    letter-spacing: 2px;
    margin:2rem -2px 2rem 0;
    color:snow;
    font-weight: bold;
    opacity: .7;
    font-size: 1.6rem;
    
    
    
    

}

.icon-container {
    width:10rem;
    height: 10rem;
    border: 3px solid snow;
    background-color: #16162d;
    display: flex;
    margin-bottom:2rem;
    transform: rotate(45deg);
    margin-top: 1rem;


}


.icon-container i{
    color:  snow;
    transform: rotate(-45deg);
    font-size: 5rem;
    margin: auto;
    

}

    



i.fas.fa-code:hover{
    -webkit-transition: -webkit-transform .5s;
    -webkit-transform: rotate(315deg) translateZ(0);    
    
}

i.fas.fa-water:hover{
    -webkit-transition: -webkit-transform .5s;
    -webkit-transform: rotate(315deg) translateZ(0);    
}

i.fas.fa-layer-group:hover{
    -webkit-transition: -webkit-transform .5s;
    -webkit-transform: rotate(315deg) translateZ(0);    
}






/* End Services */

/* Start portfolio */
.technologies h1 {
    text-align: center;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    font-weight: 300;
    position: relative;
    margin-bottom: 1rem;
    font-size: 3.5rem;
    margin-top: 5rem;
    padding-top: 3rem;
}
/* End portfolio */


/* Start timeline */

.timeline ul {
    border-left: 4px solid rgb(239, 255, 151);
    border-radius: .8rem;  
    margin: 0 auto;
    position: relative;
    padding: 5rem;
    list-style: none;
    text-align: left;
    width: 70%;
    background-color: rgba(17, 54, 63, 0.5);
    
    


}

.timeline h1 {
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #16162d;
    
    
   
    
}

.timeline .date {
    border-bottom: 1px solid;
    margin-bottom: 1rem;
    padding-bottom:1rem;
    position: relative;


}

.timeline .date:last-of-type{
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;

}

.timeline.date::before,
.timeline.date::after{
    position: absolute;
    display: block;
    top:50%;
    transform: translateY(-50%);
    

}

.timeline .date::before{
    content: attr(data-date);
    left: -21rem;
    text-align: right;
    min-width: 12rem;
    font-size: 1.5rem;
    color: #16162d;
    

}

.timeline.date::after{
    content: '';
    box-shadow: 0 0 0 4px rgb(239, 255, 151);
    border-radius: 100%;
    left: -7.7rem;
    height: 1.5rem;
    width: 1.5rem;
    

}





/* End timeline */



/* Start Contact */



form {

    width: 70%;
    margin: 0 auto;
}

form label {
    font-size: 1.5rem;

}

input,
select,
textarea {
    width: 100%;
    padding-bottom: 1rem;
    margin-bottom: 5px;
    border: none;
    outline-color: #16162d;

}

input[type="submit"]{
    width: initial;
    background-color: #16162d;
    color:#eee;
    font-weight: bold;
    padding: 1rem 2rem;
    border-radius: .8rem;
    cursor: pointer;
    transition: background-color 650ms;
}


input[type="submit"]:hover{
    background-color: rgb(239, 255, 151);
    color: #16162d;

}

textarea {
    font-family: 'Playfair Display', serif;
    font-weight: 10;
    font-size: 1.5rem;
    color:lightgray;
    
}

label {
    color: #16162d;
    font-weight: bold;
    font-family:  "Roboto", sans-serif;
    
}





/* End Contact */


/* Start footer */
.copyright {
    width: 100%;
    text-align: center;
    background-color: #16162d;
    padding: 2rem 0;
    position: relative;

}

.up {
    position: absolute;
    width: 5rem;
    height: 5rem;
    background-color: #eee;
    top: -2.5rem;
    right: 5rem;
    border-radius: 100%;
    display: flex;
    animation: pulse 2s infinite;
    cursor: pointer;
}

.up i{
    color: #16162d;
    font-size: 2rem;
    margin:auto
}

.copyright p {
    font-size: 1.4rem;
}



/* End footer */

/* Start animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 255, 151,0.99);
    }
    70% {
        box-shadow: 0 0 0 2rem rgba(239, 255, 151,0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 255, 151,0);
    }

}
/* End animations */

/* Start technologies */


  

.technologies .container{
   
    
    align-items: center;
    justify-content: center;  
    margin-left:  8rem;
    margin-right:  8rem;
    background-size: cover;
    backdrop-filter: blur(2px);
    
    border-radius: .8rem; 
    

}

.technologies h1 {
    margin-top: 1rem;
    
}

.icon-technologies .icon {
    
    padding: 0 4rem;
    justify-content: center;
    display: table-cell;
    align-items: center;
    display: inline-block;

    
    
}

.icon-technologies {
   
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    font-size: 8rem;
    align-items: center;
    justify-content: center;  
    position: relative;
    padding: 0 auto;
    margin-top: 15rem;
    margin-bottom: 5rem;
    
    

}

.icon-technologies h6 {
    margin-top: 1.5rem;
    font-size: 1.6rem;
    opacity: .7;
    

}


.icon:hover,
.icon:focus{

    -webkit-text-fill-color: #16162d;
    transform: scale(1.1);
    transition: transform .5s;
    background:rgba(239, 255, 151,0.5);
    border-radius: 20%;
    
        
}



/* End technologies */

/* Media queries */


@media only screen and (max-width: 1160px)  {
    body { 
        background: url("images/sitebg5.png") no-repeat center fixed;
        background-size: cover;        
    }


    .about .container {
        display: block;
      
        
    }

    .profile-img img {
        margin-left: 4rem;
        margin-right: 4rem;
        display: inline-flex;
        width: 35%;
        border-radius: 10%;
        margin-top: 2rem;
        margin-bottom: 2rem;
        
    }

    .social-media .nav-list {
        display: flex;
    }

    .my-skills {
        display: block;
      
        
    }
  

 
}


@media only screen and (max-width: 768px) {




    body:after{
        content:"";
        position:fixed; /* stretch a fixed position to the whole screen */
        top:0;
        height:100vh; /* fix for mobile browser address bar appearing disappearing */
        left:0;
        right:0;
        z-index:-1; /* needed to keep in the background */
        background: url("images/sitebg5.png") center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        font-family: 'Playfair Display' serif;

  }



    .landing-text h1 {
        font-size: 8rem;
        font-family: 'Playfair Display' serif;
    }

    .landing-text h6 {
        font-size: 1.7rem;
    }

    .social-media i {
        padding-bottom: 2rem;
    }

    .social-media .nav-list {
        display: -webkit-inline-box;
        margin-left: 4rem;
   }


    li {
        margin: 2rem 0;
    }

    .nav-link {
        font-size: 3rem;
        font-family: 'Playfair Display' serif;
    }

    .about-heading {
        font-size:8rem;
    }



    ul.nav-list {
        flex-direction: column;
    }

    .my-skills {
        display: inline;
    }

    .section-heading h6 {
        font-family: 'Playfair Display' serif;
    }


}





@media only screen and (min-width: 320px) and (max-width:425px) {

    body:after{
        content:"";
        position:fixed; /* stretch a fixed position to the whole screen */
        top:0;
        height:100vh; /* fix for mobile browser address bar appearing disappearing */
        left:0;
        right:0;
        z-index:-1; /* needed to keep in the background */
        background: url("images/sitebg5.png") center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        font-family: 'Playfair Display' serif;

  }

    

    #services {
        width:360px;
        margin:0 auto;
    }
    
  
    .technologies h1 {
        text-align: center;
    }

    .technologies .container {
        margin: auto;
    }
 

    .section-heading {
        text-align: center;
    }

    .menu-toggler {
        height: 3rem;
        right: 1.5rem;
        top: 1.5rem;
    }


   .about-details p {
       
       
       backdrop-filter: blur(2px);
       background-color: rgba(17, 54, 63, 0.5);
       border-radius: .8rem; 
       
       
   }

   .about .container {
       display: contents;
   }

    .profile-img img {
        width: 50%;
    }

    .about-heading h1 {
        margin-left: -5rem;
        
    }


    .about-heading h6 {
        
        display:  table-cell; 
        font-family:'Playfair Display' serif;
    
    }



   .social-media .nav-list {
        display: -webkit-inline-box;
        margin-left: 4rem;
   }
   
   .landing-text h1 {
        font-size: 7rem;
        font-family: 'Playfair Display', serif;
    }

    .landing-text h6 {
        font-size: 1.7rem;
        margin-bottom: 28px;
    }
    

    

}

@media only screen and (max-width: 360px) {

    body { 
        background: url("images/sitebg5.png") no-repeat center fixed;
        background-size: cover;        
    }

    .about-details p {
        margin-left: -3rem;
    }

    .landing-text h1 {
        font-size: 6rem;
    }

    .nav-link {
        font-size: 2.5rem;
    }

    .about-heading h6 {
        font-family: 'Playfair Display' serif;
    }
}


@media only screen and (max-width: 320px) {

    body { 
        background: url("images/sitebg5.png") no-repeat center fixed;
        background-size: cover;        
    }

   .about-details p {
       
       font-size: 1.8rem;
       justify-content: left;
       
   }
   

    .landing-text h1 {
        font-size: 5rem;
    }

    .about-heading h6 {
        
        display:  table-cell; 
    
    }

    .about-heading h1 {
        
        font-size: 9rem;
    
    }

    .skill {
        margin-right: 4rem;
    }

    #services{
        margin-right: 4rem;
    }

    #services h6{
        margin-right: 4rem;
    }

    #services h1{
        margin-right: 4rem;
    }

    .my-skills h1{
        margin-left: 4rem;
    }

  


}