body {
  padding-top: 5rem;
  text-align: center;
}
.starter-template {
  /* padding: 3rem 1.5rem; */
  text-align: center;
}

/*
 * Globals
 */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: black;
  text-shadow: 2px 2px white;
}
/* 
html,
body {
  height: 100%;
}

body {
  color: dimgrey;
  text-align: center;
  display:flex;
  align-items:center;
} */
main {
  /* background: white; */
  
}

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background: url('assets/smoke.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}

.name {
  font-family: 'Permanent Marker', cursive;
  color: red;
}

/* small phones portrait */
@media screen
and (max-width: 576px)
and (orientation: portrait) {
  video {
    top: 70%;
  }
}

@media screen
and (max-width: 768px)
and (orientation: landscape) {
  video {
    top: 130%;
  }
}

@media screen
and (max-width: 736px)
and (orientation: landscape) {
  video {
    top: 120%;
  }
}

@media screen
and (device-width: 568px)
and (device-height: 320px)
and (orientation: landscape) {
  video {
    top: 150%;
  }
}

/* small phones landscape */
/* @media (min-width: 576px) and (orientation: landscape) {
  .container {
    margin-top: 550px;
  }
  video {
    top: 115%;
  }
} */

/* Medium devices (tablets, 768px and up) */
/* @media (min-width: 768px) {
  .container {
    margin-top: 0;
  }
  video {
    top: 50%;
  }
 } */