body { 
      
     background-color:#ccffe6;    
     color: black;
     font-family:  Verdana, sans-serif;
     
     }
     
     
 
     
     


#header  {
        display: grid;

 }

#headerIndex img {
border-radius: 20px;
 }


#header h1 {
    text-align: center;
    color: #0c27f6;
    font-family:  Verdana, sans-serif;
    text-shadow: 2px 2px 2px #000000;
 }
 
 #header  h2 {
    text-align: center;
    color: #0c27f6;
    font-family:  Verdana, sans-serif;
     }

.largeTitleLetters  {                                                   /*        Enlarge letter(s) to 150%         */
    font-size:150%;    
 }
 
.largerTitleLetters {
    font-size: 95%;
} 
  
#header ul {
 list-style-type: none;

 } 
#header li {
display:inline-block;
text-decoration:none;
float:left;
padding: 0 50px 0 0;
 }                           

#cityAndGuildsIndex{    /*    City and guilds logo on index page  */
float:right;
 }
 
#lowerImageIndex {       /*  lower image on index page  */
float:right;
border: 2px #f6a4de solid;
margin: 0 0 25px 0;

 }
 
 #topImageIndex {      /*   top image index page  */
 float:left;
 margin: 0 10px 0 0 ;
 border: 2px #f6a4de solid;
  }

    


 
#footer {
    
    display: grid;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color:#62f47d ;       /* #ccffe6  main background colour if prefered */
    color: #0c27f6;
    text-align: center;
    height: auto;
   
}

#version{                         /*    Date of last change on index footer   */
 font-size: 65%;
 color: #0080ff;
 }




  

  
.address {                        /*   Contact page   */
  list-style: none;
  text-decoration:none;
   } 
   



* {
  box-sizing: border-box;   /*  Three columbn layout  */
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width:33.33%;
  padding: 10px;
  min-height:50px; 
  
}

.column img {
border:solid 3px #62f47d;
max-width:100%;
height: auto; 
object-fit: cover; 
margin-left:auto;
margin-right:auto;
border-radius: 20px;
 }
 
 
 @media screen and (max-width: 600px) {
  .column img{
    width: 100%;
  
  }
}
 .column p {
 text-indent: 15px;
 }
 
 

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}



/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
   
  }
}




.text{                 /*   text below images     */
    text-align:center;
	margin: -5px 0 10px 0;
    float:left;
    background-color:#f6efa4;
}




.information {     /*    Text infomation box    */
text-align:left; 
background-color: #f6efa4;
width: 100% ;
height: auto;
border: 2px #f6a4de solid;
padding: 0 5px 0 5px;
text-indent: 10px;

}


.information img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  border:solid 3px #f6a4de;
  float:left;
  margin-right: 5px;
 }


.information ul {
text-align:left; 
}


#meetPaul {                /*  image on meet Paul */
 max-width: 100%;
  height: auto;
  float:left;
  border: 2px #f6a4de solid; 
  margin: 0 10px 25px 0;
 }

.small-rectangle-logo {
float:left; 

}