/*
Theme Name: Fictional University
Author: Simon Yearwood-Wilson
Version: 1.0
*/

*{
  padding: 0;
  border: 0;
  margin: 0;
}

body{
  font-family: 'Open Sans', sans-serif;
}


header{
  margin: auto;
  padding-bottom: 50px;
  
}

.header-container{
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;

}

.leftHeaderSpacer{
  background-color:#ea4462 ;
}

.rightHeaderSpacer{
  background-color: #97d5e4;
}


.hero-area{
background-color:#97d5e4 ;
}

.hero-area img{
  width: 100%;


}

.mainContent{
  margin-left: 10%;
  margin-right: 10%;
}

h1{
 padding-bottom: 50px;
}

h2{
 
}

h3{
  
}

a{
  color: #ea4462;
  text-decoration: none;
}

p{
  padding-top: 10px;
  padding-bottom: 10px;
}

ul{
  padding-top: 20px;
  padding-bottom: 20px;
}


.post-date{
  color: #ea4462;
}

.footer-boxes{
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) );  
  padding-top: 50px;
  padding-bottom: 50px;
  column-gap: 10px;
  row-gap: 20px;
 
}

.footer-box{
  width: 150px;
  height: 150px;
  display: grid;
  grid-template-rows: 4fr 1fr;
  text-align: center;
  color: white;
  font-size: 20px;
  align-items: center;
  margin: auto;
  border-radius: 10px;
  
  
}

.footer-box a{
  color: white;
}


.footer-box-img{
  margin: auto;
}

.footer-box-img img{
  height: 40%;
  width: 40%;
  padding: 10px;
}

#footer-box-1{
  background-color: #ea4462;
}

#footer-box-2{
  background-color: #b27db5;
}

#footer-box-3{
  background-color: #458bb1;
}

#footer-box-4{
  background-color: #8ec132;
}

.ask-btn{
  background-color:#ea4462;
  color: white;
  text-decoration: none;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  float: right;
  width: 150px;
  height: 40px; 
}

.ask-btn a{
  text-decoration: none;
  color: white;
}

.ask-btn-body{
  width: 150px;
  height: 40px; 
}

.guide-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
  width: 100%;
  
}

.guide-box{
  text-align: center;
}

.change-box{
  text-align: center;
}

.change-box img{
  height: 150px;
  width: 150px;
}

.googleIconGrid{
  display:grid; 
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: center; 
}

.googleIconGridItem{
  text-align:center;
  align-self: center; 
padding-bottom: 50px;
}

.googleIconGridItem img{
width: 100%;
max-width: 200px;
align-self: center; 
}