/*Basic styling for the body of the page*/
body {
		background-image: url("Background-image.jpg");
		background-repeat: no-repeat;
		background-size:     cover;
}
/*Styling for the header class in the page*/
.header
{
	border: 1px double #666666;
	background-color: #666666;
    padding: 20px;
	color: #f5c26b; /*#37597e*/
    text-align: center;
	font-family: 'Dancing Script', cursive;
}

/* I used box sizing as it allows both divs to be of equal size*/
* {
    box-sizing: border-box;
}
/* Style for the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #666666;;
}

/* Style for the navigation links */
.topnav a {
    float: left;
    display: block;
    /*color: #f2f2f2;*/
    text-align: center;
    padding: 25px 40px;
    text-decoration: none;
	font-family: 'Source Serif Pro', serif;
	width: 50%;
	color: #f5c26b;
}

/* Change color of nav buttons on hover */
.topnav a:hover {
    background-color: grey;
	color: #f5c26b;
}	

/* I have created three unequal columns that float next to each other */
.column {
    float: left;
    padding: 10px;
	color: #666666;
}

/* Left and right column */
.column.side {			
    width: 25%;
	font-family: 'Source Serif Pro', serif;
}

/*Styling for the images in the side column*/
/*This one is specifically for stars that I have used in the skills in side class*/
.column.side img {
	float: left;
	max-width: 50%; 
}

/*Styling for the links in the side column*/
/*This one is specifically for the Social Media Links in the page*/
.column.side a {
	color: #37597e;
	font: 20px;
	font-family: 'Source Serif Pro', serif;
}


/* Stylling for the Middle column */
/*I want the middle column to be of maximum width*/
.column.middle {
    width: 50%;
	font-family: 'Source Serif Pro', serif;
}

/*Styling for the images in the middle column*/
.column.middle img{
	float: left;
	height: 50px;
	width: 50px;
}

/*A row class in the page consists of three unequal column classes. Side columns of width 25% each and middle column of width 50%*/
/* Clear floats after the columns */ 
.row:after {
    content: "";
    display: table;
    clear: both;
}

/*Styling for the lists in the page*/
ul.a {
    list-style-type: square;
	font-family: 'Source Serif Pro', serif;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column.side, .column.middle {
        width: 100%;
    }
}

@media screen and (max-width: 1900px) {
    .column.side h1 {
		width:200%;
		
    }
}

/*Styling for the Footer in the page*/
.footer {
    color: #666666;
    text-align: center;
	font-size: 18px;
	font-family: 'Dancing Script', cursive;
}