/**************main column sizing control*************/

* {
box-sizing: border-box;
}

.topbox {
overflow: hidden;
background:black;
width:100%;
}

.column1 {
float: left;
width: 70%;
padding: 10px;
background:#6f9fa3;
}

.column2 {
float: left;
width: 30%;
padding: 10px;
background:#8a9ebf;
}

.row:after {
content: "";
display: table;
clear: both;
}

/***********Writing styles**********/

h2 {
font-size: 2em;
color: red;
line-height: 1.15em;
margin: 20px 0 ;
color:darkgreen;
font-family:monotype-corsiva;
text-align:center;
border:2px solid black;
}

.h2 {
font-size: 2em;
color: red;
line-height: 1.15em;
margin: 20px 0 ;
color:blue;
font-family:monotype-corsiva;
text-align:center;
}
/*** connect with class="p1" ***/
.p1 {
font-family:Gabriola;
font-size:25px;
color:white;
margin-bottom:15px;
}
.p1::first-letter {
font-size:65px;
font-family:Gabriola;
font-style:italic;
color:purple;
padding:2px;
}


.p3 {
font-family:Gabriola;
margin-bottom:38px;
font-size:25px;
color: white;
}
.p3::first-letter {
font-size:65px;
font-family:Gabriola;
font-style:italic;
color:purple;
padding:2px;
}


/*** connect with class="p2" ***/
.p2 {
font-family:MV Boli;
color: white;
}


/***********images****************/

/*using for column 2*/

.img_left{
float:left;
width:50%;
margin-top:3px;
margin-left:3px;
margin-right:3px;
border:2px solid green;
padding:3px;
}
.img_right{
float:right;
width:50%;
margin-top:3px;
margin-left:3px;
margin-right:3px;
border:2px solid red;
padding:3px;
}
/*using for column 1*/
.img_center{
width:100%;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom:3px;
border:2px solid purple;
padding:3px;
}
.img_centere{
float:left;
width:50%;
margin-top:4px;
margin-left:4px;
margin-right:4px;
border:2px solid orange;
padding:3px;
}

/*****MEDIA QUERY-changes website for mobile or smaller screens*****/
@media only screen and (max-width : 700px) {



/***Place other @media controls below here***/

/******COLUMN @media**********/
.topbox{
width:100%;
margin-bottom:5px;
}

.column1 {
width: 100%;
margin-bottom:5px;
border:2px solid gray;
}

.column2 {
width: 100%;
margin-bottom:5px;
}



.img_left{
width:100%;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom:7px;
}
.img_right{
width:100%;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom:7px;
}

}/*closes @media section*/