<style>

	@import url('https://fonts.googleapis.com/css2?family=Abyssinica+SIL&family=Josefin+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Playfair+Display:ital@0;1&family=Raleway:ital,wght@0,300;1,300&family=Ubuntu:wght@500&display=swap');

	body{
		font-family: 'Josefin Sans', sans-serif;
		font-size: 28px;
		color: #211f12;
	}

	header{
		text-align: center;
		background-color: #F2B28D;
		height: 60px;
	}

	header h1{
		font-family: 'Playfair Display', serif;
		font-size: 50px;
		color: #3A758C;
		line-height: 60px;
	}

	h2{
		color: #3A758C;
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 20px;
	}
	
	input[type=button]{
      border:2px solid gray;
      background-color: #333333;
      border-radius: 4px;
      padding:10px;
      color:gray;
      font-weight: bold;
    }

    #image-gallery{
      width:100%;
    }

    #image-gallery #mainImg{
      width:100%;
      border: 2px solid #333333;
    }

	nav{
		text-align: center;
		background-color: #A67B77;
	}

	nav li{
		margin: 5px;
		display: inline;
		list-style: none;
	}

	nav a{
		display: inline-block;
		padding: 10px;
		color: white;
		font-weight: bold;
	}

	main{
		float: left;
		box-sizing: border-box;
		padding: 20px;	
		width: 70%;	
	}

	aside{
		float: left;
		box-sizing: border-box;
		padding: 20px;
		width: 30%;	
	}

	h1{
		color: #3A758C;
		font-size: 140%;
		font-weight: bold;
		margin-bottom: 20px;
	}

	h1.page-title{
		font-size: 200%;
	}

	h2, h3{
		margin: 0;
		padding: 0;
	}

	#content{
		overflow: auto;
	}

	main p{
		text-align: justify;
		line-height: 26px;
		font-size: 20px;
		transform: scale;
	}

	img{
		border-radius: 20px 20px;
	}

	pre{
		padding: 20px;
		font-weight: bold;
		font-size: 20px;
		background-color: black;
		color: limegreen;
		border-radius: 20px 20px;
	}

	footer{
		background-color: #F2B28D;
		color: #000000;
		font-size: 85%;
		padding: 10px;
		font-weight: bold;
	}

	i{
		font-style: italic;
	}

	a{text-decoration: none}

	a:hover{

		-moz-box-shadow: 0 0 10px #777777; 
		-webkit-box-shadow: 0 0 10px #777777; 
		box-shadow: 0 0 10px #777777;
		border-radius: 20px 20px;
		text-weight: bold;
		color: #000000;
		border-style: outset;
		border-wicth: thick;
		background-color: #BF8E8A;
		transform: scale(1.1);
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	a:active{
		-moz-box-shadow: inset 0 0 10px #777777; 
		-webkit-box-shadow: inset 0 0 10px #777777; 
		box-shadow: inset 0 0 10px #777777;
		border-radius: 20px 20px;
		text-weight: bold;
		color: #FFFFFF;
		border-style: inset;
		background-color: #946E6A;
	}
	a:not(:hover){
		border-radius: 20px 20px;
		background-color: none;
		transform: scale(1);
		-webkit-transition: all 1.2s ease;
		transition: all 1.2s ease;
	}

	#mobile-nav-button{
		position: absolute;
		top: 0;
		right: 0;
		width: 44px;
		height: 44px;
		font-weight: bold;
		line-height: 44px;
		text-align: center;
		cursor: pointer;
		display: none;
	}
	
	@media all and (max-width: 800px){
		main, aside{
			transition: .5s;
			float: none;
			width: 100%;
		}

		#mobile-nav-button{
			display: block;
		}

		#main-nav{
			position: absolute;
			top: 120px;
			height: 100%;
			width: 0;
			transition: width .5s;
			z-index: 100;
		}

		#main-nav li{
			overflow: hidden;
		}

		#main-nav.show{
			width: 250px;
		}

		#main-nav ul li{
			display: block;
		}

		header{
			text-align: center;
			background-color: #F2B28D;
			height: 120px;
		}

		header h1{
			font-family: 'Playfair Display', serif;
			font-size: 50px;
			color: #3A758C;
			line-height: 60px;
		}

/*		Below: Some CSS code that Niall put in for the Contact Me form page*/
/*		I could not get it to work though...*/

		/*#contactForm label{			
			display: inline-block;
			width: 200px;
			text-align: right
		}

		.validation-message{
			color: red;
		}*/

	}
		
</style>