html, body {
 overflow: hidden;
  display: flex;
  justify-content: center;

}
body {
  max-width: 600px;
  display: flex;
  justify-content: center;
  padding:0;
  margin: 0;
 
}


ul {
    padding: 0;
    gap: 20px;
    list-style-type: none;
}

@media (min-width: 100px) {
  body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 5px;
    padding: 0 20px;
    height: 100vh; /* fills the screen */
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 600px) {
 .big {
 margin-left: 30%;
 margin-right: 30%;
}


.overlay {
  position: relative;
  max-width: 600px;
  width: 100%;

  display: flex;
  display: block;
  flex-direction: column;
  justify-content: center;

  z-index: 5;
  pointer-events: none;
}


.player {
  max-width: 600px;
  width: 100%;
  margin-left: 15px;
}


.cta{
color: #FFF;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
font-size: 24.27px;
font-style: normal;
font-weight: 900;
line-height: normal;
  max-width: 600px;
  width: 100%;
  text-align: center;

}
.swipe-up {
  position: fixed;
  justify-content: center;
  display: flex;
  flex-direction: column;
  bottom: 63px;
  max-width: 600px;
  width: 100%;
}

.swipe-arrow{
 width: 100%;
}

.swipe-text{
color: rgba(255, 255, 255, 0.50);
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-align: center;
}

}

h1, p, a {
  font-family: "loew-variable", sans-serif;
}


.big {

background: #12355B;
box-shadow: 0 4px 9.4px 0 rgba(0, 0, 0, 0.25);
  height: 53px;
  padding: 0;
  border-radius: 25px;
  color: #fff;
  grid-column: 1 / -1;
  margin: 0 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 24.27px;
  font-weight: 950;
  margin-bottom: 100px;
}

a {
  text-decoration: none;
  display: block;  
  grid-column: 1 / -1;   /* makes the link behave like a block */
}

.carousel-container {
  width: 100vw;
  height: fit-content;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  grid-column: 1 / -1;
}


.carousel-inner {
  max-width: 600px; 
  width: 100%;
  margin: 0 auto;
  display: flex; 
  gap: 20px;
  height: fit-content;
}


.sceneandtitle {
  flex: 0 0 100%; 
  scroll-snap-align: center;
  display: flex;
  flex-direction: column; 
  gap: 8px;
  flex-shrink: 0;  
}


.title {
  margin: 0 0 -5px 25px;
  color: #12355B;
  font-size: 24.27px;
  font-weight: 900;
}

.desc {
  margin: -5px 0 15px 25px;
  color: #12355B;
  font-size: 15px;
  font-weight: 500;
  
}

.scenes {
  border-radius: 25px;
  box-shadow: 0 4px 10.3px rgba(0, 0, 0, 0.25);
  height: fit-content;
  margin: 0 20px;
  overflow: hidden;       
  background: #1E1E1E;   
  flex-shrink: 0;
}

.scenes img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  border-radius: inherit; 
  image-rendering: auto;
  transform: scale(1.07);
  transform-origin: center;
}

.swipe {
  grid-column: 1 / -1;   
  display: flex;         
  align-items: center;   
  justify-content: center;
  gap: 21px;
  height: fit-content; 
}

.swipecta {
  margin: 0;
}

button {
  grid-column: 1 / -1;
  height: 53px;
  border-radius: 25px;
  font-size: 24.27px;
  font-weight: 950;
  margin: 0 20px 0 20px;
}

* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

#myVideo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}




.overlay {
  position: fixed;
  top: 25%;
  left: 25%;

  display: flex;
  display: block;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  z-index: 5;
  pointer-events: none;
}


.player {
  width: 100%;
  margin-left: 15px;
}


.cta{
color: #FFF;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
font-size: 24.27px;
font-style: normal;
font-weight: 900;
line-height: normal;

}

.background {
  position: fixed;        /* takes it out of the grid + page flow */
  inset: 0;               /* top:0; right:0; bottom:0; left:0 */
  z-index: -2;

  background: linear-gradient(
   180deg,
  rgba(217, 217, 217, 0.00) 0%,
  rgba(131, 146, 162, 0.43) 6.15%,
  rgba(55, 84, 114, 0.81) 30.92%,
  rgba(40, 63, 88, 0.90) 63.05%,
  #16273A 100%

  );
  mix-blend-mode: multiply;
}

.swipe-up {
  position: fixed;
  justify-content: center;
  display: flex;
  flex-direction: column;
  bottom: 63px;
}

.swipe-arrow{
 width: 100%;
}

.swipe-text{
color: rgba(255, 255, 255, 0.50);
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-align: center;
width: 100%;
}