import React from 'react';
import {Row,Col,Container} from 'react-bootstrap'
import monolit from '../img/monolit.jpg'
import styled from 'styled-components'


const Styles = styled.div`
    .container{
        z-index: -1;
    }
    

`; 


export default function TextInfo(){


    return(
        <Styles>
        <Container>
        <Row>
            <Col md={6}>
                <img src={monolit} height={500} style={{paddingTop:'6rem'}}/>
            </Col>
            <Col md={6} style={{paddingTop:'6rem'}}>
                <h2>Notice about Zone</h2>
                <p className="text" text-center>
                The Zone, no matter how you enter it, is a pain in the ass. 
                Sometimes it’s full of mutant animals, speaking in strangely familiar tongues. 
                 there are gravitational anomalies, flinging you and whoever you’re with into the sky like ragdolls. 
                 Sometimes you stand in the ruins of a factory and head straight in one direction and stumble right back into the ruins you left. 
                 Sometimes there is a passage so unfriendly to visitors that it is simply called the Meat Grinder; perhaps your Destination, the very reason you entered the Zone, exists on the other side of said Meat Grinder. 
                 The point of the Zone is that these things are there, these absolutely glorious metaphysical pains in the ass, and that you are dealing with them, step by tremulous step. 
                 No matter what, there will be others like you—scavengers in search of god knows what. Maybe they, and you, will be called Stalkers.
                </p>
            </Col>
        </Row>
        </Container>
        </Styles>

    );
}
