html, body {
	margin: 0;
	height:100%;
	font-family: Trebuchet MS, sans-serif;
	font-size: 170%;
	color: #f6f7f9;
	background: #343c44;
}

ul,li {
	font-size: 22px;
	list-style-position: inside;
}

p, ul, li {
	text-align: center;
	color: white;
	padding: 0px 20px 0px 20px;
}

li a {
	color: #afc3d9;
}

#smaller-text {
    font-size: 16px;
}

#page-bottom {
    padding-bottom: 20px;
}

@media (min-width:850px) {
	/* for big screens */
    #lil-screen {
		display: none;
	}

    #big-screen {
    	display: block;
    }

	html, body {
		font-size:120%;
    }

    #navbar-div {
      padding: 10px 20px 30px 0px;
	  background: #3f6184;
    }

	#navbar {
		list-style: none;
		text-align: center; 
		font-family: Tahoma, sans-serif;
		font-size: 80%;
		background-color: #3f6184;
	}

	#navbar li {
        float: right;
		margin-right: 10px;
		padding: 0px 5px 0px 5px;
		display: inline;
		text-decoration: none;
    }

    #navbar a {
		text-decoration: none;
		display: block;
		width: 100%;
		color: white;
		padding:5px;
	}

    #navbar li a:hover:not(.active) {
	  background-color: #343c44;
	}

    #navbar .active {
		text-decoration: underline;
	}

	.dropdown {
	  position: relative;
	  display: inline-block;
	}

	.dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: #3c6484;
	  min-width: 160px;
	  padding: 12px 20px 12px 12px;
	  z-index: 1;
	}

	.dropdown:hover .dropdown-content {
	  display: block;
	}
	ul,li {
		font-size: 22px;
		list-style-position: inside;
	}

	p, ul, li {
		text-align: center;
		color: white;
		padding: 0px 20px 0px 20px;
	}

	li a {
		color: #afc3d9;
	}

}

@media (max-width: 850px) {
	/* for little screens */
    ul,li {
		font-size: 22px;
		list-style-position: inside;
	}

	p, ul, li {
		text-align: center;
		color: white;
		padding: 0px 20px 0px 20px;
	}

	li a {
		color: #afc3d9;
	}

    #big-screen {
	  display: none;
	}
	 
    #lil-screen {
		display: block;
	}

	#lil-screen p {
		font-size: 40%;
	}

	h1 {
		font-size: 100%;
	}

	h2 {
		font-size: 80%;
	}

	h3 {
		font-size: 60%;
	}

	p {
		font-size: 40%;
	}

	/* Style the navigation menu */
	.mobile-nav {
	  overflow: hidden;
	  background: #3f6184;
	  position: relative;
	}

	/* Hide the links inside the navigation menu */
	.mobile-nav #links{
	  display: none;
	}

	/* Style mobile nav menu links */
	.mobile-nav a {
	  color: white;
	  padding: 14px 16px;
	  text-decoration: none;
	  font-size: 55%;
	  display: block;
	}

	/* Style the mobile hamburger menu */
	.mobile-nav a.icon {
	  background: #3f6184;
	  display: block;
	  position: absolute;
	  right: 0;
	  top: 0;
	}

    .mobile-nav .no-format:hover {
		background-color: #3f6184;
	}

	.mobile-nav .no-format {
		text-align: center;
	}

	/* Add a dark background color on mouse-over */
	.mobile-nav a:hover {
	  background-color: #343c44;
	  color: white;
	}

	/* Style the active link (or home/logo) */
	.mobile-nav .active {
        text-decoration: underline;
	}

	.banner {
		background: white;
		text-align: center;
	    font-size: 20px;	
		padding: 20px;
	}

	.banner a {
		color: red;
		animation: blinker 1.5s linear infinite;
	}
	@keyframes blinker {
		50% {
			opacity: 0;
		}
	}
}

.banner {
	background: white;
	text-align: center;
	font-size: 20px;	
	padding: 20px;
}

.banner a {
	color: red;
	animation: blinker 1.5s linear infinite;
}
@keyframes blinker {
	50% {
		opacity: 0;
	}
}

p {
	text-align: center;
	color: white;
	padding: 0px 20px 0px 20px;
}		

h1 {
	text-align: center;
	text-transform: uppercase;
}	

h2 {
	text-align: center;
	text-transform: uppercase;
	color: #d4a49c;
}

h3 {
	text-align: center;
	color: #afc3d9;
}	

h2 a:visited, h2 a:link {
	color: white;
}

p a:visited, p a:link {
	color: white;
}

h2 a:hover {
	color: #8c94a4;
}

p a:hover {
	color: #8c94a4;
}

#events-text {
    font-size: 24px;
	text-transform: none;
}

#table {
    width: 100%;
	display: table;
}

#row {
    display: table-row;
}

#center {
    display: table-cell;
	text-align: center;
}

#flw2img:hover, #flw4img:hover, #flw6img:hover, #flw8img:hover {
	-webkit-transform: none;
     transform: none;
}

#flw2img, #flw4img, #flw6img, #flw8img {
	-webkit-transform: scaleX(-1);
     transform: scaleX(-1);
}

#no-hover:hover {
    -webkit-transform: none;
    transform: none;
}

.grid-container img:hover {
	-webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.grid-container {
	display: grid;
	gap: 0px;
	grid-template-columns: auto auto auto auto auto auto auto auto;
	padding: 0px;
	width: 100%;
}

.center {
	grid-area: 1 / 3 / span 4 / span 4;
}

#couplePics, #couplePics2 {
	display: flex;
}

#couplePics img {
	flex: 33.33%;
	padding: 0px;
}

#catImage, #catButtons {
    display: flex;
	justify-content: center;
}

#italic {
    font-style: italic;
}

#rsvplink li {
	text-decoration: none;
}

#rsvplink a {
	text-decoration: none;
	color: white;
}

#rsvplink a:hover {
	text-decoration: underline;
}

.leadercolumn {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.leaderrow:after {
  content: "";
  display: table;
  clear: both;
}

.daycolumn {
	float: left;
	width: 50%;
}

.dayrow:after {
	content: "";
	display: table;
	clear: both;
}

h5 {
	font-size: 16px;
	padding-left: 10px;
	text-align: center;
}