body {
  min-width: 400px;
	margin: 0px;
	padding: 0px;
	font-size: 24px;
  background-image: url('assets/background.png');
  background-position: center top;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
}

#album-body {
	width: 90%;
	display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

#album-container {
  display: flex;
  align-items: flex-start;
}

.album-column {
	width: 33%;
	display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.album-column.mobile {
  width: 50%;
}

.album-item {
	max-width: 90%;
	padding: 10px 10px 20px 10px;
	border: 1px solid #54545459;
	background-color: #ffffff;
	box-shadow: 10px 10px 5px #0000004d;
	margin-top: 10px;
	margin-bottom: 10px;
  word-break: break-all;
}
.album-item img {
	max-width: 90%;
}

/* Image rotations */
.rotate-1 {
  float: left;
  -ms-transform: rotate(7deg); /* IE 9 */
  -webkit-transform: rotate(7deg); /* Safari */
  transform: rotate(7deg);
}

.rotate-2 {
  float: left;
  -ms-transform: rotate(1deg); /* IE 9 */
  -webkit-transform: rotate(1deg); /* Safari */
  transform: rotate(1deg);
}

.rotate-3 {
  float: left;
  -ms-transform: rotate(-2deg); /* IE 9 */
  -webkit-transform: rotate(-2deg); /* Safari */
  transform: rotate(-2deg);
}

.rotate-4 {
  float: left;
  -ms-transform: rotate(0deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Safari */
  transform: rotate(0deg);
}

.rotate-5 {
  float: left;
  -ms-transform: rotate(-1deg); /* IE 9 */
  -webkit-transform: rotate(-1deg); /* Safari */
  transform: rotate(-1deg);
}

.rotate-6 {
  float: left;
  -ms-transform: rotate(2deg); /* IE 9 */
  -webkit-transform: rotate(2deg); /* Safari */
  transform: rotate(2deg);
}

.rotate-7 {
  float: left;
  -ms-transform: rotate(-7deg); /* IE 9 */
  -webkit-transform: rotate(-7deg); /* Safari */
  transform: rotate(-7deg);
}

.rotate-8 {
  float: left;
  -ms-transform: rotate(0deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Safari */
  transform: rotate(0deg);
}

/* Headers */ 
#album-header img {
  max-height: 200px;
  width: 100%;
}

#album-header {
  width: 100%;
}

.banner {
  display: inline-block;
  padding: 10px 10px 10px 10px;
  border: 1px solid #404040;
  background-color: #ffffff;
  box-shadow: 10px 10px 5px #0000004d;
  margin-top: 10px;
  margin-bottom: 10px;
  word-break: break-all;
}

#displayed-cabin {
  display: none;
  transform: rotate(346deg);
  max-width: 25%;
}

#displayed-event {
  transform: rotate(3deg);
  max-width: 70%;
}


#whereisgnome-display {
  max-width: 80%;
}

#whereisgnome-display img {
  max-height: 400px;
  width: 100%;
}

/* Intro card */
#intro-card {
  position: relative;
  display: inline-block;
  margin-top: 40px;
  margin-bottom: 40px;
  max-width: 80%;
}

#intro-card img{
  width: 100%;
}

.submission-text {
  font-size:  .6em;
  font-family: 'Source Serif Pro', serif;
  word-break: break-word;
  text-align: left;
}

.submission-text p {
  text-indent: 1em;
}


/* Font styling  */

a {
	text-decoration:  none;
}

.cabin-0 {
  color: rgb(100 80 69);
}

.cabin-1 {
	color: rgb(185, 141, 67);
}

.cabin-2 {
	color: rgb(149, 84, 34);
}

.cabin-3 {
	color: rgb(183, 138, 114);
}

.cabin-4 {
	color: rgb(124, 75, 49);
}

.cabin-5 {
  color: rgb(175, 126, 80);
}

.cabin-6 {
  color: rgb(126 54 48);
}

/* Side nav  */
#cabin-tabs {
  position: fixed;
  top: 15%;
  width: 250px;
  left: -185px;
  color: white;
  text-align: right;
  font-family: "Walter Turncoat";
}

#cabin-tabs.mobile {
  left: -150px;
}

#cabin-1-tab {
  background-color: rgb(185, 141, 67);
  font-size: 0.75em;
}

#cabin-2-tab {
  background-color: rgb(149, 84, 34);
  font-size: 0.9em;
}

#cabin-3-tab {
  background-color: rgb(183, 138, 114);
}

#cabin-4-tab {
  background-color: rgb(124, 75, 49);
}

#cabin-5-tab {
  background-color: rgb(175, 126, 80);
}

#cabin-6-tab {
  background-color: rgb(126 54 48);
}

.tab {
  display: flex;
  align-items: center;
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 60px;
  box-shadow: 0px 0px 2px 2px #0000004d;
  position: relative;
  cursor: pointer;
  border: 2px #fdd26c dashed;
}

.tab.mobile{
  height: 100px;
}

.tab img{
  max-height: 100%;
}

.left {
  justify-content: flex-end;
  border-radius: 0px 10px 10px 0px;
  transition: 0.5s;
  left: 0px;
  border-left: 0px;
}

.left img{
  float: right;
  margin-left: 15px;
}

.tab.left:hover {
  transition: 0.5s;
  left: 185px;
}

.tab.mobile.left:hover {
  left: 150px;
}

#event-tabs {
  position: fixed;
  top: 5%;
  width: 250px;
  right: -185px;
  color: #fafbbf;
  text-align: left;
  font-family: "Walter Turncoat";
  font-size: .75em;
}

#event-tabs.mobile {
  right: -150px;
}

.right {
  justify-content: flex-start;
  border-radius: 10px 0px 0px 10px;
  transition: 0.5s;
  right: 0px;
  border-right: 0px;
}

.right img{
  float: left;
  margin-right: 15px;
}

.tab.right:hover {
  transition: 0.5s;
  right: 185px;
}

.tab.right.mobile:hover {
  right: 150px;
}

#event-bb-tab {
  background-color: rgb(27, 104, 81);
}

#event-cc-tab {
  background-color: rgb(57 97 10);
}

#event-ss-tab {
  background-color: rgb(64 61 51);
}

#event-ht-tab {
  background-color: rgb(152 107 55);
}

#event-aa-tab {
  background-color: rgb(59 177 218);
}

#event-oa-tab {
  background-color: rgb(25 109 154);
}

#event-tt-tab {
  background-color: rgb(220 99 47);
}

#event-cf-tab {
  background-color: rgb(181 62 11);
}

#event-cr-tab {
  background-color: rgb(148 40 3);
  font-size: 0.8em;
}

/* Cabin favourite markers */
.favourite {
  width: 64px;
  height: 64px;
  position: fixed;
  top: -15px;
  right: -15px;
  background-size: contain;
  transform: rotate(21deg);
}

.rank-1 {
  background-image: url('https://www.mistreil.com/tbt/galleries/assets/fave_1.png');
}

.rank-2 {
  background-image: url('https://www.mistreil.com/tbt/galleries/assets/fave_2.png');
}

.rank-3 {
  background-image: url('https://www.mistreil.com/tbt/galleries/assets/fave_3.png');
}

.album-item.qqq {
  font-size: 0px;
  transform: none;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: 0;
  max-width: none;
}

.album-item.qqq img {
  width: 100%;
  max-width: none;
}

#snowman-card {
  position: absolute;
  top: 57%;
  max-width: 60%;
  right: 0;
  transform: rotate(9deg);
}