/* 2021.05 */
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap');

*, *::before, *::after { margin: 0; padding: 0; border: 0; box-sizing: border-box; outline : none; }
html { font-size: 62.5%; scroll-behavior: smooth; }
body { background: #ffffff; color: #000000; display: grid; place-items: center; min-height: 100vh; width: 100vw; font-family: 'Anonymous Pro', monospace; }

header { position: relative; height: 50vh; width: 50vh; max-height: 30rem; max-width: 30rem; overflow: hidden; margin: 0 auto; }
main {text-align: center; max-width: 30rem; margin: auto; }
footer { text-align: center; max-width: 30rem; margin: auto; }

h1 { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 10; background: url('src/logo.svg') no-repeat center center; background-size: contain; }
h1 span { font-size: 0; }
h2 { text-transform: uppercase; font-size: 2rem; }
p { padding: 1rem; font-size: 1.6rem;  }


/* video { width: 90%; height: 90%; position: relative; z-index: 1; padding: 5%; } */
.pulse { z-index: 1; position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; padding: 5%; overflow: hidden; background: url('src/bg.jpg') no-repeat center center; background-size: cover; animation: pulse 2s infinite; }
@keyframes pulse {
  0% {transform: scale(1);}
  25% {transform: scale(.97);}
  35% {transform: scale(.9);}
  45% {transform: scale(1.1);}
  55% {transform: scale(.9);}
  65% {transform: scale(1.1);}
  75% {transform: scale(1.03);}
  100% {transform: scale(1);}
}