* {
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
}

img,
source {
  display: block;
}

p,
span,
legend,
input,
a.link,
figcaption {
  font-family: roboto, helvetica, arial, sans-serif;
  color: var(--textColor);
  font-size: 1.2rem;
  padding: 5px;
}

a.link {
  color: #900;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Bree Serif', Times New Roman, serif;
  color: var(--headlineColor);
  padding: 5px;
  font-size: 1.2rem;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: var(--outerBackgroundColor);
}

nav {
  display: flex;
  flex-direction: column;
  text-align: center;
  background-color: var(--headlineColor);
  margin: auto;
}

a.menu {
  display: block;
  padding: 10px 15px;
  font-family: roboto, helvetica, arial, sans-serif;
  font-weight: bold;
  color: white;
  text-decoration: none;
  transition: 0.3s ease-in-out;
}

.menu:hover:not(.active) {
  color: var(--headlineColor);
  background-color: white;
}

a.active {
  color: #111;
  background-color: #ccc;
}

footer.footer p {
  font-size: smaller;
}

main.index {
  max-width: 650px;
  margin: 0 auto;
}

section.index, footer.footer {
  background-color: var(--backgroundColor);
}

section.index {
  height: 100%;
}

.terms {
  display: none;
}

main.contact {
  max-width: 650px;
  margin: 0 auto;
}

section.contact {
  background-color: var(--backgroundColor);
  height: 100%;
}

input.send, a.send {
  border: outset 3px #666;
  border-radius: 3px;
  color: black;
  background-color: #ccc;
  margin: 5px;
}

p.required {
  font-size: small;
  color: red;
}

span.required {
  font-size: small;
  color: red;
  padding-left: 0;
}

/*To make the asterisk next too the word 'email' closer than it otherwise would be if it had the default padding of 5px*/
span#email {
  padding-right: 2px;
}

fieldset {
  border: solid 1px black;
  border-radius: 4px;
  padding: 0 5px 2px 5px;
  background-color: white;
  margin: 0 5px;
}

legend {
  font-size: small;
  padding: 3px;
}

input:not([type="submit"]), textarea {
  width: 100%;
}

a.link {
  text-decoration: none;
}

main.login {
  max-width: 650px;
  margin: auto;
}

section.login {
  background-color: var(--backgroundColor);
  min-width: 300px;
  min-height: 300px;
  height: auto;
  border-radius: 4px;
  display: grid;
}

article.logout {
  margin: auto;
}

/* To centre the login button on the goodbye.php page */
p.center {
  display: grid;
}

a.center {
  margin: auto;
}

main.gallery {
  width: 100%;
  display: grid;
  justify-items: center;
}

figcaption {    
  background: var(--backgroundColor);
  margin: 0 auto 1rem;
  padding: 5px 10px;
  display: flex;
  justify-content: center;
}

.gallery-wrapper {
  grid-template-columns: calc(100%);
  display: grid;
  gap: 15px;
  max-width: 95vw;
  margin: auto;
}

.card {
  display: table;
  width: 1%;
  margin: 0 auto;
  padding: 0;
}

img.gallery {
  max-width: calc(95vw - 15px);
  max-height: calc(95vw - 15px);
  width: auto;
  height: auto;
  margin: auto;
  display: block;
}



/* Border colors for testing     */
/*

main.gallery{
  border: red solid .1vw;
}
article.gallery{
  border: blue solid .1vw;
}
figure.card{
  border: yellow solid .1vw;
}
img.gallery {  
  border: green solid .1vw;
}
.gallery-wrapper {
  border: coral solid .1vw;
}

*/

button.previous,
button.next,
button.start,
button.end {
  border: outset 1px #666;
  border-radius: 3px;
  color: black;
  background-color: #ccc;
  padding: 10px;
  font-weight: bold;
  transition: 0.3s ease-in-out;
}
input.send:hover,
button.previous:hover,
button.next:hover,
button.start:hover,
button.end:hover {
  border: inset 1px #666;
  border-radius: 3px;
  color: white;
  background-color: #333;
  font-weight: bold;
  transition: 0.3s ease-in-out;
}

/* styling for the buttons that would take the gallery "off the end" if they worked */
button.previousGhost,
button.nextGhost,
button.startGhost,
button.endGhost {
  border-radius: 3px;
  color: #fff;
  background-color: #ddd;
  padding: 10px;
  transition: 0.3s ease-in-out;
}

div.buttons {
  width: 100%;
  display: flex;
}

div.buttons {
  flex-direction: column;
}

span.fa-angle-double-left,
span.fa-angle-left,
span.fa-angle-double-right,
span.fa-angle-right {
  display: none;
}

span.fa-angle-double-up,
span.fa-angle-up,
span.fa-angle-down,
span.fa-angle-double-down {
  display: inline;
}

input#number {
  width: 4rem;
  font-weight: bold;
  border: inset 1px #666;
  background-color: #ccc;
  color: #333;
  transition: 0.3s ease-in-out;
}

input#number:hover {
  border: inset 1px #666;
  background-color: #333;
  color: #ccc;
}

button#numberSubmit {
  color: #333;
  background-color: #ccc;
  padding: 5px;
  border: 1px outset #666;
  transition: 0.3s ease-in-out;
}

button#numberSubmit:hover {
  color: #ccc;
  background-color: #666;
  padding: 5px;
  border: 1px outset #666;
}

span.goTo {
  border: outset 1px #666;
  text-align: center;
}

h1.treeHead {
  text-align: center;
}

figure.tree {
  width: 1200px;
  display: grid;
  margin: auto;
}

figcaption.tree {
  width: auto;
}

/* *** Tablet *** */
@media screen and (min-width: 600px) {
  p,
  span,
  legend,
  input,
  a.link,
  figcaption {
  font-size: 1.1rem;
  }

  img.gallery {
    max-width: calc((95vw - 30px) / 2);
    max-height: calc((95vw - 30px) / 2);
  }
  
  .gallery-wrapper {
    grid-template-columns: calc(47.5vw - 7.5px) calc(47.5vw - 7.5px);
  }  
  
}

/* *** Desktop *** */
@media screen and (min-width: 992px) {
  p,span,legend,input,a.link,
  figcaption {
  font-size: 1rem;
  }

.gallery-wrapper {
    grid-template-columns: calc(31.66vw - 10px) calc(31.66vw - 10px) calc(31.66vw - 10px);
  }

  img.gallery {
  max-width: calc((95vw - 30px) / 3);
  max-height: calc((95vw - 30px) / 3);
  }
}

/*    *** tablet and desktop  ***     */
@media screen and (min-width: 600px) {
  nav {
    flex-direction: row;
  }

  a.right {
    margin-left: auto;
  }

  div.buttons {
    flex-direction: row;
  }

  button.previous,
  button.next,
  button.start,
  button.end {
    width: 7rem;
    margin: 10px;
  }

  button.previous:hover,
  button.next:hover,
  button.start:hover,
  button.end:hover {
    margin: 10px;
  }

  button.start,
  button.start:hover {
    margin-right: auto;
  }

  button.end,
  button.end:hover {
    margin-left: auto;
  }

  span.fa-angle-double-left,
  span.fa-angle-left,
  span.fa-angle-double-right,
  span.fa-angle-right {
    display: inline;
  }

  span.fa-angle-double-up,
  span.fa-angle-up,
  span.fa-angle-down,
  span.fa-angle-double-down {
    display: none;
  }

  button.previousGhost,
  button.nextGhost,
  button.startGhost,
  button.endGhost {
    width: 7rem;
    margin: 10px;
  }

  button.startGhost {
    margin-right: auto;
  }

  button.endGhost {
    margin-left: auto;
  }

  span.goTo {
    margin: 10px;
  }
}