/* Global Scope */

html{
    cursor: url('./images/Homework-Cursor.png'), auto;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    background: url("") no-repeat center fixed;
    background-size: cover;
    background-color: #D36532; 
}

p {
    font-size: 11px;
    color: white; 
    font-family: 'Exo 2', sans-serif; 
    font-weight: 300;
    font-size: 1.1rem;
}

a {
    text-decoration: none;
    color: white;
}

img {
 
}
h6{
    font-size: 2.5em;
    font-weight: 00;
    color: white;
    font-family: 'Exo 2', sans-serif; 
}
section{
    padding: 4rem 0;
}

h2{
    font-family: 'Press Start 2P', cursive; 
    position: relative;
    color: #D36532;
    -webkit-text-stroke: .0 yellow;
    font-size: 4rem;
    box-sizing: border-box;

}

h2::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 1000%;
    height: 100%;
    color: yellow;
    -webkit-text-stroke: 0.0 yellow;
    border-right: 12px solid yellow;
    overflow: hidden;
    animation: animate 12s linear infinite;

}

@keyframes animate {
    0%, 20%, 100%
    {
        width: 0;
    }
    50%,90%
    {
        width: 100%;
    }
}


/*End global*/

/*Start reusable*/

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

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

.title-gif{
    max-width: 105%;
 /*   margin-bottom: 100px; */
}


.has-margin-right{
    margin-right: 25px;
}


/*End reusable*/



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


.nav-link{
    color: yellow;
    font-family: 'Press Start 2P', cursive; 
    font-size: 3rem;
    padding: 0;
    margin: 2rem 0;
    
}

.nav-link:hover,
.nav-link:focus{
    font-family: 'Press Start 2P', cursive; 
    background: linear-gradient(to top,  #77F5C2 , yellow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: yellow;

}

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


li{
    margin: 0 1rem;
}


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

}

.menu-toggler{
    position: fixed;
    top: 3rem;
    right: 3rem;
    height:2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1500;
    transition: transform 650ms ease-out;

}

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

}

.bar{
    background:linear-gradient(to right, #77F5C2 , yellow);
    width: 100%;
    height: 4px;
    border-radius: .2rem;
    
}

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

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

}

.bar.end{
    align-self: flex-end;
    transform-origin: left;
    transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57,0.57)
}

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

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

.landing-text h1{
    font-size: 15vh;
    font-family: 'Press Start 2P', cursive; 
    background: linear-gradient(to top,  #77F5C2 , yellow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 1rem;
    user-select: none;

}

.landing-text h6{
    font-size: 2.5rem;
    font-weight: 300;
    margin-top: -5.5rem;
    color: white;
    font-family: 'Exo 2', sans-serif; 
}

/*End header*/





/*Start about*/

.about .container{
    display: flex;
    align-items: center;
    justify-content: center; 
   
    

}

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

}


.about .container p{
    color: white; 
    font-family: 'Exo 2', sans-serif; 
    font-weight: 10000;
    font-size: 1.5rem;
    }




.Mnnrz-Logo{
    
    width: 450px; 
    height: auto;
    float: left;
    shape-outside: url('./assets/images/MNNRZ-LOGO-Small.png');
    shape-margin: 10px;
    margin-top: -45px;
}

.wrapper{
    max-height: 450px;
    display: flexbox;
    overflow-y: auto;
}





/* 
.social-media{
    margin-top: -2rem;
    margin-left: 25px;
    filter: invert(100%);
  -webkit-filter: invert(100%);
  text-align: center;
 */
}

.nav-social{
    /* list-style: none; */
    display: inline-flex ; 
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 55px;
 
    
}
.nav-wrapper{
    width: 100%;
    height: 100%;
    margin: 0 3rem 0 3rem ;
    display: inline-flex ;
    justify-content: center;
    align-items: center;
    text-align: center;
    
}

.social-p {
    font-size: 15px;
    color: white; 
    font-family: 'Exo 2', sans-serif; 
    font-weight: 300;
    margin-right: 25px;
   
}
.social-thumb{
    height: 40px;
    width: auto;
    margin-left: 5px;
    color: white;
    text-align: center;
    margin-top: 20px;
    border: 2.5px solid #D36532;
    vertical-align: -18px;
  
}

.social-thumb:hover{
    /* border: 2.5px solid #77F5C2; */
  
}
/* 



/*End about*/



/*Start services*/
/*End services*/



/*Start portfolio*/


.portfolio-item{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5rem;
    padding: 0px 35px 0px 35px;
   
}

.portfolio-item:last-child{
        margin-bottom: 0;
}

.portfolio-description img{
    width: 600px;
    height: auto;
    float: left;
    padding-top: 1rem ;
}
.portfolio-description-right img{
    width: 600px;
    height: auto;
    float: right;
    padding-top: 1rem ;
}


.portfolio-description-right{
    flex: 1;
    float: right;
}


.portfolio-description{
        flex: 1;
        float: left;
}

.portfolio-item h4{
    font-size: 1.7rem;
    text-transform: uppercase;
    font-weight: 300;
    color: yellow;
    font-family: 'Press Start 2P', cursive; 
    margin: 10px 0px 10px 0px;
}

.portfolio-item h5{
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 300;
    margin: 30px 0px 10px 0px;
    font-family: 'Exo 2', sans-serif; 
    color: aqua;
}

.portfolio-item .cta{
    font-weight: 1000;
    font-family: 'Exo 2', sans-serif; 
    font-size: 16px ;
    color: yellow;
    
}

.portfolio-item .view-details{
    display: inline-block;
    margin-top: .5rem;
    background-color: #77F5C2; 
    border: solid yellow 2px;
    width: 250px;
    line-height: 20px;
    text-align: center;
}

.pportfolio-item .cta:hover{
    color: #77F5C2;
}

.portfolio-description .view-details:hover{
    background-color: yellow; 
    border: solid #77F5C2 2px;
}


/*End services*/



/*Start timeline*/


.timeline{

    display: flex;
    align-items: center;
    justify-content: center; 
    text-align: center;
}
.timeline ul{
    border-left: 4px solid #77F5C2;
    border-radius: .8rem;
    background-color: #D36532;
    margin-left: 400px;
    position: relative;
    padding: 5rem;
    list-style: none;
    text-align: left;
    width: 70%;

}

.timeline h1{
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 300;
    margin-bottom: 1rem;
    opacity:  80%;
    text-transform: uppercase;
        font-weight: 300;
        color: yellow;
        font-family: 'Press Start 2P', cursive; 
}

.timeline .date{
    border-bottom: 1px solid #77F5C2;
    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: -19rem;
    text-align: right;
    min-width: 5rem;
    font-size: 11px;
    line-height: 20px;
    color: yellow;
    background-color: #77F5C2 ;
    boorder: 2px yellow solid;
    font-family: 'Press Start 2P', cursive; 
    font-weight: 400;
}

.timeline .date::after{
    content: '';
    box-shadow: 0 0 0 4px yellow;
    border-radius: 100%;
    left: -6.9rem;
    height: 1.5rem;
    width: 1.5rem;
    background-color: #d46e3e;
}

.experience h6{
    font-size: 2em;
    font-weight: 00;
    color: white;
    font-family: 'Exo 2', sans-serif; 
    margin: .2rem;
}

.timeline h5{
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 300;
    margin: 4px;
    font-family: 'Exo 2', sans-serif; 
    color: aqua;
}

.resume-link{
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 300;
    margin-bottom: 1rem;
    opacity:  80%;
    text-transform: uppercase;
        font-weight: 300;
        color: aqua;
        font-family: 'Press Start 2P', cursive; 
}

.resume-link:hover,
.resume-link:focus{
  
    color: yellow ;

}


/*End timeline*/



/*Start contact*/

.contact{
        font-size: 1.7rem;
        text-transform: uppercase;
        font-weight: 300;
        color: yellow;
        font-family: 'Press Start 2P', cursive; 
}

.contact h6{
    font-size: 2em;
    font-weight: 00;
    color: white;
    font-family: 'Exo 2', sans-serif; 
    margin: 2rem;
}

.title-contact-gif {
    max-width: 105%;
    margin-left: -150px;    
}
form{
    width: 70%;
    margin: 0 auto;
}

form label{
    font-size: 1.5rem;
}

form input{
    margin-bottom: 1.5rem;
}

form select{
    margin-bottom: 1.5rem;
}
form textarea{
    margin-bottom: 1rem;
}


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

input[type="submit"]{
    font-weight: 10000;
    font-family: 'Press Start 2P', cursive; 
    font-size: 16px ;
    width: initial;
    background-color: yellow;
    color: aqua;
    padding: 1rem 2rem;
    border-radius: .8rem;
    cursor: pointer;
    transition: background-color 650ms;
}


input[type="submit"]:hover{
    background-color: aqua;
    color: yellow;
}

/*End contact*/



/*Start footer*/

.copyright{
    width: 100%;
    text-align: center;
    padding: .5rem 0;
    position: relative;
}

.green-border { 
    border-bottom: #77F5C2 solid 5px ;  
    max-width: 100%;
}
/* 
.up{
    position: absolute;
    width: 5rem;
    height: 5rem;
    background: #D36532;
    border: 3px solid yellow;
    top: -2.5rem;
    right: 5rem;
    border-radius: 100%;
    display: flex;
    animation: pulse 2s infinite;
}

.up i{
    color: yellow;
    font-size: 2rem;
    margin: auto;
} */



/*End footer*/



/*Start animations*/



/* @keyframes pulse{
    0%{
        box-shadow: 0 0 0 0 rgba(253, 87, 191, 0.99);
    }
    70%{
        box-shadow: 0 0 0 0 rgba(253, 87, 191, 0);
    }
    100%{
        box-shadow: 0 0 0 0 rgba(253, 87, 191, 0);
    }

}
 */

/*End animations*/



/*Start media queries*/
 
@media screen and (max-width: 1250px){

    .landing-text h1{
        font-size: 12vh;
    }
    .landing-text h6{
        font-size: 2.1rem;
    }
    .nav-list{
        width: 90%;
        height: 100%;
        flex-direction: column;
    }
    li{
        margin: 2.5rem 0;
    }
    .nav-link{
        font-size: 2.5rem;
    }

    h2{
        font-size: 2.6rem;
    }
    
}
/* everything under 768px */
@media screen and (max-width: 768px){

    body {
        width: 100%;
        height: 100%;
        background-size: cover;
    }
    .landing-text h1{
        font-size: 12vh;
    }
    .landing-text h6{
        font-size: 2.5rem;
    }
    .nav-list{
        width: 85%;
        height: 100%;
        flex-direction: column;
    }

    li{
        margin: 2rem 0;
    }
    .nav-link{
        font-size: 2.5rem;
    }

    section{
        padding: 8.5rem 0 1rem 0;
    }

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

    .section-heading h6{
        font-size: 1.5rem;
        font-weight: 00;
        color: white;
        font-family: 'Exo 2', sans-serif; 
    }

    .Mnnrz-Logo{
    
        width: 500px; 
        height: auto;
        margin: 5px;
        float: inline-start;
        
    }
    .about {
        margin-top: -4rem;
    }

    .about .container p{
        color: white; 
        font-family: 'Exo 2', sans-serif; 
        font-weight: 1000;
        font-size: 1.5rem;
        text-align: center;
        }
    
  
    .portfolio-description img{
        width: 800px;
        height: auto;
    }
        
    .portfolio-description-right img{
        width: 600px;
        height: auto;
        float: right;
        padding-top: 1rem ;
    }
    
    
    .portfolio-description-right{
        flex: 1;
        float: right;
    }
    
    .timeline ul{
   
        margin-left: 200px;
       
        width: 80%;
    
    }

    h2{
        font-size: 1.5rem;
    }


    .timeline h1{
        font-size: 1.5rem;
       
    }

}



/* everything under 500px */
@media screen and (max-width: 500px){

    body {
        width: 100%;
        height: 100%;
        background-size: cover;
    }
    .landing-text h1{
        font-size: 4rem;
    }
    
    .landing-text h6{
        margin-top: 2rem;
        font-size: 2rem;
    }

    .menu-toggler{
        top: 2rem;
        right: 2rem;

    }

    section{
        padding: 8.5rem 0 1rem 0;
    }

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

    .section-heading h6{
        font-size: 1.5rem;
        font-weight: 00;
        color: white;
        font-family: 'Exo 2', sans-serif; 
    }

    .Mnnrz-Logo{
    
        width: 500px; 
        height: auto;
        float: inline-start;
        
    }
    .about {
        margin-top: -4rem;
    }

    .about .container p{
        color: white; 
        font-family: 'Exo 2', sans-serif; 
        font-weight: 1000;
        font-size: 1.5rem;
        text-align: center;
        width: 93%;
        }
    
  
    .portfolio-item {
        text-align: center;
    }


    .portfolio-description img{
        width: 450px;
        height: auto;
        margin-bottom: 15px;
    }
    
  

    .portfolio-description-right img{
        width: 450px;
        height: auto;
        margin-bottom: 15px;
    }
    
    
    .portfolio-description-right{
        flex: 1;
    }

    .title-contact-gif {
        max-width: 550px;
        margin-left: -70px;    
    }
    form{
        width: 70%;
        margin: auto 40px ;
    }


    .timeline ul{
   
        margin-left: 250px;
        width: 50%;
    
    }
    .timeline {
        width: 50%;
    }

    h2{
        font-size: 1rem;
    }
    
    .timeline h1{
        font-size: 1rem;
       
    }


}




/*End media queries*/