@import url("fonts/fonts.css");

body {
  overflow: hidden;
  margin: 0px;
  background-color: #e67e22;
}

video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
  min-width: 100%;
}

section.container {
  position: absolute;
  top: 20px;
  right: 50px;
  max-width: 470px;
  text-align: right;
}

section.container img {
  max-width: 75px;
  opacity: 0.7;
  filter: drop-shadow(16px 16px 20px #f0b27a);
}

section.container h1 {
  color: #f0b27a;
  font-family: museo_sans700;
  font-size: 65px;
}

section.container span {
  color: #ca6f1e;
}

/* MEDIA QUERIES */
/* Extra Small Devices, Phones */
@media only screen and (max-width: 320px) {
  section.container h1 {
    font-size: 17px;
  }
}

/* Extra Small Devices, Phones */
@media only screen and (min-width: 321px) and (max-width: 480px) {
  section.container h1 {
    font-size: 40px;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width: 481px) and (max-width: 768px) {
  section.container h1 {
    font-size: 35px;
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width: 769px) and (max-width: 992px) {
  section.container h1 {
    font-size: 47px;
  }
}