@import url('https://fonts.googleapis.com/css?family=Montserrat|Roboto:300,400,700');

*{

	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
body{
	font-family: 'Montserrat','sans-serif';
	font-size: 16px;
	background-image: url('carbon_fibre.png');/* Background pattern from Subtle Patterns */
	text-align: center;   
}

h1, h2, h3{
	font-family: 'Roboto', 'sans-serif';
}
a{
    background-color: white;
    color: #222222;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}


.avatar{
	width: 180px;
	height: 180px;
	background-image:url('avatar1.jpg');
	background-size: cover;
	justify-content: center;
	align-items: center;
	border: 5px solid white;
	box-shadow: 2px 2px 2px 0 #333;
	-webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
    filter: grayscale(50%);
    margin-bottom: 10px; 
    overflow: hidden;
}

header{
	width: 100vw;
	height: 100vh;
	background-image: url('pexels-photo-262669.jpeg');
	background-size: cover;
	background-position: center;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    text-align: center;
    color: #f4f4f4;
    margin-bottom: 10px;
    text-shadow: 2px 2px 3px grey;
   
}
header a:link{
	background-color: lightgrey;
	border: 1px solid white;
	padding: 10px 20px;
	display: inline-block;
	font-size: 18px;
	cursor: pointer;
	color: #222222;
	border-radius: 4px;
	text-decoration: none;
}

header a:visited{
	text-decoration: none;
}
header a:hover{
	text-decoration: none;
    background-color: grey;
    color: white;
}
header a:active{
	background-color: lightgrey;
	border: 1px solid white;
	padding: 10px 20px;
	display: inline-block;
	font-size: 18px;
	cursor: pointer;
	color: #222222;
	border-radius: 4px;
	text-decoration: none;
}

.name{
	font-size: 50px;
	line-height: 1.2;
}

header p{
	margin-bottom:30px;
}
.welcome-note h2{
	font-size: 40px;
	margin-bottom: 80px;
}

 #main {
 	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: white;
}

#main h2, h3{
	color: #222222;
	padding: 10px;

}
#main p{
	color: #222222;
	padding: 10px;
}

#main ul{
	list-style: none;
}

#about-me{
	width: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-top: 50px;
}

#about-me p{
	padding-left:50px;
	padding-right:50px;
	text-align: justify;
}

#course-title{
	margin-bottom: 10px;
	padding: 10px;
}

#course-content{
	margin-bottom: 10px;
	padding: 10px;
}

#skills{
	width: 50%;
	margin-top: 10px;
	margin-bottom: 20px;
	
	padding-bottom: 20px;
	color: #382616;
	justify-content: center;
	align-items: center;
}

#skills .skill-container{
	width: 100%;
    background-color: #ddd;
    margin-bottom: 2px;  
    justify-content: center;
    align-items: center;
    align-self: center;
    margin:auto; 
}
#skills p{
	width: 100%;
	text-align:left;
	justify-content: center;
	align-self: center;
	align-items: center;
	padding:5px;
	margin: auto;
	
}

.skill{
    text-align: right;
    padding-right: 20px;
    line-height: 20px;
    color: white;
}

.htm {
    width: 60%; background-color: #bd081c;}
.css {
    width: 50%; background-color: #bd081c;}
.java {
    width: 60%; background-color: #bd081c;}
.python {
    width: 40%; background-color: #bd081c;}
.linux {
    width: 40%; background-color: #bd081c;}
.windows {
    width: 70%; background-color: #bd081c;}
.latex {
    width: 40%; background-color: #bd081c;}

footer{
	width: 100vw;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin-top: 10px;
	}
.footer-box{
	width: 100%;
	background: #000000;
	background-size: cover;
	
}	
.footer-box ul{
	height: 100%;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	list-style: none;
	padding: 15px;
	margin: 0;
}

.footer-box ul li{
	
	height: 100%;
	font-size: 25px;
	
	justify-content: center;
	align-items: center;
	padding:0px;
	margin-left: 10px;
	margin-right:10px;
}	

footer a{
	justify-content: center;
	align-items: center;
	background-color: black;
	padding: 0;
}

footer p{
	color: white;
	font-size: 12px;
	margin-top: 20px;	
}

.facebook{
	color: #3b5999;

	font-size: 20px;
}

.twitter{
	color: #55acee;
	font-size: 20px;
}

.linkedin{
	color: #0077B5;
	font-size: 20px;
}
.pinterest{
	color: #bd081c;
	font-size: 20px;
}
.codepen{
	color: white;
	font-size: 20px;
}

@media only screen and (min-width:768px){
    .container{
    	display: -ms-grid;
        display: grid;
        grid-template-columns: 150px 1fr 150px;
        -ms-grid-columns: 150px 1fr 150px;
    }
    
    header{
    -ms-grid-column:1;
    -ms-grid-column-span:3;
     grid-column: 1/4;
    -ms-grid-row: 1;
    }

    #main{
    	-ms-grid-column: 2;
    	-ms-grid-column-span: 1;
    	-ms-grid-row: 2;
    	grid-column: 2/3;
    }
    
    footer{
    	-ms-grid-column: 1;
    	-ms-grid-column-span: 3;
    	grid-column: 1/4;
    	-ms-grid-row: 3;
    }
}