:root{
  --cabin1-colour: rgb(142, 170, 183);
  --cabin2-colour: rgb(81, 203, 159);
  --cabin3-colour: rgb(128, 68, 202);
  --cabin4-colour: rgb(255, 255, 255);
}



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: var(--cabin1-colour);
}

.cabin-2 {
  color: var(--cabin2-colour);
}

.cabin-3 {
  color: var(--cabin3-colour);
}

.cabin-4 {
  color: var(--cabin4-colour);
}

.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: var(--cabin1-colour);
  font-size: 0.75em;
}

#cabin-2-tab {
  background-color: var(--cabin2-colour);
  font-size: 0.9em;
}

#cabin-3-tab {
  background-color: var(--cabin3-colour);
  font-size: 0.75em;
}

#cabin-4-tab {
  background-color: var(--cabin4-colour);
  color: #ebebeb;
}

#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 #ffed6b 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;

  background-color: rgb(36 58 107);
}

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

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

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

/* 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('assets/fave1.png');
}

.rank-2 {
  background-image: url('assets/fave2.png');
}

.rank-3 {
  background-image: url('assets/fave3.png');
}

.album-item.oo {
  background-color: #67727f;
}

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