/*fonts*/
/* latin */
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cabin/v18/u-4i0qWljRw-PfU81xCKCpdpbgZJl6XvqdnsF3-OAw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cabin/v18/u-4i0qWljRw-PfU81xCKCpdpbgZJl6XvqdnsF3-OAw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Cabin Sketch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cabinsketch/v14/QGYpz_kZZAGCONcK2A4bGOj8mNhNy_r-Kw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Cabin Sketch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/cabinsketch/v14/QGY2z_kZZAGCONcK2A4bGOj0I_1Y5tjzAYOcFg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  box-sizing: border-box;
}




/*starts here*/



header {
  width: 100%;
  position: fixed;
  z-index: 1;
  min-height: 200px;
background: url(./images/SGmontage1.png) no-repeat center center; 
  background-size: cover;
  top: 0px;
}



header p{
  font-size: 18px;
}


.column{
  width: 100%;
  padding:5px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  flex-direction: row;
}

.left {
  width: 20%;
   float: left;
}
.right {
  width: 30%;
  padding-right: 20px;
   float: left;
}

.middle {
  width: 50%;
}

main{
  position: absolute;
  width: 100%;
  top: 275px;
}

/*body{}*/


h1{
  font-size: 48px;
  font-family: "Cabin Sketch", sans-serif;
  color: rgb(238, 6, 10);
  font-weight: 700;
  text-align: center;
  
}

h2{
  font-size: 22px;
  font-family: "Cabin Sketch", sans-serif;
  font-weight: 400;
  color: rgb(29,176,109);
}


p{
  font-size: 16px;
  font-family: cabin, sans-serif;
  font-weight: 300;
}


hr{ 
  border: 7px solid;
border-radius: 7px;
  border-color: rgb(29, 176, 109, .28);
  width: 90%;
margin: 60px;
}




footer{
  text-align: center;
  width: 100%;
  background-color: rgb(29,176,109);
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 60px;
  color: white;
  display: inline;
}

footer img{
  height: 100px;
}

/*flexing*/

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}


#description{
Height:950px;
display: block;
text-align: center;
}

#description p{
    line-height: 1.5;

}


#video{
background-color: rgba(29, 176, 109, .28);
min-height: 300px;
Width:90%;
padding:20px;
display: flex;
 justify-content: center;
flex-wrap: wrap;
align-content: center;
align-items: top;
}


#store{
background-color: rgba(29, 176, 109, .28);
min-height: 400px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
align-content: center;
align-items: flex-start;
}

.book {
  padding: 5px;
  display: flex;
  max-width: 400px;

}

.book img {
  height: 200px;
  margin-right: 10px;
  margin-top: 0px;
  padding-left: 30px;
}

.book h2{
  margin-top: 0;
}

.videos {
 padding-left: 5px;
  display: flex;
}



#characters{
min-height: 400px;
text-align: left;
flex-wrap: wrap;
align-content: center;

}

.people{
  padding-left: 5px;
  display: flex;
  max-width: 600px;
}

.people img {
  height: 200px;
  margin: 10px;
  padding-left: 30px;
}

.people span {
  padding-right: : 30px;
  align-self: center;
}




/*colours*/

.greentext{
	color: rgb(29,176,109);
}
.lgreentext{
	color: rgba(29, 176, 109, .28);
}

.yellowtext{
	color: rgb(253, 212, 50);
}

.redtext{
	color: rgb(238, 6, 10);
}

.bluetext{
	color: rgb(66, 135, 245);
}


/* Responsive layout - when the screen is less than 1200px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1200px) {
 
.left {
  width: 10%;
   float: left;
}
.right {
  width: 45%;
  padding-right: 20px;
   float: left;
}

.middle {
  width: 45%;
  justify-content: center;
  padding-left: 20px;
}

#description{
height:100%;
display: block;
text-align: center;
}


#store{
padding-top: 30px;
}
}


/* Responsive layout - when the screen is less than 800px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {



.left {
  width: 10%;
   float: left;
}

.left img {
display: none;
}


.right {
  width: 40%;
  padding-right: 10px;
  padding-left: 20px;
   float: left;
}

.right p{
  font-size: 16px;
}

.middle {
  width: 50%;
  justify-content: center;
}

#description{
height:100%;
display: block;
text-align: center;
}

#store{
padding-top: 30px;
}
}




/* Responsive layout - when the screen is less than 600px wide (changed to landscape, make the three columns stack on top of each other instead of next to each other */
@media screen and (orientation: landscape) {
  .column {
    flex-direction: column;
    text-align: center;
  }
  .left {
margin: auto;
 width: 40%;
}
  .left img {
display: none;
}


.middle {
margin: auto;
 width: 60%;
}
.right {
  width: 100%;
}
  main{
  position: absolute;
  top: 300px;
}

header {
  position: absolute;
}

#description{
height:100%;
display: block;
text-align: center;
margin-bottom: 50px;
}
#store{
padding-top: 30px;
padding-bottom: 30px;
}
} 






/* Responsive layout - when the screen is less than 400px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .column {
    flex-direction: column;
    text-align: center;
  }
  .left {
margin: auto;
 width: 40%;
}
  .left img {
display: none;
}


.middle {
margin: auto;
 width: 60%;
}
.right {
  width: 100%;
}

header {
  position: absolute;
}

#description{
height:100%;
display: block;
text-align: center;
margin-bottom: 50px;
Font-size: 200%;
}
#store{
padding-top: 30px;
padding-bottom: 30px;
Font-size: 200%;
}
#characters{
padding-top: 30px;
padding-bottom: 30px;
Font-size: 200%;
}
}