@import "stylemn.css";
@font-face {
    font-family: 'Mongolian Baiti';
    src:local('Mongolian Baiti'), url('monbaiti.ttf') format('truetype');  
    }

a:link, a:visited {color:#F9CF02;}

.container {

    display: grid;
  
    grid-template-columns: repeat(1, .5fr .5fr 8fr 1fr); 
    grid-template-rows: 1fr;
    font-size: 24px;    
  
    grid-template-areas: 
            "banner menu body footer";
    grid-gap: 1px;
    font-family: 'Mongolian Baiti';
    /*writing-mode: vertical-lr;*/	
	
}
.banner {
    background: #0000EF;
    grid-area: banner;
    color: #F9CF02;
    text-align: left;
    writing-mode: vertical-lr;
    font-size:18px;
    text-orientation: sideways-right;
 	padding-left: 5px;
 	padding-top:5px;
    /padding-right: 15px;/
    font-family: 'Mongolian Baiti';
 
}

.banner h2{
    text-align: center;
}
	

.menu {
    background: #C4272F;
    color:#F9CF02;
    grid-area: menu;
    grid-template-areas: 
        "findgod" "home" "christianlife" "christianservice" "shareyourstory";
    grid-template-columns: repeat(1, auto)  ;
    grid-template-rows: 1fr .75fr 1fr 1fr 1fr; 
    font-size: 36px;    
	width: 40px;
    padding: 5px 15px 5px 15px;
    writing-mode: inherit;
    
}
.home {
    
    grid-area: home;
    text-orientation: sideways-right;
    text-align:right;
    writing-mode: vertical-lr;
    margin: 5px 0px 10px 0px;
}
.findgod {
    grid-area: findgod;
    font: inherit;
    text-orientation: sideways-right;
    text-align:right;
    writing-mode: vertical-lr;
    margin: 5px 0px 10px 0px;

}
.christianlife {
    grid-area: christianlife;
    font: inherit;
    text-orientation: sideways-right;
    text-align:right;
    writing-mode: vertical-lr;
    margin: 5px 0px 10px 0px;

}
.christianservice {
    grid-area: christianservice;
    font: inherit;
    text-orientation: sideways-right;
    text-align:right;
    writing-mode: vertical-lr;
    margin: 5px 0px 10px 0px;

}
.contactus {
    grid-area: "shareyourstory";
    font: inherit;
    text-orientation: sideways-right;
    text-align:right;
    writing-mode: vertical-lr;
    margin: 5px 0px 10px 0px;
}

.body {
    grid-area: body;
    font: inherit;
    text-orientation: sideways-right;
    text-align:right;
    writing-mode: vertical-lr;
    margin: 5px 0px 10px 0px;
	height:800px;
}
.sed {
    grid-area: body;
    font: inherit;
    text-orientation: sideways-right;
    text-align:right;
    writing-mode: vertical-lr;
    margin: 5px 0px 10px 0px;
	height:800px;
	grid-template-areas: 
        "seriesName", " course";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 5fr; 

}
.series {
    grid-area: seriesName;
    font: inherit;
    text-orientation: sideways-right;
    text-align:right;
    writing-mode: vertical-lr;
    margin: 5px 0px 10px 0px;
	height:100px;
	grid-template-areas: 
        "name";
    grid-template-columns: repeat(1, auto)  ;
    grid-template-rows: 1fr; 

}
.courselineitem {
    grid-area: course;
    font: inherit;
    text-orientation: sideways-right;
    text-align:right;
    writing-mode: vertical-lr;
    margin: 5px 0px 10px 0px;
	height:200px;
	grid-template-areas: 
        "courseDescription", "courseImage";
    grid-template-columns: 4fr, 1fr  ;
    grid-template-rows: repeat(1, auto); 

}
.description {
    grid-area: courseDescription;
    font: inherit;
    text-orientation: sideways-right;
    text-align:right;
    writing-mode: vertical-lr;
    margin: 5px 0px 10px 0px;
    grid-template-columns: repeat(1, auto)  ;
    grid-template-rows: repeat(1, auto); 

}
.image {
    grid-area: courseDescription;
    font: inherit;
    text-orientation: sideways-right;
    text-align:right;
    writing-mode: vertical-lr;
    margin: 5px 0px 10px 0px;
    grid-template-columns: repeat(1, auto)  ;
    grid-template-rows: repeat(1, auto); 

}