Untitled

import styled, { createGlobalStyle } from 'styled-components'
import { device } from './utils/Device'

const GlobalStyles = createGlobalStyle`  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    background-color: #fff;
  }
  
  p {
    display: block;
    font-size: 17px;
    font-family: AlegreyaSans-Regular;
  }

  h1 {
    font-size: 46px;
    line-height: 46px;
    font-family: Gilroy-Bold; 
  }
  
  h2 {
    font-size: 56px;
    line-height: 56px;
    font-family: Gilroy-Bold;  
  }
  
  span {
    font-family: Gilroy-Bold;    
    font-weight: 600;
  }

  .hashSpan {
    color: #5adc31;
  } 

  /* Gaussian blur */

  .gaussian-blur {
      position: relative;
  }

  .gaussian-blur::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #F7F8FD;
      z-index: -1;
  }

  .gb-filter-30::before {
      -webkit-filter: blur(30px);
      filter: blur(30px);
  }

  .gb-filter-50::before {
      -webkit-filter: blur(50px);
      filter: blur(50px);
  }
  .gaussian-blur {
    position: relative;
}

.gaussian-blur::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #F7F8FD;
    z-index: -1;
}

.gb-filter-30::before {
    -webkit-filter: blur(30px);
    filter: blur(30px);
}

.gb-filter-50::before {
    -webkit-filter: blur(50px);
    filter: blur(50px);
}

  .hashSpan {
    color: #5adc31;
  } 





  @media ${device.mobileS} {}

  @media ${device.mobileM} {}
  
  @media ${device.mobileL} {}
  
  @media ${device.mobileXL} {}

  @media ${device.tablet} {}
  
  @media ${device.laptop} {}
  
  @media ${device.laptopL} {}

  @media ${device.desktop} {}
  
  @media ${device.desktopL} {}

`
// this is a global wrapper that ensures all elements wrapped into it will be the same width and center-screen. Copies widths
// from the original corussoft website


export const GlobalWrapper = styled.div`
    @media ${device.mobileXL} {
        margin: 0 auto;
        max-width: 580px;
    }

    @media ${device.tablet} {
        max-width: 760px;
    }

    @media ${device.laptop} {
        max-width: 970px;
    }

    @media ${device.laptopL} {
        max-width: 1144px;
    }

    @media ${device.desktop} {
        max-width: 1110px;
    }

    @media ${device.desktopL} {
        max-width: 1120px;
    }
`

export default GlobalStyles