/* 
================================
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. */
  scroll-behavior: smooth;
}
body {
background: linear-gradient(#f2ff00, blue); /*Gradient background colour*/
font-family: 'Cairo', sans-serif; /* Web font. Sans-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'*/
  }       
}


/*
=======================================
STYLING FOR IMAGES IN RENT SECTION
=======================================
*/

/*General styling*/
#gallery {
  height:100vh;
  background-color: blue;
}

#gallery img {
  position:absolute;
  left:0;
  height: 100vh;
  width:100vw;
  object-fit: cover;
}

/*Visual styling for text over images*/
.info{
  position: absolute;
  margin-top:2rem;
  text-align: center;
  width: 100vw;
  background-color: blue;
  font-size:2rem;
  line-height:1;
  padding: 1em 0;
}

/*Animation*/

@keyframes FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#gallery img.image1 {
  animation-name: FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}


/*
=========================================
STYLING FOR EXPERIENCE PAGE
=========================================
*/
#join {
  display: grid;
  grid-template-rows: [image-start] 10vw auto 10vw [image-end];
  grid-template-columns: [image-start] 1fr [image-end];
  grid-template-areas: '....'
                       'headline'
                       '....';
  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;
}

.join__headline {
  grid-area: headline;
  margin-left: 1rem;
  margin-right: 1rem;
  align-self: center;
  color: white;
}
  
.join__image {
  grid-area: image;
  height: 100vh;
  object-fit: cover;
  mix-blend-mode: overlay;
}

.join__headline {
  font-size: 2rem;
  margin-bottom: .5em;
  color: white;
}

/*Styling for larger screens*/

@media (min-width: 640px) {

  #join {
    background-color: transparent; /* Turns background colour off*/
    color: rgb(255, 255, 255); /* Inverts text colour */
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: '......... image'
                          'headline image'
                          '........ image';
    grid-column-gap: 20px; /*Add space between columns*/
    text-align: left;
  }

  .join__image {
    height: 100vh;
    object-fit: cover;
    mix-blend-mode: normal; /*Turns off the 'overlay'*/
  }       
}

/*
=========================================
STYLING FOR MODAL FORM
=========================================
*/

iframe{
  width: 100%; /*Overrides style set in embedded HTML - so that form fills the modal window*/
}

#modal {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  height: 100%;
  width: 100%;
}

.modalcontent {
  position: absolute;
  top: 0; 
  left: 50%; /*This rule and the transform rule below centres the form horizontally on the page*/
  transform: translate(-50%, 0);
  background: rgb(0, 221, 255);
  width: 85%;
  padding: 10px;
}

/*Adjustments for wide screen*/
@media (min-width: 1440px) {
  .modalcontent{
    top: 50%; /*This rule and the transform rule below centres the form vertically and horizontally on the page*/
    transform: translate(-50%,-50%);
    width: 45%;
  }
}

/*CSS for Contact section*/
#footer {
  background:blue;
  padding: 20px;
  text-align: center;
  font-size: 16px;
  color: #ffffff
  }