/* to be used with event pages only */

/* background */
body {
  margin: 0;
  font-family: "Times New Roman", Times, serif;
  background-size: 50%;
  background-image: url('/event/sky.png');
  background-color: white;
  color: black;
}

/* main container */
#container {
  height: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px;
  padding-bottom: 10px;
  background-image: url('/event/wood-dark.jpg');
  background-color: black;
  color: black;
}

/* container */
.wide {
  height: 100%;
  width: auto;
  padding: 10px;
  text-align: center;
  background-image: url('/event/wood.jpg');
  background-color: black;
  color: black;
}

.wide a {
  color: black;
}

.row {
  padding: 0 4px;
  flex-wrap: wrap;
  display: flex;
}

.column {
  padding: 0 4px;
  flex: 50%;
}

.column img {
  height: auto;
  width: 40%;
  margin-top: 4px;
  vertical-align: middle;
}

a img.hover {
  display: none;
}

a img.default {
  display: inherit;
}

a:hover img.hover {
  display: inherit;
}

a:hover img.default {
  display: none;
}

/* headings */
h1, h2, h3 {
  margin-top: 0;
	margin-bottom: 7px;
}

/* balloons */
#decor {
  height: auto;
	width: 280px;
	bottom: -15px;
	right: 1%;
	position: fixed;
}

/* footer */
footer {
	height: auto;
	width: auto;
	margin-top: 10px;
	padding: 10px;
	text-align: center;
	background-image: url('/event/wood.jpg');
	background-color: black;
	border-bottom: none;
}

/* text */
p {
	margin-bottom: 0;
	margin-top: 0;
	text-align: center;
}

/* mobile optimization */
@media only screen and (min-width: 642px) and (max-width: 1025px) {
  .wide {
    overflow: scroll;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 641px) {
  body {
    background-size: 90%;
  }
  
  .wide {
    height: auto;
    width: auto;
    margin-bottom: 10px;
    padding-top: 5px;
    text-align: center;
    overflow: scroll;
  }
  
  #decor {
    display: none;
  }
  
  footer {
    font-size: smaller;
  }
}