body {
  margin:0;
  padding:0;
}

/* Removes padding from the width calculation of your elements */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

/* WRITE YOUR STYLES BEGINNING HERE---------------------------- */
@font-face {
  font-family: 'insideout';
  src: url('../fonts/webfontkit-20241023-141556/insideout-dap0-webfont.woff2') format('woff2'),
       url('../fonts/webfontkit-20241023-141556/insideout-dap0-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}
@font-face {
font-family: 'alata';
src: url('../fonts/Alata/webfontkit-20241028-125847/alata-regular-webfont.woff2') format('woff2'),
     url('../fonts/Alata/webfontkit-20241028-125847/alata-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}


body {
background: rgb(131,140,197);
background: linear-gradient(rgba(131,140,197,1) 0%, rgba(173,134,189,1) 31%, rgba(230,177,174,1) 81%, rgba(147,85,104,1) 100%);
}

.container {
  background-image:  url(../links/background1.png), url(../links/background3.png), url(../links/background2.png);
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-size: contain, contain, 100%;
  background-position: 0 0, -7px 100%, 0 center;
  position: relative;
  width: 100%;
  margin: auto;
  }

.cont-wrapper {
 max-width:1400px;
 margin:auto;
}

h2 {
font-family: 'insideout';
font-size: 10vw;
text-align: center;
color: white;
}

.title {
background-image: url(../links/letters.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width:100%;
  aspect-ratio: 0.74 / 1;
}
h1 {
color: transparent;
margin:0; /* removes space at top of browser */
}

.trailer {
width: 100%;
aspect-ratio: 1280 / 720;
position: relative;
z-index: 2;

}

.trailer video {
margin:0;
width: 85%;
aspect-ratio: 1280 / 720;
pointer-events: all;
overflow: hidden;
}

.trailer:before {
content: "";
width:100%;
aspect-ratio: 1425 / 915;
background: url("../links/trailerimagenew.png");
background-size:contain;
background-position: top right;
background-repeat: no-repeat;

position: absolute;
top:0;
left:0;
z-index:2;
pointer-events: none;
}

.synopsis {
font-family: 'alata';
color: white;
z-index: 2;
text-align: center;
margin-top: 20vw;
}

section {
  position: relative;
}

.trailer p {
font-family: 'alata';
color: white;
}


.copy {
position: relative;
z-index: 1;
top: 0vw;
margin-bottom: -30vw;
}
.copy p {
font-family: 'insideout';
font-size: 14vw;
color: white;
text-align: center;
}

.table {
position: relative;
z-index: 1;
top: 25vw;
text-align: center;
}
h3 {
font-family: 'alata';
font-size: 4vw;
font-weight: bold;
color:#3E254D;
text-align: center;
}
/* flip card styles -------*/

.castlistcards {
width:90%;
margin:auto;
display: flex;
flex-flow: row wrap;
flex: 1 1 33%;
justify-content: space-between;
gap:10px;
}

.castCard {
background-color: transparent;
width:calc(33.333% - 10px);
aspect-ratio: 1 / 1.35;
perspective: 1000px;
position: relative;
}

.castCard img {
width:100%;
display: block;
border-radius:5px;

}

.castCard p {
font-family: 'insideout';
margin:0;
width:100%;
aspect-ratio: 6 / 1;
position: absolute;
bottom:0;
left:0;
text-align: center;
font-size: 30px;
letter-spacing: 2px;
color: white;
}

.castCard-inner {

position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.castCard:hover .castCard-inner {
transform: rotateY(180deg);
}
.castCard-front, .castCard-back {

position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.castCard-front {
}
.castCard-back {
transform: rotateY(180deg);
}
/* table styles -------*/

table {
  background-color: #AD86BD;
  margin-left: auto;
  margin-right: auto;
  font-family: 'alata';
  font-size: 1.2vw;
  color: #3E254D;
  border-spacing: 1vw;
  border-radius: 2.7vw;
  padding: 1.7vw;
  margin-bottom: 50vw;
  width: 55%;
}

th:hover {
  background-color: #3E254D;
  color: white;
  cursor: pointer;
}
.form {
  padding-bottom: 25vw;
  margin-top: -15vw;
  font-family: 'alata';
  color: white;
  text-align: center;
}
.form h2 {
  font-size: 1em;
}

input[type="text"] {
  border-radius: 6px;
  height: 30px;
  width: 50%;
  font-family: 'alata';
  padding: 10px;
  align-self: center;
  margin-bottom:1em;
}
input[type="submit"] {
  font-family: 'alata';
  width: 25%;
  align-self: center;
}
.feedback {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: center;
  margin-bottom: 2em;
}

.footer {
  display: block;
  margin-left: auto;
  margin-right: auto;
  
}