@charset "utf-8";

/*Border-box the whole page*/
* {
box-sizing: border-box;
}

/*The whole page*/
body {
	text-align: center;
	margin: 0 auto;
	padding: 0;
}

/* header of the page*/
header {
	padding: 25px;
	text-align: center;
	background-color: #0c3ceb;
	color: #ffffff;
	font-size: 17px;
	 font-family: Arial, Helvetica, sans-serif;
	 font-weight: bold;
}

/*For movie title*/
h2 {
font-size: 35px;
color: #0c13eb;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}

/*Leave for rows*/
.row:after {
	content: "";
	clear: both;
	display: table;
}

/*Applying to all columns*/
[class*="col-"] {
	width: 30%;
	float: left;
	padding: 15px;
}

/*@media only screen and (max-width: 600px) {
/* For mobile phones: */
/*[class*="col-"] {
	width: 50%;*/
	/*float: left;
	padding: 15px;
	}
}*/ 

/* For desktop */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/*Border image for column*/
.col-9 {
	border: 20px solid transparent;
	padding: 15px;
	border-image: url('image/flower_border.jpg') 50 round;
	width: 100%;
	height: auto
}



/*Navigation butons for Home, About, Portfolio, and Contact*/
.button {
	background-color: #03b8ff;
	text-align: center;
	width: 100%;
}

/*Buttons in unordered list*/
.button ul {
	display: flex;
	list-style-type: none;
	margin: 0px;
	padding: 0;
	justify-content: center;
	font-family: Arial, Helvetica, sans-serif;
	 font-weight: bold;
}

/*Styling paragraphs*/
p {
	font-size: 25px;
	 font-family: Arial, Helvetica, sans-serif;
	 color: #0c13eb;
	 font-weight: bold;
}

/*Adjusting list buttons*/
.button li {
	display: grid;
 background-color: #0c13eb;
 color: white;
 padding: 19px;
 margin-bottom: 10px;
 width: 100%;
 justify-content: center;
 font-size: 25px;
 margin: 10px;
}

/*For Sonic image*/
img {
	width: 60%;
	height: auto;
	border: 10px solid #0c13eb;
}

/*Hover over the buttons*/
.button li:hover {
	background-color: #ffffff;
	border: 2px solid #0c13eb;
	color: #0c13eb;
	font-size: 30px;
}

/*Styling footer and paragraph*/
footer p {
	text-align: center;
	background-color: #0c13eb;
	border: 150px solid #0c13eb;
	color: #ffffff;
	font-size: 25px;
	font-weight: bold;
	margin-top: 0px;
}