@import url('https://fonts.googleapis.com/css2?family=Kranky&family=Roboto:ital,wght@0,296;1,296&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rock+3D&display=swap');

:root{
  --yellow:#ffd500;
  --bg:#111006;
}
/*
*{box-sizing:border-box;margin:0;padding:0;}
*/

html, body {
  margin: 0;
  padding: 0;
  height: 100dvh;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--yellow);
  font-family: 'Kranky', sans-serif;
  font-weight: 300;
  display: flex;
  justify-content: center;
  align-items: center;
}


.container{
  width:90vw;
  max-width:1200px;
}


.video {
    border: none;
    position: relative;
    top: 0;
    height: 600px;
    width: 100%;
}

.top{
  font-family:'Rock 3D',cursive;
  margin:1rem 0;
  text-align:left;
  font-size: 3em;
}

.bottom{
  margin:1rem 0;
  text-align:right;
}

.reel{
  width:100%;
  height:auto;
  display:block;
}

@media (min-aspect-ratio:1/1){
  .container{width:50vw;}
}