:root{
    --back:#010101;
    --color:#ffffffda;
}

body{
    background-color: var(--back);
    color: var(--color);
    margin: 0;
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    font-weight: 400;
    transition: 1s;
    /* color:rgb(0, 0, 0); */

}

section {
    padding: 5em 0em;
    position: relative;
}

strong {
    font-weight: bolder;
    font-size: 60px;
}

.wrapper{
    padding : 30px;
}

img{
    display: block;
    max-width: 100%;
    min-width:200px;
    max-height: 400px;
    object-fit: cover;
    border-radius: 1em;
    transition: .5s;
}
.intro__img{
    -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
  }

img:hover{
    transition : transform 1.5s;
    
}

h1,h2,h3{
    line-height: 1.1;
    margin: 0;
}

.section__head {
    font-size: 40px;
    padding: .7em;
}



/* TOP */



.nav {
    position: relative;
}
.nav__head {
    float: left;
    font-size: 30px;
    
}
.nav__head h2{
    color :rgba(46, 46, 46, 0.555)
}

.nav label{
    width:50px;
    height:20px;
    position:relative;
    display:block;
    background: #ebebeb;
    border-radius: 20px;
    box-shadow:inser 0px 1px 2px rgba(0,0,0,0.4), inset opx -1px 2px rgba(255,255,255,.4);
    cursor:pointer;
}
.nav label:after {
    content:"";
    width: 18px;
    position:absolute;
    top:1px;
    left:1px;
    background: linear-gradient(180deg,#ffcc89,#d8860b);
    border-radius:18px;
    box-shadow:0px 1px 1px rgba(0,0,0,0.2);
}
input{
    width:0;
    height:0;
    visibility:hidden;
}
input:checked + label{
    background: #242424;
}
input:checked + label:after{
    left:49px;
    transform:translateX(-100%);
    background: linear-gradient(180deg,#777,#3a3a3a);
}
label:checked + :root{
    --back:#ffffff;
    --color:#000000;
}

.nav__list {
    float: right;
}
.nav {
    align-content: center;
    margin-top: 0;
    padding: 1em;
    height:40px;
    line-height: 40px;
    display: block;
}
.nav__list {
    list-style: none;
    display: block;
    transition : transform .2s;
}

.nav__link{
    color:rgba(256,256,256,.5);
    text-decoration: none;
    padding : 1em;
    transition : color .3s;
}
.nav__link:hover {
    /* color: rgb(0, 0, 0); */
}


/* INTRO */


.intro{
    position:relative;
    display:grid;
}

@media ( min-width: 600px) {
    .intro {
        display: grid;
        max-width: 50%;
        position: relative;
        margin: 0 auto;
        grid-template-areas:
        "img title"
        "img subtitle";
    }

    
}


/* NAV */



/* ABOUT ME */

.about_me {
    margin-top: 200px;
    margin-bottom: 200px;;
    position : relative; 
}
.about_me_info{
    /* color:rgb(77, 77, 77); */
    font-size:25px;
    padding:1em;
    
    position: relative;
}
.about_text {
    width: 70%;
    margin:0 auto;
    transition: color .3s;
}
.about_text:hover{
    /* color:rgb(36, 36, 36) */
}

.about_me .about-back{
    font-size: 80px;
    width:100%;
    top:30%;
    text-align: center;
    color:#000000;
    text-shadow: 2px 2px 10px #b2b2b274;
    z-index:-1;
    margin-bottom: 60px;;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

@media only screen and (max-width: 768px) {
    .about_me_info{
        font-size:18px;
        padding:0em;
    }
    
    
    
}


/* video */


/*Projects */

.projects{
    display:block;
    
}

.project .container{
    padding:20px;
}
.projects .project{
    margin-top:60px;
    font-size: 25px;
}

.projects .project:nth-child(odd){
    display:flex;
    flex-direction: row-reverse;
}
.projects .project:nth-child(even){
    display:flex;
}
.projects .project .about-project{
    margin:30px;
    flex-basis: 100%;
}
.projects .project .project-logo{
    margin:30px;
    flex-basis: 100%;
}
.projects .project .project-logo img{
    transition: .5s;
    width: 100%;
    
}
/* .projects .project .project-logo img:hover{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
} */
.projects .project .project-logo{
    display:relative;
}
.projects .project .project-logo .text-over-image{
    
}


@media only screen and (max-width: 768px) {
   
    .projects .project:nth-child(odd){
        flex-direction: column;
    }
    .projects .project:nth-child(even){
        flex-direction: column;
    }
    .projects .project{
        margin-top:40px;
        font-size: 20px;
    }
    .nav__list{
    display:none;
  }
    
    
}
.section-title{
    font-size: 40px;
    text-align: center;
    margin-bottom: 40px;;
}

.project-logo {
    position: relative;
    width: 360px; /* can be omitted for a regular non-lazy image */
    max-width: 100%;
  }
  .project-logo img.image-hover {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    object-fit:cover;
    opacity: 0;
    transition: opacity .2s;
  }
  .project-logo:hover img.image-hover {
    opacity: 1;
  }

/*SKILLS*/

.my-skills{
    padding:20px;
    align-items: center;
}

.my-skills img{

    max-height: 100%;
    width:100%;
}

.my-skills .container{
    padding: 40px;
} 

/* FOOTER */

footer {
    background-color: rgba(100, 99, 99, 0.432);
    text-align: center;
    position: relative;
    padding-bottom: 2em;
}

.footer_info {
    padding: 2em;
}


.social_list {
    position :relative;
    padding-bottom: 30px;
}

.social__link {

    padding: 20px;
    text-decoration: none;
    color: white;
}
.social__link i{
    font-size: large;
}
.fab {
    transition : transform .4s, color .4s;
}

.social__link:hover .fab{
    color: white;
    transform: scale(1.2);
}

/* Mobile view */

@media only screen and (max-width: 600px) {
  .nav__list{
    display:none;
  }

}