import React from 'react'
import styled from 'styled-components'

export default () => {
  return (
    <>
      <link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet"></link>
      <link href="/20201011_iframe.css" type="text/css" rel="stylesheet" />
      <div id="bloq" style={{ padding: '50px 0px 50px 0px' }}>
        <Header>
          <div className="title">Web Dev</div>
          <div className="text">
            Splash well-earned Sam washing why shape counts passing. Devouring wanton mister hinder Rohan's. Today is my
            111th birthday! Flaming invitations impressive whilst trying regroup blade rid Bar-hrum. Yellowed permitted
            conjurer 1400 Cirith needed.
          </div>
        </Header>
      </div>
    </>
  )
}

const q = u => `@media (min-width: ${u}px)`

const Header = styled.div`
  max-width: 800px;
  width: 100%;

  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23252525' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  background-color: #ff6455;
  color: #fff;

  display: flex;
  flex-direction: column;

  align-items: flex-start;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  padding: 60px;

  .title {
    font-family: 'Staatliches', cursive;
    font-size: 10rem;
    line-height: 0.8;
    font-weight: 900;
    margin-bottom: 20px;
  }

  .text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue',
      sans-serif;
    font-size: 1.8rem;
  }
`