<!doctype html>
<html lang='pt-br'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <title> Canvas</title>
  <link rel='icon' href='data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgODAgODAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMDA1ZjJiO30uY2xzLTEsLmNscy0ye2lzb2xhdGlvbjppc29sYXRlO30uY2xzLTJ7ZmlsbDojMmI4ODM0O308L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0wLDM0LjZBMzQuNiwzNC42LDAsMCwwLDM0LjYsMEgwWiIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTYwLDBINDYuNzlBNDYuNzksNDYuNzksMCwwLDEsMCw0Ni43OVY2MEEyMCwyMCwwLDAsMCwyMCw4MEg4MFYyMEEyMCwyMCwwLDAsMCw2MCwwWiIvPjwvc3ZnPg=='>
  <style>
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    :root {
      --videoWidth: 10px;
      --marginLeft: calc((100vw - var(--videoWidth))/2);
      background-color:#000;
    }
    video{
      max-width: calc(100vw - 20px);
      max-height: calc(100vh - 20px);
      margin: 10px auto;
      display:block;
    }
    #title {
      font-family: Arial, Helvetica, sans-serif;
      position: absolute;
      margin-left: var(--marginLeft);
      padding:3vw 0 0 3vw;
      width: calc(var(--videoWidth) - 3vw);
      height:30vh;
      background: linear-gradient(to top, transparent 0%, #fff 100%);
      display:flex;
      flex-flow:row;
    }
    #title h1{
      font-size: max(10px,calc(0.8vw));
      line-height: calc(1vw);
      /* font-weight: 700; */
      color:#2b8834;
    }
    #title h2{
      font-size: max(16px,calc(12px + 1vw));
      line-height: calc(12px + 2.2vw);
      font-weight: 100;
      color: #333;
    }
    .title{
      flex-flow:column;
    }
    .svg-container{
      width: calc(3.9383125 * calc(12px + 2.6vw));
      margin-right: 1.5vw;
    }
    .modulo{
      text-transform: uppercase;
      color:#005f2b;
    }
    .bold{
      font-weight: bold;
    }
    .aula{
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div id='title'>
    <div class='svg-container'>
      <svg id='svg2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 315.07 80'>
        <defs>
          <style>.cls-1{fill:#333;}.cls-4{fill:#fff;}.cls-2{fill:#005f2b;}.cls-2,.cls-3,.cls-4{isolation:isolate;}.cls-3{fill:#2b8834;}</style>
        </defs>
        <path class='cls-1' d='M84,53.67a3.09,3.09,0,1,0,4.33.62A3.1,3.1,0,0,0,84,53.67Z'/>
        <path class='cls-1' d='M144.06,0H0V80H144.06Zm-6.5,73.5H121.33V39.22h0v-.84H106v6.17h6.17v5.86C111.06,51.55,109.27,52,107,52c-2.76,0-4.71-.81-6-2.76s-2-4.72-2-8.46V38.54c.17-3.42.65-6.18,2-8.13a5.67,5.67,0,0,1,5.2-2.93,6.76,6.76,0,0,1,4.39,1.3q1.46,1.23,2,4.39h8.78c-.49-4.23-2-7.48-4.55-9.59s-6.18-3.25-10.9-3.25A16,16,0,0,0,97.4,22.6a14.14,14.14,0,0,0-5.53,6.34,22,22,0,0,0-2,9.6v3.25c.16,5.37,1.79,9.59,4.71,12.52,2.93,3.09,6.83,4.55,11.71,4.55A24.8,24.8,0,0,0,115,57.44V73.5H6.5V42.12H26.83V58.38H52.68v-7H35.93V42.44H50.08V35.77H35.93V28H52.52V21H26.83V35.77H6.5V6.51H137.56Z'/>
        <polygon class='cls-1' points='75.77 58.38 88.29 20.98 78.21 20.98 70.73 48.13 63.25 20.98 53.33 20.98 65.85 58.38 75.77 58.38'/>
        <path class='cls-2' d='M164.07,34.6A34.6,34.6,0,0,0,198.66,0H164.07Z'/>
        <path class='cls-3' d='M295.07,0H210.85a46.79,46.79,0,0,1-46.78,46.79V60a20,20,0,0,0,20,20h131V20A20,20,0,0,0,295.07,0Z'/>
        <polygon class='cls-4' points='214.87 51.22 230.21 51.22 230.21 46.25 220.72 46.25 220.72 40 230.21 40 230.21 34.4 220.72 34.4 220.72 29.59 230.21 29.59 230.21 24.64 214.87 24.64 214.87 51.22'/>
        <path class='cls-4' d='M248.17,30.49a14.22,14.22,0,0,0-4.34.55,12,12,0,0,0-3,2V31h-6.07V51.22h6.07V43.61a21.77,21.77,0,0,1,.22-4,5.27,5.27,0,0,1,1.49-2.77,3.65,3.65,0,0,1,2.56-1,3,3,0,0,1,1.94.61,3.21,3.21,0,0,1,1.1,1.76,21.63,21.63,0,0,1,.32,4.67v8.33h6.42v-13c0-2.27-.57-4.54-1.71-5.7A7.2,7.2,0,0,0,248.17,30.49Z'/>
        <path class='cls-4' d='M273.91,33.22a9.34,9.34,0,0,0-3-2.06,8.48,8.48,0,0,0-3.41-.68,8.82,8.82,0,0,0-6.72,3,10.9,10.9,0,0,0-2.76,7.68,10.6,10.6,0,0,0,2.86,7.55,9,9,0,0,0,6.77,3,8.19,8.19,0,0,0,3.23-.62,9.82,9.82,0,0,0,3-2V51.2H279V31h-5.07Zm-2.37,11.87a4.44,4.44,0,0,1-3.37,1.46,4.5,4.5,0,0,1-3.42-1.44,5.19,5.19,0,0,1-1.36-3.75,5.05,5.05,0,0,1,1.36-3.68,4.55,4.55,0,0,1,3.42-1.41,4.48,4.48,0,0,1,3.4,1.43,5.72,5.72,0,0,1,0,7.39Z'/>
        <path class='cls-4' d='M302.45,33.63a8.52,8.52,0,0,0-6.56-3,8.14,8.14,0,0,0-3.33.69,9.16,9.16,0,0,0-2.9,2.06V31.16H284.2v29.3h5.46V49.27a9.48,9.48,0,0,0,2.92,2,8,8,0,0,0,3.17.63,8.68,8.68,0,0,0,6.61-3,10.78,10.78,0,0,0,2.79-7.57A11.07,11.07,0,0,0,302.45,33.63Zm-4.17,11.46a4.44,4.44,0,0,1-3.37,1.46,4.52,4.52,0,0,1-3.42-1.44,5.19,5.19,0,0,1-1.36-3.75,5.05,5.05,0,0,1,1.36-3.68,4.56,4.56,0,0,1,3.42-1.41,4.48,4.48,0,0,1,3.4,1.43,5.72,5.72,0,0,1,0,7.39Z'/></svg>
    </div>
    <div class='title'>
      <h1><span class='modulo bold'>Módulo 7</span> &#9656;
          <span class='bold'>Unidade 1</span> &#9656;
          <span class='aula'>Aula 01</span></h1>
      <h2> Canvas</h2>
    </div>
  </div>
  <video id='video' controls='' preload='metadata'>
    <source id='mp4' src='assets/M7_U1_Canvas_va04_v1.mp4' type='video/mp4'>   
    <p>Seu navegador não suporta esse vídeo.</p>
  </video>
  <script>
    const video = document.querySelector('video');
    var root = document.querySelector(':root');
    video.onplay = (event) => {
      document.getElementById('title').style.display = 'none';
    };
    video.onpause = (event) => {
      document.getElementById('title').style.display = 'flex';
    };
    window.onresize = window.onload = function () {
      root.style.setProperty('--videoWidth', video.offsetWidth+'px');
    }
    video.addEventListener( 'loadedmetadata', function (e) {
      root.style.setProperty('--videoWidth', video.offsetWidth +'px');
    }, false );
  </script>
</body>
</html>