import styled from 'styled-components';

import { Overlay as OverlayStyle } from './Overlay.style';

export const Overlay = styled(OverlayStyle)`
  visibility: visible;
  opacity: 1;
  
  i {
    position: absolute;
    cursor: pointer;
    font-size: ${props => props.theme.default.fonts.sizes[3]};
    color: ${props => props.theme.default.colors.white};
    top: 5vh;
    right: 5vw;
  }
`;

export const IframeYoutube = styled.iframe`
  position: fixed;
  z-index: 11;
  top: 50%;
  left: 50%;
  width: 80vw;
  height: 80vh;
  transform: translate(-50%, -50%);
`;