:root {
    --colour1: #1A3636;
    --colour2: #40534C;
    --colour3: #677D6A;
    --colour4: #b99f79;
    --colour5: #f9e8cf;
    --colour6: #586c5b;
  }

html, body {
	padding: 10px;
	font-family: 'NSimSun', serif;
	color: var(--colour5);
    box-sizing: border-box;
    height: 100%;

    background-color: green;
    opacity: 1;
    background-image:  radial-gradient(#b7a07d 3px, transparent 3px), radial-gradient(#eacfa7 3px, #D6BD98 3px);
    background-size: 20px 20px;
    background-position: 0 0,10px 10px;
}


.container {
	max-width: 70rem;

	margin: 5vw auto 12px auto;
	display: flex;
	flex-wrap: wrap;
	padding: 10px;
    gap: 11px;
    justify-content: center;
    border: 5px solid var(--colour1);
	border-radius: 10px;
    box-sizing: border-box;

    
	/* container background pattern */
	background-color: var(--colour2);
}


/*column widths*/
.small { flex: 1 1 9%; }
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }


/*header*/
header {
    display: flex;
    justify-content: center;
	width: 100%;
	height: 100px;
	border: 3px solid var(--colour6);
	border-radius: 10px;
	position: relative;
    background: var(--colour3); /* linear-gradient(var(--colour2),var(--colour3)); */
    box-sizing: border-box;



}

header span {
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;

}



/*navigation*/
nav {
    width: 100%;
    height: 100%;
	border: 3px solid var(--colour6); 
	border-radius: 10px;
	padding: 5px;
	background: var(--colour3); /* linear-gradient(var(--colour2),var(--colour3)); */
    box-sizing: border-box;
}

nav a {
    height: 2.5rem;
	display: block;
    display: flex;
	margin: 5px;
	background: var(--colour2); /* linear-gradient(var(--colour2),var(--colour3)); */
	border-radius: 5px;
    text-align: center;
    justify-content: center;
    align-items: center;  
}

/*main body + gif gallery*/
section {
	border: 3px solid var(--colour6); 
	border-radius: 10px;
	background: var(--colour3); /* linear-gradient(var(--colour2),var(--colour3)); */
	padding: 5px;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
    align-items: center;  
}


/*footer*/
footer {
	text-align: center;
	margin-bottom: 5vw;
	font-size: 0.8rem;

	max-width: 10rem;
	margin: 12px auto 12px auto;
	outline: 3px solid var(--colour6); 
    background: var(--colour3); /* linear-gradient(var(--colour2),var(--colour3)); */
    box-sizing: border-box;
}


/*text*/
h1, h2, h3, h4, h5, h6, p  { 
	margin: 5px;
	line-height: 1.2;
	font-weight: normal;
}
h1 { 
	font-size: 1.4rem;
}
h2 { 
	font-size: 1.25rem;
	text-align: center;
}

/*photo page*/
.photos {
    margin: 5px;
    max-width: 10rem;
    border: 5px dotted var(--colour1);
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
.photos:hover {
    border: 5px dotted var(--colour4);
  }
  
.photos img {
    width: 100%;
    height: auto;
    display: block;
    text-align: center;
    justify-content: center;
    align-items: center;  
  }


/*gif gallery*/
.gallery-container {
    display: flex;
    justify-content: center; 
  }

.gallery {
    margin: 5px;
    max-width: 1.5rem;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
.gallery:hover {
    border: 2px dotted var(--colour1);
  }
  
.gallery img {
    width: 100%;
    height: auto;
    display: block;
  }

/*dotted border for images*/
.dottedborder {
    display: flex;
    margin: 5px;
    gap: 20px;
    border: 3px dotted var(--colour1);
    justify-content: center;
    padding: 10px;
}

/*back and next arrows*/
.arrows {
    margin: 5px;
    margin-top: 20px;
	text-align: center;
	padding: 5px;
    font-size: 0.9rem;    
    display: block;

}

.arrows2 {
    margin: 10px;
	text-align: center;
	padding-right: 10px;
    font-size: 0.9rem;    
    display: block;
}


/*food page*/
.recipeIngredients {
    margin: 10px;
    padding: 10px;
    background: linear-gradient(var(--colour3),var(--colour2));
    border-radius: 10px;

}

.recipeSteps {
    padding-left: 20px;
    text-align: left;
}

a {
    text-decoration: none;
}

/* prevents overflow on smaller screens */
img { max-width: 100%; }
pre { overflow-x: auto; }

a:hover, a:focus {
	font-style: italic;
}
a:visited {
	color: var(--colour5);
}
a:link {
    color: var(--colour5); 
   }