.topSpace {
    padding-top: 180px;
}

.leftSpace {
	margin-left: 100px;
}

.pageHeader {
}

.pageHeader a {
    color: rgb(244, 244, 236);
}

.pageHeader a:hover {
   color: #aaa;
}

.pageTitle {
    font-family: Helvetica, sans-serif;
    text-transform: lowercase;
    display: block;
    font-size: 70px;
    line-height: 35px;
    font-weight: bold;
    letter-spacing: -2px;
}

.pageTitle a {
    font-family: inherit;
    text-transform: inherit;
    font-weight: inherit;
}

.pageSubtitle {
	animation: fadein 1s;
    font-family: Helvetica, sans-serif;
    color: rgb(244, 244, 236);
    font-size: 15px;
    line-height: 15px;
    display: block;
    font-weight: bold;
    margin-top: 18px;
    margin-bottom: 22px;
}

.pageSubtitle::before {
   /*content: 'A Programming Language';*/
}

@media only screen and (max-width: 720px) {
	.pageTitle {
		font-size: 60px;
		line-height: 30px;
	}
	
	.pageSubtitle {
		font-size: 15px;
	    line-height: 15px;   
        margin-top: 10px;
	}
	
	.topSpace { 
	    padding-top: 50px;
	}

    .leftSpace {
	    margin-left: 50px; 
    }
}

@media only screen and (max-width: 475px) {
	.pageTitle {
		font-size: 50px;
		line-height: 25px;
	}
	
	.pageSubtitle {
		font-size: 15px;
	    line-height: 15px;
	}
	
    .topSpace {
        padding-top: 30px;
    }
    
    .leftSpace {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 320px) {
	.pageTitle {
	    font-size: 32px; 
		line-height: 16px;
	}
	
	.pageSubtitle {
	    font-size: 14px; 
	    line-height: 10px;
	}
	
    .topSpace {
        padding-top: 30px;
    }
    
    .leftSpace {
        padding-left: 20px;
    }
}

/* --- fade in --- */

            
@keyframes fadein {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}   

            
@keyframes fadeout {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}