/* base.html and index.html */

* {
  box-sizing: border-box;
}

html {
  font: 17px Verdana, sans-serif;
  color: #3D3F41;
  line-height: 1.5;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
}

#mobile-dropdown-container {
  display: none;
}

#top-container {
  display: grid;
  grid-template-areas: "glogo" "search";
  grid-template-columns: 0.8fr 3.2fr;
}

#logo-mobile-search-container {
  grid-area: "glogo";
}

#search {
  margin-top: 0.6em;
  grid-area: "search";
}

#search.active {
  display: unset;
}

#search-no-results {
  text-align: center;
}

.search-text-link {
  color: #3D3F41;
  text-decoration: none;
}

.search-text-link:hover {
  text-decoration: underline;
}

.search-text-link:visited {
  color: #3D3F41;
  text-decoration: none;
}

#enter {
  color: black;
  border: 1px solid blue;
  border-radius: 1.8em;
  padding-left: 2em;
}

#go, #reset {
  background-color: #6495ed;
  color: white;
}

#go:hover {
  background-color: #bff4be;
  color: black !important;
}

#reset:hover {
  background-color: #bff4be;
  color: black !important;
}

#navbar-for-text {
  margin-top: -1em;
  height: 2.2em;
  width: 100%;
  background-color: #6495ed;
}

#list-container.active {
  display: block;
}

#nav-list {
  margin-top: 1em;
  margin-left: -2.7em;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  align-items: left;
  justify-content: left;
}

#nav-list li {
  padding-top: 0.31em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  padding-bottom: 0.31em;
}

#nav-list li:hover {
  background-color: #bff4be;
}

#nav-list li a {
  color: white;
  text-decoration: none;
}

#nav-list li a:hover {
  color: black !important;
}

#nav-list li a:visited {
  color: white;
  text-decoration: none;
}

#burger-button {
  display: none;
}

#fs {
  display: grid;
  grid-template-areas: "fs-bw" "fs-colorized";
  grid-template-columns: 1.5fr 1.5fr;
}

#fs-bw {
  grid-area: "fs-bw";
  margin-right: 0.5em;
}

#fs-colorized {
  grid-area: "fs-colorized";
  margin-left: 0.5em;
}
/*
#slots {
  display: grid;
  grid-template-areas: "slot1" "slot2" "slot3";
  grid-template-columns: 1fr 1fr 1fr;
}

#slot-1 {
  grid-area: "slot1";
  margin-right: 0.25em;
}

#slot-2 {
  grid-area: "slot2";
  margin-left: 0.125em;
  margin-right: 0.125em;
}

#slot-3 {
  grid-area: "slot3";
  margin-left: 0.25em;
}
*/

#slots {
  display: flex;
}

#slot-1, #slot-2, #slot-3 {
  width: 48%;
  height: 48%;
}

#slot-2, #slot-3 {
  margin-left: 0.25em;
}

#slot-1 a {
  color: black;
  text-decoration: none;
}

#slot-1 a:visited {
  color: black;
  text-decoration: none;
}

#slot-2 a {
  color: black;
  text-decoration: none;
}

#slot-2 a:visited {
  color: black;
  text-decoration: none;
}

#slot-3 a {
  color: black;
  text-decoration: none;
}

#slot-3 a:visited {
  color: black;
  text-decoration: none;
}

.film-figure {
  text-align: center !important;
}

footer {
  width: 100%;
  height: auto;
  color: white;
  font-size: 0.9em;
  background-color: #6495ed;
}

#footer-div {
  display: grid;
  grid-template-areas: "flogo" "left" "right";
  grid-template-columns: 1fr 1fr 1fr; 
}

#footer-logo {
  grid-area: "flogo";
  margin-left: -1em;
}

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

#post-footer-logo-right {
  grid-area: "right";
}

#contact a {
  color: white;
  text-decoration: none;
}

#contact a:hover {
  color: black !important;
}

#contact a:visited {
  color: white;
  text-decoration: none;
}

/* The other html files */

.text-link {
  color:#407df0;
  text-decoration: none;  
}

.text-link:hover {
  text-decoration: underline !important;  
}

.text-link:visited {
  color:#276ef1;
  text-decoration: none;  
}

#primary-colors-container {
  display: flex;
  align-items: center;
}

#primary-colors {
  width: 4%;
  height: 4%;
}

#primary-colors-caption {
  margin-left: 0.25em;
}

#issue {
  display: grid;
  grid-template-areas: "c1" "c2";
  grid-template-columns: 1.5fr 1.5fr; 
}

#c1 {
  grid-area: "c1";
}

#c2 {
  grid-area: "c2";
}

#start, #end {
  color: black;
  margin-left: 0.5em;
  padding-left: 0.25em;
  border: 1px solid rgb(95, 95, 233);
}

#start:focus {
  outline: 0.2em solid rgba(66,156,217,0.5);
}

#end:focus {
  outline: 0.2em solid rgba(66,156,217,0.5);
}

#colorize-button {
  background-color: #6495ed;
  color: white;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

#colorize-button:hover {
  background-color: #bff4be;
  color: red !important;
}

#download {
  background-color: #6495ed;
  color: white;
  padding-left: 1em;
  padding-right: 1em;
}

#download:hover {
  background-color: #bff4be;
  color: blue !important;
}

#core-article {
  margin-top: -1.5em;
}

#forename, #surname, #email-address {
  margin-left: 1em;
  padding-left: 0.5em;
  width: 50%;
  border: 1px solid rgba(0,0,0,0.5);
}

#subject-title {
  padding-left: 0.5em;
  border: 1px solid rgba(0,0,0,0.5);
}

#message {
  padding-left: 0.5em;
  padding-right: 0.5em;
  border: 1px solid rgba(0,0,0,0.5);
}

#forename:focus {
  outline: 0.2em solid rgba(66,156,217,0.5);
}

#surname:focus {
  outline: 0.2em solid rgba(66,156,217,0.5);
}

#email-address:focus {
  outline: 0.2em solid rgba(66,156,217,0.5);
}

#subject-title:focus {
  outline: 0.2em solid rgba(66,156,217,0.5);
}

#message:focus {
  outline: 0.2em solid rgba(66,156,217,0.5);
}

#submit-message {
  background-color: #6495ed;
  color: white;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

#submit-message:hover {
  background-color: #bff4be;
  color: red !important;
}

@media screen and (max-width: 1100px) {

  #primary-colors {
    width: 6%;
    height: 6%;
  }

}

@media screen and (max-width: 1050px) {

  #primary-colors {
    width: 8%;
    height: 8%;
  }

}

@media screen and (max-width: 1000px) {

  #logo {
    margin-top: 0.6em;
  }
 
}

@media screen and (max-width: 700px) {

  /* base.html and index.html */

  #top-container {
    display: block;
  }

  #search {
    display: none;
  }

  #mobile-dropdown-container {
    display: unset;
  }

  #logo-mobile-search-container {
    display: grid;
    grid-template-areas: "logo" "dropdown";
    grid-template-columns: 2fr 1fr;
  }

  #logo {
    grid-area: "logo";
  }

  #mobile-dropdown-container {
    grid-area: "dropdown";
    text-align: center;
  }

  #dropdown-search {
    margin-top: 1.4em;
    transform: rotate(270deg);
    background-color: #6495ed;
    color: white;  
  }

  #dropdown-search:hover {
    color: black !important;
    background-color: #bff4be;
  }

  #navbar-for-text {
    margin-top: 0.5em;
    height: auto;
  }

  #list-container {
    display: none;
    margin-top: 0em;
    text-align: left;
  }

  #burger-button {
    display: unset;
    margin-left: 0.6em;
  }

  #hamburger {
    font-size: 1.2em;
    color: black;
    background-color: #6495ed;
    border: none;
  }

  #hamburger:hover {
    background-color: #bff4be;
  }

  #nav-list {
    display: block;
    margin-left: -2em;
    width: 118%;
    background-color: white;
  }

  #nav-list li {
    padding-left: 0em;
    padding-right: 0em;
  }
  
  #nav-list li a {
    color: black;
  }

  #nav-list li a:visited {
    color: black;
  }

  #fs {
    display: block;
  }

  #fs-bw {
    margin-right: 0em;
  }

  #fs-colorized {
    margin-left: 0em;
    margin-top: 0.5em;
  }

  #footer-div {
    display: block;
  }

  #post-footer-logo-left {
    text-align: left;
  }

  /* The other html files */

  #primary-colors {
    width: 10%;
    height: 10%;
  }

  #issue {
    display: block;
  }


}

@media screen and (max-width: 600px) {

  #primary-colors {
    width: 12%;
    height: 12%;
  }

}