@charset "UTF-8";

/* CSS Document */


/* Now we begin defining the columns that will display in full-sized browser windows */
@media (min-width:960px){
article{
 width:960px;
 background-color: mintcream;
 min-height:600px;
 margin-right:auto;
 margin-left:auto;

 } 


section{
 padding:1%;
 margin:1%;
 min-height:500px;
 float:left;
margin-top:-5px;
 } 

#a img{
 float:left;
 }

h2 {color:darkred;}

#a{
 width:56%;
 background-color:white;
 color: darkred;
 }

#b{
 width:18%;
 background-color:mintcream;
 color:darkgreen;
 }

#c{
 width:18%;
 background-color:lightyellow;
color:indigo;
 } 

header{
 margin-left:auto;
 margin-right:auto;

 }

footer{
position:relative;
  margin-left:auto;
 margin-right:auto;
 text-align:center;
clear:both;

 }

}

 /*for tablet viewports*/
 
 @media (min-width:481px) and (max-width:959px){

    article{
     position:relative;
     height:1000px; /*We are defining a height of 1000px*/
     width:95%; /*We are changing the width from a pixel value to a relative value to resize in different tablets*/
     }


    section{
     min-height:320px; /*We are reducing the minimum height*/
     }

    section img{
     float:left; /*We are floating images in sections for a more compact tablet design*/
     padding:10px;
     } 

    #a{
     float:none; /*We are removing the float*/ 
     width:94%; /*We are defining the width with a relative value */ 
     } 
    #b{
     background-color:lightyellow; /*We are changing the background color of column b to yellow for tablet viewports*/
     float:left; 
     width:45%; /*We are sizing the width to be about half the width of section a*/
     } 
    #c{
     float:left;
     width:45%; /*We are sizing the width to be about half the width of section a*/
     background-color: honeydew;
    } 

}

 
 
 
 
 /* for smartphone viewports*/
 @media (max-width:480px){

   article{
    width:100%; /*We are allowing the device to define the width -- the <article> will fill the entire width of the device*/
   margin:0px;
    padding:0px;
    background-color:smokewhite;
   } 


   section{
    min-height:500px; /*We are removing constraints on width and reducing minimum height*/
    }
    
    section img{
    float:left; /*We are floating images in sections for a more compact smartphone design*/
    padding:10px;
    }
 
  
   #a{
    float:none; /*We are removing the float*/
    width:95%; /*We are defining the width with a relative value*/
    background-color:white; color:black;
    
    } 

   #b{
    float:none; /*We are removing the float*/
    width:95%; /*We are defining the width with a relative value*/
    background-color:lemonchiffon;
    color:indigo;
    } 

   #c{
    float:none; /*We are removing the float*/
    width:95%; /*We are defining the width with a relative value*/
    background-color: oldlace;
    color:black;
    }

}