/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
  --color-gold: #FFA30F;
  --color-purple: #52042F;
  --color-green: #172F22;
  --color-blue: #17172F;
  --bg-split: linear-gradient(90deg, var(--color-green) 50%, var(--color-blue) 50%);
}

@font-face {
  font-family: "Aujournuit";
  src: url(/media/fonts/Aujournuit-VariableVF.ttf);
  }

h1 {
  color: var(--color-gold);
  font-family: 'Aujournuit', serif;
  font-size: 5.61rem;
  font-weight: 400;
  }
  
p {
  color: var(--color-gold);
  font-family: Roboto;
  font-size: 16px;
}
  
  a {
    text-decoration: none;
    color: var(--color-gold);
  }
  
  a:hover {
    background-color: var(--color-purple);
    color: var(--color-gold);
  }

body {
  background: var(--bg-split);
  font-family: 'Aujournuit', serif;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

/* GENERAL CLASSES */

.fullscreen {
  width: 100%;
  height: 90vh;
  text-align: center;
  justify-content: center;
  align-content: center;
}

/* MENU & NAVIGATION */

.menu {
display: flex;
justify-content: center;
}

.menu__nav {
  display: flex;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  gap: 2rem;
  font-family: Roboto;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  color: var(--color-gold);
}

.menu__nav li {
padding: 4px;
}

.menu__nav li:hover {
 background: var(--color-purple);
}

/*--------------CINEMA--------------*/ 

.cinema {
  height: 100vh;
	width: 100%;
  background-image: url("https://localmermaid.neocities.org/Cinema/Noise-Blue-BG.jpg");
	position: relative;
	overflow: hidden;
}

.cinema__chairs {
	position: absolute;
	left: 0;
	right: 0;
	 width: 100%;
	bottom: -1px;
	margin: auto;
	z-index: 3;
}

.cinema__curtain-left {
	width: 51%;
	height: 100vh;
	position: absolute;
	left: -30vw;
	z-index: 2;
	animation: 2s ease-in-out 0s 1 openLeft;
}

.cinema__curtain-right {
	width: 51%;
	height: 100vh;
	position: absolute;
	right: -30vw;
	z-index: 2;
	animation: 2s ease-in-out 0s 1 openRight;
}

.cinema__top-curtain {
	position: absolute;
	z-index: 4;
	width: 100%;
	filter: drop-shadow(2px 0px 20px black)

}

.cinema__gold-accent {
	position: absolute;
	z-index: 3;
	top: 4.5vw;
	width: 100%;
}

.cinema__video {
	aspect-ratio: 16/9;
	width: 50%;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

.cinema__video iframe {
	border: 6px double hsl(from var(--color-gold) h 50 l);
}

/* CINEMA TICKET */

.cinema-ticket {
      position: absolute;
			display: flex;
			justify-content: space-between;
			width: 480px;
			height: 240px;
			text-align: center;
			z-index: 2;
			bottom: -5vh;
    right: 2vw;
  transform: rotate(-5deg);
  transition: all 300ms ease-in-out;
			
			/* STAMP BORDER */
			
			--radius: 8px;

  background-image: 
    radial-gradient(
      var(--radius),
      transparent 98%,
      var(--color-gold)
    ),
    linear-gradient(var(--color-gold) 0 0);
  background-repeat: 
    round, 
    no-repeat;
  background-position:
    calc(var(--radius) * -1.5) calc(var(--radius) * -1.5),
    50%;
  background-size:
    calc(var(--radius) * 3) calc(var(--radius) * 3),
    calc(100% - var(--radius) * 3) calc(100% - var(--radius) * 3);
} 

.cinema-ticket:hover {
  bottom: 15vh;
  right: 2vw;
  transform: rotate(-5deg);
  transition: all 300ms ease-in-out;
}

.cinema-ticket h1 {
  color: var(--color-purple);
  font-size: 32px;
  font-weight: 600;
}

.cinema-ticket__info__admit, .cinema-ticket__info__author, .cinema-ticket__number {
  font-family: Roboto;
  font-size: 14px;
  letter-spacing: 2px;;
  text-transform: uppercase;
  color: var(--color-purple);
}
		
		.cinema-ticket__number {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 60px;
			writing-mode: vertical-rl;
			text-orientation: mized;
		}
		
		.cinema-ticket__info {
			--border-width: 4px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 360px;
			border: var(--border-width) double var(--color-green);
			border-width: 0px var(--border-width);
			padding: 8px 0px;
		}
		
		.cinema-ticket__info__title {
			border: var(--border-width) double var(--color-green);
			border-width: var(--border-width) 0px;
		}


/* CINEMA CURTAIN ANIMATIONS */

@keyframes openLeft {
  0% {
    transform: translateX(30vw);
  }
  100% {
     transform: translateX(0vw);
  }
}

@keyframes openRight {
  0% {
    transform: translateX(-30vw);
  }
  100% {
     transform: translateX(0vw);
  }
}