<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>c-base camera warning</title>
    <link rel="stylesheet" href="../theme/c-base.css">
    <style>
      body {
        background-color: hsl(0, 98%, 46%);
        animation: color 0.6s infinite linear alternate;
      }
      h1 {
        text-align: center;
        font-size: 15vmin;
        margin-top: 10vmin;
        white-space: nowrap;
        width: 100vw;
        overflow: hidden;
        color: black;
        text-transform: lowercase;
        line-height: 17vmin;
      }
      h2 {
        text-align: center;
        font-size: 5vmin;
        margin-top: 0vmin;
        white-space: nowrap;
        width: 100vw;
        overflow: hidden;
        color: black;
        text-transform: lowercase;
        line-height: 6vmin;
      }
      img {
        position: absolute;
        left: 35vw;
        top: 50vh;
        width: 30vw;
        animation: moveleftright 3s infinite linear alternate,
                   moveupdown 1.6s infinite ease-in-out alternate,
                   flip 1.6s infinite ease-in-out alternate;
      }
      @keyframes moveleftright {
        from {
          left: 10vw;
        }
        to {
          left: 60vw;
        }
      }
      @keyframes moveupdown {
        0%, 30% {
          top: 50vh;
          transform: scaleY(1)
        }
        40% {
          top: 25vh;
          transform: scaleY(-1)
        }
        50%, 100% {
          top: 50vh;
          transform: scaleY(1)
        }
      }
      @keyframes flip {
        0%, 35% {
          transform: scaleY(1)
        }
        40% {
          transform: scaleY(-1)
        }
        45%, 100% {
          transform: scaleY(1)
        }
      }
      @keyframes color {
        0%, 20% {
          background-color: hsl(35, 98%, 46%);
        }
        80%, 100% {
          background-color: hsl(0, 98%, 46%);
        }
      }
      @keyframes size {
        from {
          font-size: 10vmin;
        }
        to {
          font-size: 16vmin;
        }
      }
    </style>
  </head>
  <body>
    <h1>Video Recording</h1>
    <h2>There is video recording in the mainhall!</h2>
    <img src="camera.svg">
  </body>
</html>