/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

html {
  scroll-behavior: smooth;
}


.highlight{
    display: inline-block;
    justify-content: center;
    align-items: center;  
    text-align: center;
    padding: .25em 0;
    background: #FFC107;
    color: #ffffff;
}


.wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 1000px;
	
  video {
    width: 100%; 
  }
  
  svg { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    text {
      font-family: 'Roboto', sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      font-size: 90px;
    }
    
    > rect {
      -webkit-mask: url(#mask);
      mask: url(#mask);
    }
    
    rect {
      fill: #fff;
    }
  }
}

// codepen config
body {
  margin: 60px 50px 0;
}

.wrapper {
	&:before,
	&:after {
		content: '';
		position: absolute;
		top: 0;
		width: 10px;
		height: 100%;
		background-color: #fff;
	}
	
	&:before {
		left: -9px;
	}
	
	&:after {
		right: -5px;
	}
}