/* 
================================
GENERAL PAGE STYLING
================================
*/
html{
    height: 100%;
    width: 100%;
    line-height: 2; /* Sets the line height to 2 times the current font-size - eg if font size is 1.5rem, line height = 3rem. */
   
  }
  body {
  background: linear-gradient(#f2ff00, blue); /*Gradient background colour*/
  font-family: 'Cairo', sans-serif; /* Web font. San-serif is the 'fall-back' font - in case the web font does not load. */
  color: #ffffff;
  }
  
  /*Link styling*/
  a {
  color: rgb(85, 87, 221);
  text-decoration: none; /*no underlining of link*/
  }
  
  /*
  ================================
  NAVIGATION STYLING
  ================================
  */
  
  .container {
  width: 100vw;
  height: 100vh;
  position: relative;
  transition: all 0.3s; /*Added so that transition between 'views' is smooth*/
  z-index: 999; /*z-index ensures menu sits on top of everything else*/
  }
  
  /*When the user clicks on the 'hamburger' the container 'opens' by moving using the transform property. See notes in Workbook. */
  .menu-open {
  transform: translate(-230px, 0);
  }
  
  
  #menu {
  background: #e7f42a;
  text-align: center;
  width: 230px;
  height: 100%;
  position: fixed;
  margin: 0;
  right: -230px; 
  padding: 0px;
  }
  
  #menu li {
  display: block;
  }
  
  #menu li a {
  display: block;
  color: #000000;
  font-size: 1.5rem;
  padding: 10px 30px;
  border: 2px solid transparent;
  text-decoration: none;
  }
  
  #menu li a:hover, #menu li a:focus {
  border-color: transparent;
  background: #0077B6;
  color:#cacbf8;
  }
  
  
  /* 
  ================================
  MENU ICON ('BURGER')
  ================================
  */
  
  /* Background for the 'burger' */
  .toggle {
  display: block;
  position: absolute;
  left: -65px;
  cursor: pointer;
  background:#0077B6;
  padding: 15px 15px 10px;
  }
  
  /*Styling of the individual bars that make up the burger.*/
  .toggle .bar1,
  .toggle .bar2,
  .toggle .bar3 {
  width: 35px;
  height: 4px;
  background: whitesmoke;
  margin-bottom: 8px;
  transition: all 0.4s; /*Speed of transition from bars to cross (when tapped)*/
  }
  
  /* Change it to an X */
  #menu.open .toggle .bar1 {
  transform: rotate(45deg) translate(8px, 11px);
  }
  #menu.open .toggle .bar2 {
  opacity: 0;
  }
  #menu.open .toggle .bar3 {
  transform: rotate(-45deg) translate(5px, -10px);
  }
  
  
  /*The following styling is only applied when the viewport is at least 750px wide - ie bigger screens*/
  @media (min-width: 750px) {
  
  /*'Hamburger' not displayed*/
  .toggle {
    display: none;
  }
  
  /*Menu in inline block (across top of screen)*/
  #menu {
    margin: 0;
    padding: 15px 0;
    width:100%;
    display: inline-block;
    position:relative;
    right: 0;
  }
  
  /*Items on menu are also an inline-block (rather than under each other)*/
  #menu li{
    display: inline-block;
  }
  
  /*Different styling for when mouse cursor hovered over menu items/*/
  #menu li a:hover {
    border: 2px solid #ffffff;
    background: transparent;
    color: white;
  }
  }
  
  /* 
  ====================================
  GRID STYLING
  ====================================
  */
  
  #intro {
    display: grid;
    grid-template-rows: [image-start] 10vw repeat(3, auto) 10vw [image-end];
    grid-template-columns: [image-start] 1fr [image-end];
    grid-template-areas: '....'
                         'headline'
                         'text'
                         'button'
                         '....';
    text-align: center;
    background-color: #333;
    color: white;
    position:absolute; /*Absolute positioning with top at 0 ensures images will sit at top of page (not be displaced by container for menu).*/
    top: 0;
  }
  
  .intro__headline {
    grid-area: headline;
    margin-left: 1rem;
    margin-right: 1rem;
    align-self: end;
    color: #ffffff;
  }
    
  .intro__text {
    grid-area: text;
    margin-left: 1rem;
    margin-right: 1rem;
    color: white;
  }
    
  .intro__button {
    grid-area: button;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  
  .intro__image {
    grid-area: image;
    height: 100vh;
    object-fit: cover;
    mix-blend-mode: overlay;
  }
  
  /* Visual styles for grid*/
  
  p {
    line-height: 1.4em;
    margin-bottom: .75em;
  }
  
  img {
    max-width: 100%;
  }
  
  .intro__headline {
    font-size: 2rem;
    margin-bottom: .5em;
    color: white;
  }
  
  .intro__button {
    color: white;
    font-size: 1.5rem;
    font-weight:bold;
  }
  
  /*Styling for larger screens*/
  
  @media (min-width: 640px) {
  
    #intro {
      background-color: transparent; /* Turns background colour off*/
      color: black; /* Inverts text colour */
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas: '......... image'
                            'headline image'
                            'text     image'
                            'button   image'
                            '........ image';
      grid-column-gap: 20px; /*Add space between columns*/
      text-align: left;
    }
  
    .intro__image {
      height: 100vh;
      object-fit: cover;
      mix-blend-mode: normal; /*Turns off the 'overlay'*/
    }       
  }