@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import 'lite-youtube-embed/src/lite-yt-embed.css';

@import './components/ticker';

@keyframes shadow {
  0% {
    box-shadow: inset 0 0 600px rgba(59, 130, 246, 1);
  }

  50% {
    box-shadow: inset 0 0 600px rgba(168, 85, 247, 1);
  }

  100% {
    box-shadow: inset 0 0 600px rgba(59, 130, 246, 1);
  }

}

body {
  width: 1920px;
  height: 1080px;
  margin: 0;
  padding: 0;
  font-family: Inter, sans-serif;
  overflow: hidden;
  background: black;
  text-shadow: 5px 5px 10px rgba(0, 0, 0, .1);
}

.screen__copy span {
  display: inline-block;
  padding: 0px 25px;
  border-radius: 15px 15px 15px 0;
  background: linear-gradient(to right top, rgba(59, 130, 246, 0.8) 20%, rgba(168, 85, 247, 0.5) 70%);
  font-weight: bold;
  font-size: 5rem;
  letter-spacing: -0.3rem;
  text-indent: -7px;
  color: #b3d8db;
  transform: skewX(-15deg);
}

.screen {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;

  &--hook {
    background: linear-gradient(to right top, rgba(59, 130, 246, 0.8) 10%, rgba(168, 85, 247, 0.5) 20%, rgb(0, 0, 0) 30%);
    animation: shadow 3s ease infinite;
  }
}

.orientation--portrait {
  width: 1080px;
  height: 1920px;
}

.orientation--portrait {
  .screen {
    transform: rotate(90deg) translateY(-100%);
    transform-origin: 0 0;
    border: 2px solid red;
    left: 0;
    top: 0;
  }
}