/*EXTERNAL STYLESHEET*/

/*GENERAL STYLING*/
html, body {
  width: 100%;
  height: 100%; /*The size of the browser window - changes as browser bigger or smaller*/
  margin: 0;
  font-family: 'Roboto', sans-serif;
  color:#abe3e4; /*Changes burger color*/
  background-color: #0a7891;
}


/*<p> styled at media breakpoint, below*/

h1 { /*Name on home page*/
text-shadow: 5px 5px 15px black;
font-size: 80px;
text-align: center;
color: #e1ebef;
font-family: 'Caveat', cursive;
}

h2 { 
font-family: 'Permanent Marker', cursive; 
font-size: 33px;
}

/*h3 styling is under home page*/

h4 { 
  text-shadow: 5px 5px 15px black;
  font-size: 40px;
  text-align: center;
  color: #e1ebef;
  background-color: #004b62;
  font-family: 'Caveat', cursive;
  border: 2px solid lightblue;
  box-sizing: border-box; 
}

h5 {
  font-size: 15px;
}
/* textbox*/
.textbox { /*This is a misnomer.*/
  color: #061927;
  background-color: #e1ebef; 
  padding: 20px; 
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  border: 5px solid #004b62;
  box-sizing: border-box; /*The browser accounts for border/padding in values specified for element width and height. Easier to size elements.*/
    }
  .textbox a:visited, .textbox a:link {
      color:  #004b62;
    }
  .textbox a:hover {
      color: #061927;
      font-weight: bolder;
  }
/*header image for all pages except home page*/
#header-image {
  background-image: url("../images/ocean13.jpg"); 
  background-color:#061927;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; 
  height: 300px;
}

/*NAVBAR with HAMBURGER*/
.nav { /*HAMBURGER*/
  /*"position: fixed;" - navbar stays at the top of the page regardless of scrolling but there was a stacking issue*/
  position: relative; /*Adding a "position: relative;" did not change the stacking order issue with animations and transitions.*/
  z-index: 2; /*Adding a z-index in addition to "position: relative", stacks the navbar on top of the animations/transitions*/
  font-family: 'Permanent Marker', cursive;  
  border-bottom: 1px solid #004b62;
  text-align: center;
  height: 65px;
  line-height: 65px;
  }  
   .menu {
    position: absolute;/*absolute position removes the burger menu from the flow so that it is on top of elements beneath it*/
    position: fixed; /*navbar remains fixed at the top of the display regardless of scrolling*/
    display: block;
    width: 100%; /*navbar background color extends the full width available*/
    margin: 0 0 0 0; 
    background-color:#061927; opacity:0.95; /*Very slight navbar opacity*/
  } 
   .menu a {
    clear: right;
    text-decoration: none;
    color: #e1ebef;
    margin: 0 10px; /*0px on top. 10px left and right.*/
    line-height: 40px; /*When burger and checkbox are hidden, the menu will be at the top of the page*/
    text-shadow: 8px 6px 9px black;
    font-size: 18px;
    letter-spacing: 4px;          
  } 
  .nav label { /*.nav needs to be specified to avoid styling issues with contact form label*/
    font-size: 26px;
    line-height: 70px;
    display: none; /*This hides label*/
    width: 26px;
    position: fixed; /*Burger remains fixed at the top of the display regardless of scrolling*/
  }  
  #toggle {
    display: none; /*hidden*/    
  }
    /*HOVER EFFECTS for .NAV*/
    .nav :hover { /*Pseudo class when mouse hovers over element. The entire nav is affected by hover*/
        background-color: #012a40;
    }
    .nav a:hover { /*Pseudo class on hover. Only the relevant nav tab is affected by hover*/
              color:#0a7891;} /*text color changes when the mouse hovers over it*/             
/*NAVBAR END*/
  
/*MEDIA BREAKPOINT: when screen is less than max width, the font size will respond. Otherwise default p size */

@media screen and (min-width: 1800px) { 
.row {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
} }
@media screen and (max-width: 500px) { /*This styling applies when the browser size is 500 or less*/
 main p { /*does not affect footer*/
  font-size: 20px;
    }
  .hero-image {
    height: auto;  /*If the screen is smaller than max-width, the image will resize automatically*/
  }
      /*Below for burger menu*/
      .nav label{ /*.nav must be specified to avoid styling issues with contact form label*/
        display: block;
        cursor: pointer; /*The cursor will change to a pointer to show the user they are hovering over a link*/
        text-align: center;
        width: 100%; /*navbar background color extends the full width available*/
        margin: 0 0 0 0; 
        background-color:#061927; opacity:0.95; /*Very slight navbar opacity*/
      }
      .menu {
        text-align: center;
        width: 100%;
        display: none; /*Hidden*/
      }
      .menu a {
        display: block;
        border-bottom: 1px solid #57c7c8;
        margin: 0;
      }
      #toggle:checked + .menu {
        display: block; 
      }
    }
/*End burger menu*/
/*END MEDIA BREAKPOINT*/


/*HEADER CONTAINER FOR PAGES OTHER THAN HOME*/
.container { 
  padding: 0 0 0 0;
  border: 2px solid lightblue;
  box-sizing: border-box; 
 }
/*END HEADER */


/*START HOME PAGE*/
h3 { /*"Portfolio" heading and animation on home page"*/
  text-shadow: 8px 6px 9px black;
  font-size: 50px; 
  text-align: center;
  color: #e1ebef;
  font-family: 'Caveat', cursive;   
}
       /*wave animation*/
       /*The webkits currently work across most browsers. The only compatability issue detected so far is that the reflection does not appear in firefox. css element () has less browser compatability and is not used.*/
      .wavy {  /*reflection*/
        position: relative;
        -webkit-box-reflect: below -22px linear-gradient(transparent, rgba(0,0,0,0.2));
      }
      .wavy span {
        color: #e1ebef;
        position: relative;
        display: inline-block;
        animation: animate 10s ease-in-out infinite; 
        animation-delay: calc(0.5s * var(--w));
      }
      @keyframes animate {
        0%
        {
          transform: translateY(0px);
        }
        20%
        {
          transform: translateY(-20px);
        }
        40%, 100%
        {
          transform: translateY(0px);
        }
      }
      /*end wave animation*/

/*home page background image*/
.hero-image {
  background-image: url("../images/ocean13.jpg"); 
  background-color: black; /*the background color will display while the image is loading and if the image does not load*/
  height: 1400px; /*image height set - the image could be re-scaled to save time loading page*/
  background-position: center center; /* the image is always positioned in the centre vertically and horizontally*/
  background-repeat: no-repeat; /* the image appears once in the page and is not repeated*/
  background-size: cover; /*resize the image to cover the full container and rescale image based on container size*/
  position: relative; 
}
/*end home page background image*/
/*home page portrait image*/
#homeportrait {
  height: 70vh;
  /*box shadow effect*/
  -webkit-box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 0px 0px 49px 16px #000000;
  box-shadow: 5px 5px 5px 0px #000000, inset 4px 4px 15px 0px #000000, 0px 0px 49px 16px #000000;
  /*center*/
  display: block;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  /*round image corners*/
  border-radius: 5px;
  /*The transition is only active when there is a hover so the below is only activated on hover.*/
   -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
   -ms-transition: all 2s ease;
       transition: all 2s ease; 
  } 
      #homeportrait:hover { 
        filter: saturate(50%);/*drains color from image*/
        /*When the transition is placed in this section, the image jolts back to position and color as soon as hover ends. 
        To allow for a smooth transition back to position after hover ends, 
        the transition has been moved to #homeportrait*/
        -webkit-filter: saturate(50%); 
        -webkit-transform: scale(1.5, 1.5);
        -moz-transform: scale(1.5, 1.5);
        -o-transform: scale(1.5, 1.5);
        transform: scale(0.9, 0.9);
      }
/*Logos on home page*/
.logo-row { /*Row for flexbox*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 200px;
  width: auto;
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
      .logo-column {
        display: flex;
        flex-direction: column;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 10px;
      }
      .logos { 
        border-radius: 10%; /*This rounds the square edges*/
        background-color: white;
        height: 48px;
        width: 48px;
        opacity: 95%;
        box-shadow: 8px 6px 9px black;
      }
/*END HOME PAGE*/


/*BLOG PAGE START - Using Float*/
ul {
  list-style-position: outside;
  list-style-type: square;
  margin: 10px;
  padding: 10px;
}
/*two unequal columns floating next to each other */
/*left column */
.leftcolumn {
  float: left;
  width: 75%;  
}
/*right column */
.rightcolumn {
  float: left;
  width: 25%;
}
/*images on blog page*/
.portfolio-images { 
 max-width: 80%;
border: 10px solid #012a40; /*If image does not load*/
border-radius: 0.5%;
}
/*responsive layout - when the screen is less than 800px wide, the two columns will stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%; 
  }
}
/*BLOG PAGE END*/


/*PORTFOLIO PAGE -see general styling and textbox*/


/*CONTACT FORM PAGE - Using Flexbox*/
/*Using flexbox - see also media break point*/
.contact-container { 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%; 
  margin-bottom: 10px;
}
.form { 
  display: flex;
  flex-direction: column;
  width: 64%; 
  margin-left: 0.5%;
  margin-right: 0.5% 
}
.sidebar { 
  display: flex;
  flex-direction: column;
  width: 34%;
  margin-left: 0.5%;
  margin-right: 0.5% 
}
@media screen and (max-width: 950px) {
  .sidebar, .form {
    width: 100%;
    padding: 0;
    margin-right: 10px;
  }
}
/*Contact form*/
input[type=text], input[type=email], select, textarea  {
  width: 100%; /* width of text entry areas inside the form */
  padding: 15px;  
  border: 1px solid #0a7891;
  border-radius: 5px; /* Rounded borders */
  box-sizing: border-box; /* ensures that padding and width stay in place */
  margin-top: 5px; 
  margin-bottom: 15px; 
  resize: vertical; /* The user can resize the textarea vertically, if they wish */
  font-family: 'Roboto', sans-serif;
  color: #00090f;
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #0a7891;
  color:  #abe3e4;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 15px; 
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #004b62;
}
/* Add a background color to the form */
form {
  border-radius: 5px;
  background-color: #e1ebef;
  font-family: 'Roboto', sans-serif;
}
/*github icon in sidebar on contact page*/
#githubblack {
  border-radius: 50%; /*This changes the square image into a rounded circle*/
}
/*CONTACT FORM END*/

/*FOOTER - Using Flexbox*/
#footer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background-color:  #00090f;
  color: #e1ebef;
  font-family: 'Roboto', sans-serif;
  padding: 5px;
  position: relative; /*the footer is taken out of the static flow of the document and positions itself relative to its parent.*/
  bottom: 0px;/*the footer moves to the bottom of the parent*/
  width: 100%;
   }
#footer a:visited, a:link {
  color: #e1ebef; 
}
#footer a:hover {
  color: #0a7891;
}
/*Footer left column*/
.footer-left {
  order: 1;
  flex-basis: 100%;
  text-align: center;
  height: 220px;
} 
.footer-links{
  margin-top: 5px;
  line-height: 1.6;
}
.social-media {
  margin-top: 10px;
}
.socialbugs {
  height: 64px;
  margin-top: 15px;
}
/*Footer centre column*/
.footer-center {
  order: 3;
  flex-basis: 100%;
  text-align: center;
  height: 220px;
}
#footerportrait {
  height: 110px;
  /*center*/  
  margin-left: auto;
  margin-right: auto;
  /*round image corners*/
  border-radius: 5px;
} 
.footerportrait {
  margin-top: 10px;   
 }
/*Footer right column*/
.footer-right {  
  order: 2;
  flex-basis: 100%;
  text-align: center;
  height: 220px;
}
  .contact-details {
  margin-top: 10px;       
  }
  @media screen and (min-width:600px) {
    #footer{
      flex-wrap: nowrap;
    }
    .footer-left {
      order: 1;
    }
    .footer-center {
      order: 2;
    }
    .footerright {
      order: 3;
    }
  }
/*END FOOTER*/


/*PHOTO CREDITS PAGE*/

.credit-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 4px;
  flex-direction: row;
}
/* Create two equal columns that sit next to each other */
.credit-column {
  flex: 48%;
  max-width: 48%;
  padding: 0 4px;
  display: inline-block;
}
.credit-images {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .credit-column {
    flex: 100%;
    max-width: 100%;
  }
}
/*END PHOTO CREDIT PAGE*/
.wrap-element {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  width: 100%;
}

.wrapped-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}