@media screen and (min-width: 600px){
	body{
		font-size: 20px;
	}
	.title{
		font-size: 25px;
	}

	h1, h2{
		font-size: 60px;
	}

	header a.button, footer a.button{
		font-size: 25px;
	}



	#gallery li{
		width: 45%;
	}

	header{
		padding-top: 5%;
		padding-bottom: 5%; 
	}

	#gallery li div p.grey, #gallery li p{
		font-size: 23px;
	}

    footer #mail {
        font-size: 20px;
    }
}


@media(min-width: 968px){
  
    .xp-flex{
        flex-direction: row;
    }

    .xp-flex-content{
        width: 45%;
        margin-bottom: 0;
    }

    #intro{
        flex-direction: row;
    }

    #intro section{
        width: 50%;
    }

    footer #mail {
        font-size: 40px;
    }
}



@media screen and (min-width: 1200px){
	#intro section{
		
	}

	.title{
		font-size: 30px;
	}

	#intro div{
		margin-top: 5%;
	}

	body{
		font-size: 25px;
	}

	h1, h2{
		
	}

    
	header a.button, footer a.button {
	
	}

	#xp, #education{
		width: 100%;
	}

	#xp div, #education div{
		flex-direction: row;
		align-items: flex-start;
	}

	#gallery li{
		width: 28.33333333%;
	}

	#xp section p, #education section p{
		margin: 10% 5%;
	}

	header{
		padding-top: 1%;
		padding-bottom: 4%; 
	}

	#gallery li div p.grey, #gallery li p{
		font-size: 21px;
	}




}