.cohort-heading{
    display:grid;
    margin:0;
    background-color: #1500cc;
    width: 10%;
    text-align: center;
    color: #ffffff;

}

#cohort-selector{
    position:fixed;
    text-align: center;
    padding:2px;
    color: #fff;
    background-color: blue;
   
}

.barcontainer{
    display: flex;
    justify-content: space-around;
}

.first-description-line{
    display: flex;
    justify-content: center;
}

.main-heading{
    text-align: center;
    font-weight:900;
}

.genderBalanceHeading{
    text-align: center;

}

.codes {
   display: grid;
    justify-content: center; 
    width:  100%;
    font-weight:400;
}

.narrative{
    display: grid;
    justify-content: center;
    width:  90%;
    margin: auto;
    
}

.scattergraphs{
  display: flex;
  justify-content: space-around;
}


#english-correlation-age-heading{
    margin: auto;
    font-family:sans-serif;
    font-weight: bold;
}

.maths-att-scatter{
  margin: auto;
    width:50%;
    text-align: center;
    
}

#maths-correlation-attendance-heading{
    display:grid;
    justify-content: center;
    font-family:sans-serif;
    font-weight: bold;
}

.othersubjects{
    display:flex;
    justify-content:space-around;
}

#othersubjectsheading{
    text-align: center;
    font-weight: bold;
}

.moreothersubjects{
    display:flex;
    justify-content:space-around;
}

.pupildata {
    font-weight: 700;
    text-align: center;
}

.infographic{
  font-weight:700;
  text-align: center;
  margin: auto;
  
}

.ofsted-data{
  background-color: lightgrey;
  width: 300px;
  border: 5px solid green;
  padding: 5px;
  margin: 5px;
  margin:auto;
  text-align: center;
}

.counties{
  font-weight:700;
  text-align: center;
  margin: auto;
  
}

.otherschools{
  background-color: lightgrey;
  width: 300px;
  border: 5px solid green;
  padding: 5px;
  margin: 5px;
  margin:auto;
}

table{
    margin:auto;
    width: 50%;
}

/* media queries for html elements*/


@media only screen and (max-width: 560px) {
  .cohort-heading{
    background-color: blue;
    margin: auto;
    width: 50%;
    
    
}}

@media only screen and (max-width: 560px) {
  #cohort-selector{
    position: fixed;
    top: 50%;
    right: 2%;
    
}}


@media only screen and (max-width: 560px) {
  .narrative{
    background-color: lightgrey;
    margin: auto;
    text-align: center;
    width: 90%;
    
}}

@media only screen and (max-width: 560px) {
  .barcontainer{
    flex-direction: column;
    
}}

@media only screen and (max-width: 560px) {
  #age_to_english_grade_correlation{
    display: flex;
    flex-direction: column;
    width:70%;
    
}}

@media only screen and (max-width: 560px) {
  .othersubjects{
    flex-direction: column;
    
}}

@media only screen and (max-width: 560px) {
  .moreothersubjects{
    flex-direction: column;
    
}}

@media only screen and (max-width: 560px) {
  .pupildata{
    margin:auto;
    width: 30%;
    
}}