body {
	margin:0;
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	background-color:black;
}
#slideone, #slidetwo, #slidethree, #slidefour, #slidefive, #slidewwtbam, #slideplayvideo {
	position: absolute; /* Relative positioning for content layering */
	width: 100vw;      /* Full width of the viewport */
	height: 100vh;     /* Full height of the viewport */
	overflow: hidden;  /* Ensures no overflow issues */
	opacity:1;
	transition: opacity 1s ease;
}
#slidetwo, #slidethree, #slidefour, #slidefive, #slidewwtbam, #slideplayvideo {
	opacity:0;
	
}
/* Ensure the video fills the slide */
.bgvideo {
	position: fixed; /* Positioned relative to #slide */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* Cover the container while maintaining aspect ratio */
	z-index: -1;       /* Send behind other content in #slide */
	transition: filter 1s ease;
}
.dancingsanta {
    z-index: 2;
    top: 47px;
    left: -60px;
	opacity: 0;
}
#slidethree .bgvideo {
	transform: scale(1.05);
}
#start {
	display: flex;
	justify-content: center; /* Horizontal alignment */
	align-items: center;    /* Vertical alignment */
	height: 100vh;          /* Full viewport height */
	text-align: center;
	color: white;
    font-size: 132px;
    font-weight: 100;
}
#riddle {
	justify-content: center; /* Horizontal alignment */
	align-items: center;    /* Vertical alignment */
	text-align: center;
	color: white;
    font-size: 27px;
    font-weight: 200;
	margin-top:120px;
}

#baublecontainer {
	display: flex;
	justify-content: center; /* Horizontal alignment */
	align-items: center;    /* Vertical alignment */
	height: 100vh;          /* Full viewport height */
}
#baubleholder {
	text-align: center;
	max-width:1355px;
}
#baubleholder .bauble {
	height: 120px;
    width: 93px;
	margin:4px
}




#slidethree #baubleholder {
	position: relative; /* Content appears on top of the video */
	color: white;
	text-align: center;
	z-index: 1;
}

#iphonecontainer {
    position: fixed;
    height: 950px;
    width: 560px;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -9vh) scale(0.13) rotate(0deg);
    transition: all 1s ease;
}
#slidethree.phoneopen #iphonecontainer {
	transform: translate(-50%, -50%) scale(1) rotate(360deg);
}
#slidethree.phoneopen .bgvideo {
	filter:blur(5px);
}
#iphonecontainer #iphone {
	height: 100%;
    width: 100%;
    position: absolute;
    z-index: 10;
}
#iphonecontainer #iphone img {
	height: 100%;
}
#iphonecontainer #iphonecontent {
	height: 96%;
    width: 94%;
    background-color: black;
    position: absolute;
    z-index: 2;
    margin: 18px;
    border-radius: 60px;
	overflow:hidden;
}
#iphonecontainer #iphonecontent div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#iphonecontainer #iphonecontent div video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
#iphonecontainer #iphonecontent div img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#iphonecontainer #iphonecontent .time {
	position: absolute;
    top: 122px;
    color: white;
    font-size: 90px;
    width: 99%;
    text-align: center;
    font-weight: 500;
}
#iphonecontainer #iphonecontent .calling, #iphonecontainer #iphonecontent .videocall {
	display: none;
}
#iphonecontainer #iphoneelements {
	height: 96%;
    width: 94%;
    position: absolute;
    z-index: 4;
    margin: 18px;
    border-radius: 60px;
	overflow:hidden;
	box-shadow: -40px 45px 55px rgba(0, 0, 0, 1);
    border-radius: 50px;
}
#iphonecontainer #iphoneelements .time {
    position: absolute;
    top: 20px;
    color: white;
    left: 62px;
    font-weight: 500;
    font-size: 23px;
}
a {
	text-decoration: none;
}
#buttons {
	display: flex;
	justify-content: center; /* Horizontal alignment */
	align-items: center;    /* Vertical alignment */
	height: 100vh;          /* Full viewport height */
}
.animated-button {
  background: linear-gradient(-30deg, #112f11 50%, #082b08 50%);
  padding: 40px 80px;
  margin: 12px;
  display: inline-block;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  overflow: hidden;
  color: #d4f7d4;
  font-size: 40px;
  text-align: center;
  text-decoration: none;
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.animated-button::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #85ad85;
  opacity: 0;
  -webkit-transition: .2s opacity ease-in-out;
  transition: .2s opacity ease-in-out;
}

.animated-button:hover::before {
  opacity: 0.2;
}

.animated-button span {
  position: absolute;
}

.animated-button span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, right top, left top, from(rgba(8, 43, 8, 0)), to(#26d926));
  background: linear-gradient(to left, rgba(8, 43, 8, 0), #26d926);
  -webkit-animation: 2s animateTop linear infinite;
          animation: 2s animateTop linear infinite;
}

@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

.animated-button span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 43, 8, 0)), to(#26d926));
  background: linear-gradient(to top, rgba(8, 43, 8, 0), #26d926);
  -webkit-animation: 2s animateRight linear -1s infinite;
          animation: 2s animateRight linear -1s infinite;
}

@keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

.animated-button span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(8, 43, 8, 0)), to(#26d926));
  background: linear-gradient(to right, rgba(8, 43, 8, 0), #26d926);
  -webkit-animation: 2s animateBottom linear infinite;
          animation: 2s animateBottom linear infinite;
}

@keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

.animated-button span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 43, 8, 0)), to(#26d926));
  background: linear-gradient(to bottom, rgba(8, 43, 8, 0), #26d926);
  -webkit-animation: 2s animateLeft linear -1s infinite;
          animation: 2s animateLeft linear -1s infinite;
}

@keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}

.answerbutton {
	min-width: 200px;
    min-height: 200px;
    display: inline-flex;
    font-size: 40px;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    background: #4FD1C5;
    background: #24a924;
    border: none;
    border-radius: 1000px;
    box-shadow: 12px 12px 24px rgb(39 157 70 / 64%);
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
    outline: none;
    position: relative;
    padding: 10px;
}

.answerbutton::before {
content: '';
  border-radius: 1000px;
  min-width: calc(300px + 12px);
  min-height: calc(60px + 12px);
  border: 6px solid #00FFCB;
  box-shadow: 0 0 60px rgba(0,255,203,.64);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s ease-in-out 0s;
}



.answerbutton::after {
  content: '';
  width: 30px; height: 30px;
  border-radius: 100%;
  border: 6px solid #00cb22;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}



@keyframes ring {
  0% {
    width: 200px;
    height: 200px;
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}
.timer, .timerdone {    
	color: white;
    font-size: 172px;
    width: 450px;
}




/* WWTBAM */

#slidewwtbam {
	background-image: url('../wwtbam/background.jpg');
	background-position:center;
	z-index:100;
}
#slidewwtbam #progress {
	opacity: 0;
	transition: all 1s ease;
}
#slidewwtbam #qanda {
	opacity: 0;
	transition: all 1s ease;
}
#slidewwtbam #instructions {
	position: fixed;
    top: 800px;
    width: 100%;
    color: white;
    font-size: 50px;
    text-align: center;
	opacity:0;
	transition: all 1s ease;
}
#slidewwtbam .progressbox {
	position:fixed;
	width:314px;
	height:47px;
	text-align:center;
	background-image: url('../wwtbam/stageblue.png');
	color: white;
    line-height: 47px;
	opacity:0.3;
	transition: all 1s ease;
}
#slidewwtbam .progressbox.done {
	opacity:1;
}
#slidewwtbam .progressbox.progress1 {
	left:650px;
	top:60px;
}
#slidewwtbam .progressbox.progress2 {
	left:650px;
	top:115px;
}
#slidewwtbam .progressbox.progress3 {
	left:650px;
	top:172px;
}
#slidewwtbam .progressbox.progress4 {
	left:960px;
	top:60px;
}
#slidewwtbam .progressbox.progress5 {
	left:960px;
	top:115px;
}
#slidewwtbam .progressbox.progress6 {
	left: 960px;
    top: 172px;
    background-image: url(../wwtbam/stagegold.png);
    color: #1b1a41;
    font-weight: 800;
    font-size: 22px;
}
#slidewwtbam .wwtbamlogo {
	position: fixed;
    height: 20%;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
	opacity: 0;
	transition: all 1s ease;
}
#slidewwtbam .wwtbamlogo.startup {
	position: fixed;
    height: 60%;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
	opacity: 0;
}
#slidewwtbam .wwtbamlogo.complete {
    height: 70%;
    top: 50%;
    left: 50%;
	transition: all 5s ease;
}
#slidewwtbam .wwtbamclue {
	position: fixed;
    height: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	opacity: 0;
	transition: all 1s ease;
}
#slidewwtbam .questionbox {
	position: fixed;
    width: 1119px;
    height: 86px;
    left: 360px;
    top: 722px;
    text-align: center;
    background-image: url(../wwtbam/questionbox.png);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    padding: 7px 50px 10px;
}
#slidewwtbam .answerbox {
	position: fixed;
    width: 529px;
    height: 64px;
    text-align: center;
    background-image: url(../wwtbam/answerblue.png);
    color: white;
    display: flex;
    align-items: center;
    font-size: 24px;
    padding: 0px 40px;
}
#slidewwtbam .answerbox.answera {
	left: 360px;
    top: 845px;
}
#slidewwtbam .answerbox.answerb {
	left: 969px;
    top: 845px;
}
#slidewwtbam .answerbox.answerc {
	left: 360px;
    top: 922px;
}
#slidewwtbam .answerbox.answerd {
	left: 969px;
    top: 922px;
}
#slidewwtbam .answerbox.selected {
	background-image: url(../wwtbam/answerorange.png);
}
#slidewwtbam .answerbox.selected .letter {
	color: #8d3c00;
}
#slidewwtbam .answerbox.correct {
	background-image: url(../wwtbam/answergreen.png);
}
#slidewwtbam .answerbox .letter {
	color: orange;
    margin-right: 10px;
    font-weight: 600;
}
.wwtbamtablet a {
    width: 529px;
    height: 64px;
    text-align: left;
    background-image: url(../wwtbam/answerblue.png);
    color: white;
    display: inline-block;
    align-items: center;
    font-size: 24px;
    padding: 0px 40px;
    margin: 20px 0;
    line-height: 64px;
}
.wwtbamtablet a.selected {
	background-image: url(../wwtbam/answerorange.png);
}
.wwtbamtablet a.selected .letter {
	color: #8d3c00;
}
.wwtbamtablet a .letter {
	color: orange;
    margin-right: 10px;
    font-weight: 600;
}

#prizebox {
	text-align:center;
	color:#132653;
	margin:20px 30px;
}