* {
  box-sizing: border-box;
}

html {
  height: 100%;
  background: #000;
}

body {
  user-select: none;
  -webkit-user-select: none;
  height: 100%;
  margin: 0;
  padding: 0;

  background: #000 url(/assets/images/background.jpg) no-repeat center;
  background-attachment: fixed;
  background-size: cover;

  font-family: "Bull", sans-serif;
}

header {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
  position: fixed;
  width: 100vw;
  font-weight: 900;
}

.white {
  background-color: transparent;
}

.red {
  background-color: #f50027;
}

.blue {
  background-color: #001192;
}

.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.25);
}

.overlay.red {
  background-color: rgba(245, 0, 39, 0.75);
}
.overlay.blue {
  background-color: rgba(0, 17, 146, 0.75);
}

#logo {
  transition: 125ms;
  cursor: pointer;
  max-width: 320px;
}

.bounce {
  transform: scale(1.1);
}

#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* remplit sans déformation */
  z-index: -1; /* met la vidéo derrière le contenu */
}

.content {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-top: 40vh; */
  text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
  font-weight: 900;
}

.ticket {
  --color: #f50027;
  width: 220px;
  height: 110px;
  background-image: radial-gradient(
      circle at top left,
      transparent 20px,
      var(--color) 20px
    ),
    radial-gradient(circle at top right, transparent 20px, var(--color) 20px),
    radial-gradient(circle at bottom left, transparent 20px, var(--color) 20px),
    radial-gradient(circle at bottom right, transparent 20px, var(--color) 20px);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.5));
}

.ticket-winner {
  --color: #001192;
}

.ticket-inner {
  border: 2px dotted #fff;
  color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  border-radius: 0.5rem;
  font-weight: 900;
}