/* General */
html,
body
{
	overflow: hidden;
	margin: 0px;
}


/* Common */

a {
    all: unset;
}

.title-span {
	display: inline-block;
}


.topbar {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	background: #d4aa00;
	height: 65px;
	text-align: center;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	z-index: 2;
}

	.topbar img.title {
		vertical-align: top;
		margin-left: 20px;
		margin-right: 20px;
		max-width: 400px;
		height: auto;
		width: calc(100vw - 115px);
		position: relative;
		top: 50%;
		transform: translateY(-50%);
		display: inline-block;
	}

	.topbar img.logo {
		margin-left: 5px;
		margin-top: 5px;
		width: 65px;
		height: 65px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		display: inline-block;
	}


.container {
	width: 100%;
	display: flex;
	justify-content: center;
	height: calc(100vh - 57px);
	margin-top: 57px;
	gap: 0px;
	flex-flow: row;
}

.container > a.game {
    
		flex: 3 3 34vw;
		transition: 0.5s ease-in-out;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		border-left: solid 8px #111;
		border-right: solid 8px #111;
		background-size: cover;
		background-repeat: no-repeat;
		display: block;

		&:nth-of-type(1) {
			background-image: url('../images/thegravedigger_background.webp');
			background-position: center;
		}
		
		&:nth-of-type(2) {
			background-image: url('../images/biffbiffingsworth_background.webp');
			background-position: left;
		}
		
		&:nth-of-type(3) {
			background-image: url('../images/shelterfromthestorm_background.webp');
			background-position: right;
		}

		.content {
			display: flex;
			align-items: start;
			opacity: 0;
			flex-direction: column;
			height: 90%;
			justify-content: flex-end;
			transform: translatey(100%);
			transition: opacity 0.9s ease-in-out, transform 0.5s 0.2s;
			visibility: hidden;
		}

		.content.first {
			margin-left: 6vw;
		}

    &:hover {
		flex: 3 0 60vw;
		transform: scale(1.2) rotate(2deg);
    }

    &:hover .content {
      opacity: 1;
      transform: translatey(0%);
      visibility: visible;
    }
}


/* The Grave Digger */

.thegravedigger .gravediggertitles {
	display: inline-block;
	height: 8vw;
	width: auto;
	max-height: 200px;
}


/* Biff Biffingsworth */

.biffbiffingsworth .biffingsworthtitles {
	display: inline-block;
	height: 8vw;
	width: auto;
	max-height: 200px;
	min-height: 38px;
}


/* Shelter from the Storm */

.shelterfromthestorm .shelterfromthestormtitles {
	display: inline-block;
	height: 6vw;
	width: auto;
	max-height: 200px;
	min-height: 38px;
}


@media (pointer: none), (pointer: coarse), (max-aspect-ratio: 1.5/1) {

	.container {
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
	}
	
	.container > a.game {
		border-left: none;
		border-right: none;
	}
	
	.container > a.game.biffbiffingsworth {
		background-position: 50% 20%;
	}
	
	.container > a.game { &:hover {
		transform: none;
	}}
	
	.container > a.game .content {
		opacity: 1;
		transform: translatey(0%);
		visibility: visible;
		height: 98%;
	}
	
	.container > a.game .content,
	.container > a.game .content.first {
		margin-left: 10px;
	}
	
	a.game {
		width: 100vw;
		height: 38vw;
		min-height: 34vh;
	}
}














.rain {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.rain.back-row {
  display: none;
  z-index: 1;
  bottom: 60px;
  opacity: 0.5;
}

body.back-row-toggle .rain.back-row {
  display: block;
}

.drop {
  position: absolute;
  bottom: 100%;
  width: 15px;
  height: 120px;
  pointer-events: none;
  animation: drop 0.5s linear infinite;
}

@keyframes drop {
  0% {
    transform: translateY(0vh);
  }
  75% {
    transform: translateY(100vh);
  }
  100% {
    transform: translateY(100vh);
  }
}

.stem {
  width: 1px;
  height: 60%;
  margin-left: 7px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
  animation: stem 0.5s linear infinite;
}

@keyframes stem {
  0% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}