*{
	box-sizing: border-box;
}

body {
	background-image: url("purplejellyfish.jpg");
	font-family: Arial, Helvetiva, sans-serif;
	background-repeat: no-repeat;
	background-size: cover;
}

 .guestbook {
   width: 80%;
   max-width: 700px;
   height: 600px;
   margin: auto;
   border: 4px solid #5a8dee;
  background: purple;
 }

header {
	background-image: url("purpleheader.jpg"); 
	background-size: auto auto;
	background-position:top-right;
	background-repeat: repeat;
	background-attachment:fixed;
	padding: 15px;
	text-align: center ;
	font-size: 40px;
	color: white;
}

/* Container for flexboxes */
section {
	display: -webkit-flex;
	display: flex;
}

/* style the navigation menu*/
 nav {
	 -webkit-flex: 1;
	 -ms-flex:1;
	 flex:1;
	 background:none;
	 padding:20px;
	 height: 110px;
	 width: 10px;
 }
	
 
 /*stlye the list inside the menu*/
 nav ul {
	 list-style-type:none;
	 padding:0;
 }
 
 /*style the content */
 article {
	 -webkit-flex: 3;
	 -ms-flex:3;
	 flex:3;
	 background-image: url("purplebody.jpg");
	 background-repeat: no-repeat;
	 background-size: cover; 
	 padding:10px;
	 border: 20px solid transparent;
	 border-image-source: url('purpleborder.jpg');
	 border-image-slice: 30;
	 border-image-repeat: round;
	 color: white;
	 font-size: 39px;
	 width: 1300px;
	 height: auto;
	 margin-left: auto;
	 margin-bottom: 150px;
	 
	
}



 /*Paragraph 1 properties*/
 p {
	 color: white;
	 margin: 1em;
	
 }
 
 

 
 h1 {
	 color: white;
	 font-size: 40px;
 }
 
 /*style the footer*/
 footer{
	 background-color: #777;
	 padding: 10px;
	 text-align: center;
	 color:blue;
 }

*{ box-sizing: border-box;
}

/*two columns*/
.column {
	float:left;
	width: 50%;
	padding: 10px;
}

/* clear floats*/
.row:after {
	content: "";
	display: table;
	clear:both;
}

/*responsive layout*/
@media (max-width: 600px) {
	section {
		-webkit-flex-direction: column;
		flex-direction: row-reverse;
	}

.Container {
	display: flex;
	flex-direction: row-reverse;
}


	
}

.about {
	display:flex;
	align-items:flex-start;
	flex-direction:row-reverse;
	gap: 10px;
}

.about img {
	width:311px;
	height:auto;
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 100px;
   background-image: url("purplegif.gif");
   background-repeat: repeat-x;
   background-size: auto 100%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #cf5fe8;
}

li a {
  display: block;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link and background color on hover */
li a:hover {
  background-color: #6c0a82;
  color: white;
}