@charset "UTF-8";


/* all pictures were taken by my family or I unless stated otherwise */
body {
	  margin: 5px;
	  padding: 0px;
	  border: solid transparent; 
	  border-width: 20px 20px 30px 20px;
      border-image: url(images/border.png) 100 round; 
	  background-color: #f1e9db;
  	
}





h1 {
	text-align: center;
	color: #6f7851;
	font-size: 4em;
	text-decoration: underline 3px;
	margin-top: 140px;
}

h2 {
	text-align: center;
	color: #6f7851;
	font-size: 2.5em;
}

p {
	font-size:1.5em;
}

img {
  border-radius: 8px;
}

/*https://fonts.google.com/specimen/Baskervville*/
.baskerville {
  font-family: "Baskervville", serif;
  font-style: normal;
}





/*https://www.w3schools.com/css/css_navbar.asp*/
nav {
	display: flex;
  	justify-content: space-around;
 	align-items: center;
 	padding: 1%;
	text-align: center;
	position: fixed;
	overflow:auto;
	width:95%;
	margin: 0 auto;
    overflow: auto; 
    box-sizing: border-box; 
	top: 2%;
	background-color: #f1e9db;
	border-style: solid;
	border-width:6px;
	border-color: #6f7851;
	border-radius:10px;	
	color: #6f7851; 
}
nav a {
      color: #6f7851; 
      text-decoration: underline 2px;
      font-size: 2em;
      font-family: baskerville, serif;
    }
nav a:visited {
	   color: #6f7851; 
}
nav a:hover {
      color: #6f7a9d; 
      text-decoration: underline double 2px;
    }
    
    
    
    
    
    
a:link {
  color: #6f7a9d;
  font-weight: bold;
}
a:visited {
  color: #6f7a9d;
  font-weight: bold;
}
a:hover {
  color: #6f7851;
  font-weight: bold;
}


/*https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive */
* {
  box-sizing: border-box;
}

div.gallery {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;
  justify-content: flex-start;
}

div.gallery-item {
  margin: 5px;
  border: 6px solid #6f7a9d;
  border-radius:10px;
  width: 22%;
}


div.gallery-item img {
  width: 100%;
  height: auto;
}

div.gallery-item div.desc {
  padding: 15px;
  text-align: center;
}

@media only screen and (max-width: 700px) {
  div.gallery-item {
    width: 45%;
  }
}

@media only screen and (max-width: 500px) {
  div.gallery-item {
    width: 100%;
  }
}




.no-scroll {
    overflow: hidden;
}

.blueborder {
	border-style: solid;
	border-width:6px;
	border-color: #6f7a9d;
	border-radius:10px;	
}

.widthSm {
	width:30%;
}
.widthLg {
	width:80%;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.floatright {
	float: right;
}

.clearfix {
	overflow: auto;
}
.youKnow {
	display: flex; 
	align-items: center; 
	justify-content: center;
}