/*   All used colours
#1B6FDE blue        - 
#421BDE ??          - nav
#1B31DE ??
#831BDE violet       - footer
#00ABE0 sky blue     - background for main
#A9AFDE grey blue    - left column, right column
*/

* {
   box-sizing: border-box;
}

/* should be hidden for desktop */
.menu-button {
   display: none;
   background: none;
   border: none;
   padding: 0;
   margin: 0;
   line-height: 0; /* prevents extra whitespace */
   cursor: pointer;
}

.menu-button img {
   display: block;
}

body {
   /* background-image: url('../images/background.jpg'); */
   background-color: #1B31DE;
}


#home-wrapper,
#contact-wrapper,
#sign-in-wrapper,
#register-wrapper,
#perth-notes-wrapper,
#tech-notes-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: minmax(120px, auto) minmax(80px, auto) auto minmax(100px, auto);
    grid-template-columns: 1fr;
    row-gap: 1px;
    padding: 1px;
    background-color: #00ABE0;
}

#home-wrapper {
	grid-template-areas:
      "head"
      "nav"
      "home-main"
      "foot";
}
	
/* Contact page desktop version */
#contact-wrapper {
   grid-template-areas:
      "head"
      "nav"
      "contact-main"
      "foot";   
}


#home-main,
#contact-main,
#sign-in-main,
#register-main,
#perth-notes-main,
#tech-notes-main {
    display: grid;
    grid-template-columns: 7fr 3fr;
	grid-template-rows: 1fr;
    grid-template-areas: "left-column right-column";
}


#contact-main {
   grid-area: contact-main;     
}


main > article.left-column,
main > aside.right-column {
  margin: 5px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background-color: #A9AFDE;
}


#contact-main>article.left-column {
   grid-area: left-column;   
   padding: 5px;
}

#contact-form {
   display: grid;
   grid-template-areas:
      "contact-fields"
      "contact-button";
   grid-template-rows: 1fr minmax(60px, auto);
   grid-template-columns: 1fr;
   row-gap: 1px;
   padding: 1em;
}

#contact-form-fields {
   grid-area: contact-fields;
   /*background-color: orange;*/
   display: grid;
   grid-template-areas:
      "contact-firstname1 contact-fname"
      "contact-lastname1 contact-lname"
      "contact-email1 contact-email"
      "contact-state1 contact-state"
      "contact-comment1 contact-feedback";
   grid-template-rows: repeat(4, 1fr) minmax(150px, auto);
   grid-template-columns: 1fr minmax(80px, auto);
   row-gap: 5px;
   column-gap: 15px;
   padding: 1em;
   justify-self: center;
}

#contact-submit {
   grid-area: contact-button;
   padding: 0.5em;
   margin: 0.5em;
   margin-left: 15em;
   margin-right: 15em;
}

#contact-fname {
   grid-area: contact-fname;
}

#contact-firstname1 {
   grid-area: contact-firstname1;
   justify-self: end;
}

#contact-lastname1 {
   grid-area: contact-lastname1;
   justify-self: end;
}

#contact-lname {
   grid-area: contact-lname;
}

#contact-email1 {
   grid-area: contact-email1;
   justify-self: end;
}

#contact-email {
   grid-area: contact-email;
}

#contact-state1 {
   grid-area: contact-state1;
   justify-self: end;
}

#contact-state {
   grid-area: contact-state;
}

#contact-comment1 {
   grid-area: contact-comment1;
   justify-self: end;
}

#contact-feedback {
   grid-area: contact-feedback;
}


#contact-main>aside.right-column {
   grid-area: right-column;
   padding: 5px;
}

/* Sign-in / login desktop version */

#sign-in-wrapper {   
   grid-template-areas:
      "head"
      "nav"
      "sign-in-main"
      "foot";   
}

#sign-in-main {
   grid-area: sign-in-main;
}    

#sign-in-main>article.left-column {
   grid-area: left-column;   
   padding: 5px;
}

#login-form {
   display: grid;
   grid-template-areas:
      "login-fields"
      "login-button";
   grid-template-rows: 1fr minmax(25px, 50px);
   grid-template-columns: 1fr;
   row-gap: 1px;
   padding: 1em;
}

#login-form-fields {
   grid-area: login-fields;
   display: grid;
   grid-template-areas:
      "username1 username2"
      "password1 password2";
   grid-template-rows: 1fr 1fr;
   grid-template-columns: 1fr minmax(80px, auto);
   row-gap: 5px;
   padding: 1em;
   column-gap: 15px;
   justify-self: center;
   /*justify-items: center;*/

}

#login-submit {
   grid-area: login-button;
   /*padding: 0.5em;
   margin: 0.5em;
   margin-left: 15em;
   margin-right: 15em;*/
   padding: 0.5em 2em;
   margin: 0.5em auto;
   display: block;

}

#username1 {
   grid-area: username1;
   justify-self: end;
   padding-left: 3em;
}

#uname {
   grid-area: username2;
}

#password1 {
   grid-area: password1;
   justify-self: end;
}

#password {
   grid-area: password2;
}




#sign-in-main>aside.right-column {
   grid-area: right-column;
   padding: 5px;
}

/* Sign-up / register desktop version */
#register-wrapper {
   grid-template-areas:
      "head"
      "nav"
      "register-main"
      "foot";   
}

#register-main {
   grid-area: register-main;
}

#register-main>article.left-column {
   grid-area: left-column;
   padding: 5px;
}

#register-form {
   display: grid;
   grid-template-areas:
      "register-fields"
      "register-button";
   grid-template-rows: 1fr minmax(60px, auto);
   grid-template-columns: 1fr;
   row-gap: 1px;
   padding: 1em;
}

#register-form-fields {
   grid-area: register-fields;
   display: grid;
   grid-template-areas:
      "reg-username1 reg-username2"
      "reg-password1 reg-password2"
      "reg-firstname1 reg-fname"
      "reg-lastname1 reg-lname"
      "reg-email1 reg-email"
      "reg-state1 reg-state"
      "reg-terms reg-terms-label";
   grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr minmax(80px, auto);
   row-gap: 5px;
   column-gap: 15px;
   padding: 1em;
   justify-self: center;
}

#register-submit {
   grid-area: register-button;
   padding: 0.5em;
   margin: 0.5em;
   margin-left: 15em;
   margin-right: 15em;
}

#reg-username1 {
   grid-area: reg-username1;
   justify-self: end;
}

#reg-username2 {
   grid-area: reg-username2;
}

#reg-password1 {
   grid-area: reg-password1;
   justify-self: end;
}

#reg-password2 {
   grid-area: reg-password2;
}

#reg-fname {
   grid-area: reg-fname;
}

#reg-firstname1 {
   grid-area: reg-firstname1;
   justify-self: end;
}

#reg-lastname1 {
   grid-area: reg-lastname1;
   justify-self: end;
}

#reg-lname {
   grid-area: reg-lname;
}

#reg-email1 {
   grid-area: reg-email1;
   justify-self: end;
}

#reg-email {
   grid-area: reg-email;
}

#reg-state1 {
   grid-area: reg-state1;
   justify-self: end;
}

#reg-state {
   grid-area: reg-state;
}

#reg-terms {
   grid-area: reg-terms;
   justify-self: end;
}

#reg-terms-label {
   grid-area: reg-terms-label;
   padding-top: 2px;
}


#register-main>aside.right-column {
   grid-area: right-column;   
   padding: 5px;
}

/* Perth notes for newcomers desktop version */
#perth-notes-wrapper {   
   grid-template-areas:
      "head"
      "nav"
      "perth-notes-main"
      "foot";   
}

#perth-notes-main {
   grid-area: perth-notes-main;      
   padding: 1px;   
}

#perth-notes-main>article.left-column {
   grid-area: left-column;   
   padding: 20px;
}

#perth-notes-main > article.left-column section {
    display: flex;
    flex-direction: column;
}

/* comment link at the bottom-right of the section */
.comment-reference {
    margin-top: auto;       /* bottom of flex column */
    align-self: flex-end;   /* to the right edge */    
    display: inline-block;
    padding-top: 0.5em;
}


#perth-notes-main>article.left-column hr {
   /*color: red;*/
   width: 100%;
}

#perth-notes-main>aside.right-column {
   grid-area: right-column;
   padding: 5px;
}

/* Technical notes desktop version */
#tech-notes-wrapper {   
   grid-template-areas:
      "head"
      "nav"
      "tech-notes-main"
      "foot";   
}

#tech-notes-main {
   grid-area: tech-notes-main;   
   padding: 1px;   
}

#tech-notes-main>article.left-column {
   grid-area: left-column;	
   padding: 20px;
}

#tech-notes-main > article.left-column section {
    display: flex;
    flex-direction: column;
}

/* comment link at the bottom-right of the section */
.comment-reference {
    margin-top: auto;       /* bottom of flex column */
    align-self: flex-end;   /* to the right edge */    
    display: inline-block;
    padding-top: 0.5em;
}


#tech-notes-main>article.left-column hr {   
   width: 100%;
}

#tech-notes-main>aside.right-column {
   grid-area: right-column;
   padding: 5px;
}

header.top-header {
   grid-area: head;
   display: grid;
   grid-template-columns: auto 1fr;
   grid-template-areas: "header-image header-company-name";
   align-items: center;
   background-color: #FFFFFF;
   border: #000000;
   border-width: 1px;
   border-style: solid;
}

#logo-area {
   grid-area: header-image;
   margin: 0;
   padding-left: 1em;
}

#logo {
   max-height: 100px;
   width: auto;
   display: block;

}

header>h1 {
   grid-area: header-company-name;
   font-family: Arial, Helvetica, sans-serif;
   padding-left: 2em;
}

nav {
   grid-area: nav;
   width: 100%;
   background-color: #421BDE;

}

/* Learning materials, session 4, Links and Lists */
nav ul {
   width: 100%;
   list-style: none;
   /* this is a flex box inside nav for menu layout (row) */
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 700;
   font-size: large;
}

nav a {
   text-decoration: none;
   display: block;
   /*padding: 1em;*/
   color: #ffffff;
}

nav a:hover {
   color: white;
   background: #1565C0;
}

#home-main {
   grid-area: home-main;
}    

#home-main>article.left-column {
   grid-area: left-column;   
   padding: 20px;   
}

#home-main>aside.right-column {
   grid-area: right-column;
   padding: 5px;
}


#home-main > aside.right-column section {
   margin: 0;
   padding: 0;
}

header.heading {
   padding-left: 10px;
   padding-right: 10px;
   background-color: aliceblue;
}


h2 {
   margin: 0;
   padding: 0;
}

section>p {
   margin: 0px;
   padding: 0;
}

p.readable {
   padding: 10px;
   color: #FFFFFF;   
}


footer {
   grid-area: foot;
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 3fr 7fr;
   grid-template-areas: "footer-left footer-right";
   background-color: #831BDE;
   color: #FFFFFF;
   font-family: Arial, Helvetica, sans-serif;
   font-size: large;
   align-items: center;
   min-height: 100px;
}

#footer-left {
   grid-area: footer-left;
   text-align: center;
}

#footer-right {
   grid-area: footer-right;
}

ul.footer-menu-list {
   list-style-type: none;

   /* this is a flex box inside nav for menu layout (row) */
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;
}

a.bottom-menu {
   text-decoration: none;
   display: block;
   padding: 1em;
}

a.bottom-menu:hover {
   color: white;
   background: #1565C0;
}

/* invisible headers to pleasure https://validator.w3.org */
h4 {
   display: none;
}


#contact-main iframe {
  max-width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3; /* keeps a nice map shape */
  display: block;
}



/* Small only */
@media screen and (max-width: 600px) {
   nav ul {
      display: none;
   }

   #home-wrapper,
   #contact-wrapper,
   #sign-in-wrapper,
   #register-wrapper,
   #tech-notes-wrapper,
   #perth-notes-wrapper
   {
      max-width: 600px;
   }   



   #login-submit {      
      grid-area: login-button;
      padding: 1em;
      margin: 1em;
      margin-left: 3em;
      margin-right: 3em;
      min-height: 45px;
   }    

   #register-form-fields {      
      grid-area: register-fields;      
      display: grid;
      grid-template-areas:
         "reg-username1"
         "reg-username2"
         "reg-password1"
         "reg-password2"
         "reg-firstname1"
         "reg-fname"
         "reg-lastname1"
         "reg-lname"
         "reg-email1"
         "reg-email"
         "reg-state1"
         "reg-state"
         "reg-terms"
         "reg-terms-label";
      grid-template-rows: repeat(14, 1fr);
      grid-template-columns: 1fr;
      row-gap: 5px;
      column-gap: 15px;
      padding: 1em;
      justify-self: center;
   }

   #reg-username1 {
      grid-area: reg-username1;
      justify-self: start;
   }

   #reg-password1 {
      grid-area: reg-password1;
      justify-self: start;
   }

   #reg-firstname1 {
      grid-area: reg-firstname1;
      justify-self: start;
   }

   #reg-lastname1 {
      grid-area: reg-lastname1;
      justify-self: start;
   }

   #reg-email1 {
      grid-area: reg-email1;
      justify-self: start;
   }

   #reg-state1 {
      grid-area: reg-state1;
      justify-self: start;
   }

   #reg-terms {
      grid-area: reg-terms;
      justify-self: center;
   }


   #register-submit {      
      grid-area: register-button;
      padding: 1em;
      margin: 1em;
      margin-left: 3em;
      margin-right: 3em;
      min-height: 45px;      
   }

   .menu-content {
	   display: none;
   } 

   .menu-button {
      display: block;
      float: inline-end;
      padding-right: 1em;
      padding-top: 1em;
   }
   
   .menu-opened {
	   display: block;	   
   }
   
   .menu-closed {
	   display: none;
   }
   
   #home-main,
   #contact-main,
   #sign-in-main,
   #register-main,
   #perth-notes-main,
   #tech-notes-main
   {
      display: grid;
      grid-template-rows: auto auto;
      grid-template-columns: 1fr;
      grid-template-areas: "left-column"
         "right-column";
   }
   
   #home-main {
      grid-area: home-main;      
   }

   /* ===== Contact page  ======*/
   #contact-main {      
      grid-area: contact-main;	      
   } 

   #contact-submit {      
      grid-area: contact-button;
      padding: 1em;
      margin: 1em;
      margin-left: 5em;
      margin-right: 5em;
      min-height: 45px;
   }

   #contact-form-fields {	   
      grid-area: contact-fields;      
      display: grid;
      grid-template-areas:
         "contact-firstname1"
         "contact-fname"
         "contact-lastname1"
         "contact-lname"
         "contact-email1"
         "contact-email"
         "contact-state1"
         "contact-state"
         "contact-comment1"
         "contact-feedback";
      grid-template-rows: repeat(9, 1fr) minmax(120px,150px);
      grid-template-columns: 1fr;
      row-gap: 5px;
      column-gap: 15px;
      padding: 1em;
      justify-self: center;
   }

   #contact-firstname1 {
      grid-area: contact-firstname1;
      justify-self: start;
   }

   #contact-lastname1 {
      grid-area: contact-lastname1;
      justify-self: start;
   }

   #contact-email1 {
      grid-area: contact-email1;
      justify-self: start;
   }

   #contact-state1 {
      grid-area: contact-state1;
      justify-self: start;
   }

   #contact-comment1 {
      grid-area: contact-comment1;
      justify-self: start;
   }

   /* Perth notes for newcomers mobile version*/
   #perth-notes-main {      
      grid-area: perth-notes-main;      
   }

   /* Technical notes mobile version*/
   #tech-notes-main {      
      grid-area: tech-notes-main;      
   }
   
   #sign-in-main {
	   grid-area: sign-in-main;
   }
   
   #register-main {
	   grid-area: register-main;
   }


   footer {
      display: grid;
      grid-template-rows: auto auto;
      grid-template-columns: 1fr;
      grid-template-areas: "footer-left"
         "footer-right";
      font-size: medium;
      min-height: 40px;
      align-items: start;
      row-gap: 0;
   }


   footer section {
      margin: 0;
      /* ensure sections themselves have no extra margins */
      padding: 0;
   }


   #footer-left {
      grid-area: footer-left;
      font-size: x-large;
   }

   #footer-right {
      grid-area: footer-right;
   }


   #footer-left>p,
   #footer-right>p {
      text-align: start;
      text-indent: 1em;

      margin: 0;
      padding: 0;

      margin-bottom: 0;
      margin-top: 0;
   }
}


/* Medium and up */
@media screen and (min-width: 601px) {}

/* Medium only */
@media screen and (min-width: 601px) and (max-width: 900px) {

   /* make menu vertical for medium screens*/
   nav ul {
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
   }
}