@font-face {
  font-family: "Open Sans";
  src: url(./fonts/OpenSans-Bold.ttf),
       url(./fonts/OpenSans-ExtraBold.ttf);
}
@font-face {
  font-family: "OpenSansItalic";
  src: url(./fonts/OpenSans-BoldItalic.ttf),
       url(./fonts/OpenSans-ExtraBoldItalic.ttf),
       url(./fonts/OpenSans-SemiBoldItalic.ttf);      
}

body {
    font-family: "Open Sans";
    background: url(public_construction.webp);
    background-size: cover;
    background-repeat-y: no-repeat;
    background-position: center;
    height: 100vh;
    display:flex;
    justify-content: center;
    flex-direction: column;
}

#slip {
    opacity: .75;
    width: 100%;
    background: url(slip.webp);
    min-height: 350px;
    animation: slow_zoom 10s ease-in-out alternate-reverse infinite;
    position: absolute;
    top: 150px;
    left: 0;
    z-index: -10;
}

@keyframes slow_zoom {
  0% {transform: scale(1,1)}
  100% {transform: scale(1.05,1.05)}

}

h1 {
    text-align: center;
    color: #eee;
    font-size: 6em;
    transform: perspective(100px) rotatex(2deg);
}

p {
  font-style: italic;
  color: #333;
  font-size: 2em;
  text-align: center;
  background: rgba(100,100,100,.5);
  padding: 0 10%;
  width:100%;
}

@media screen and (max-width:1024px) {
    #slip {
    display: none;
    }
}