Kartik.css

@charset "utf-8";

body 
{
  font-family:Arial, Helvetica, sans-serif;
}

#coverpage 
{
  background-image: url('bgimage3.jpg');
  background-attachment: fixed;
  background-size: cover;
  width:100vw;
  height: 100vh;
  font-size: 36px;
  color:white;
  font-weight: 100;
  overflow: hidden;
}

#intro 
{
    padding: 5px;
    width:40%;
    position: absolute;
    top: 50%;
    right: 30%;
    text-align: center;
	color: black;
}

#whoIAm, #whatILoveToDo, #contact
{
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 14%;
  padding-right: 14%;
  height:350px;
  color: black;
  font-size:22px;
  font-weight: 100;
  text-align: center;
  line-height: 1.5em;
  transition: transform 2s;
  -webkit-transition :transform 2s;
  transition-timing-function: ease-out;
}

#whatI'veDone
{
	height:300px;
	font-size:22px;
	text-align:center;
	padding-top: 15px;
    padding-bottom: 15px; 
	padding-left: 14%; 
	padding-right: 14%;  
	font-weight: 100;  
	line-height: 1.5em;
}

p
{
	transition: all 1s ease;
}
footer 
{
  color: #333;
  font-size:1em;
  font-weight: 400;
  margin-top: 15px;
  margin-bottom: 15px;
}

#pic1 
{
	transition: transform 0.5s;
	-webkit-transition :transform 0.5s;
	transition-timing-function: ease-out;			
}

#pic2 
{
	transition: transform 0.5s;
	-webkit-transition :transform 0.5s;
	transition-timing-function: ease-out;
	transition-delay: 0.3s;
}

#pic3
{
	transition: transform 0.5s;
	-webkit-transition :transform 0.5s;
	transition-timing-function: ease-out;
	transition-delay: 0.6s;
}

#pic4 
{
	transition: transform 0.5s;
	-webkit-transition :transform 0.5s;
	transition-timing-function: ease-out;
	transition-delay: 0.9s;
}

#pic5 
{
    transition: transform 0.5s;
	-webkit-transition :transform 0.5s;
	transition-timing-function: ease-out;
	transition-delay: 1.2s;
}
			

@media screen and (max-device-width: 481px) 
{
  #intro 
  {
        padding: 5px;
        width:70%;
        position: absolute;
        top: 45%;
        right: 15%;
        font-size: 1.5em;
        text-align: center;
        color: black;
  }
 #pic1 
{
	transition: transform 0.5s;
	-webkit-transition :transform 0.5s;
	transition-timing-function: ease-out;			
}

#pic2 
{
	transition: transform 0.5s;
	-webkit-transition :transform 0.5s;
	transition-timing-function: ease-out;
	transition-delay: 0.3s;
}

#pic3
{
	transition: transform 0.5s;
	-webkit-transition :transform 0.5s;
	transition-timing-function: ease-out;
	transition-delay: 0.6s;
}

#pic4 
{
	transition: transform 0.5s;
	-webkit-transition :transform 0.5s;
	transition-timing-function: ease-out;
	transition-delay: 0.9s;
}

#pic5 
{
    transition: transform 0.5s;
	-webkit-transition :transform 0.5s;
	transition-timing-function: ease-out;
	transition-delay: 1.2s;
}

  #whoIAm, #whatILoveToDo, #contact 
  {
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 10%;
    padding-right: 10%;
    height:350px;
    color: #333;
    font-size:1.5em;
    font-weight: 200;
    text-align: center;
    line-height: 1.5em;
  }
}