@import url("https://fonts.googleapis.com/css2?family=IM+Fell+Double+Pica+SC&family=Lora&display=swap");

body {
  font-family: "Lora", sans-serif;
}

/* headings and logo */

h1 {
  font-family: "IM Fell Double Pica SC", sans-serif;
}

#logo {
  padding-left: 1em;
  float: left;
  font-size: 300%;
  letter-spacing: 4px;
  color: #3a3a3a;
  margin-top: 2%;
  margin-bottom: 2%;
}

#menu,
#logo {
  line-height: 40px;
}

#menu {
  font-size: 150%;
  letter-spacing: 3px;
}

#menu ul {
  float: right;
}

#menu li {
  float: left;
  list-style-type: none;
  padding-right: 15px;
}

#menu a {
  text-decoration: none;
  color: inherit;
}

#menu a:hover {
  border-bottom: 1px solid #3a3a3a;
}

.active {
  border-bottom: 1px solid #3a3a3a;
}

/* hero-image & cover-text */

#hero-outer {
  height: 600px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

#hero-image {
  height: 600px;
  width: 100%;
  background-size: cover;

  /*animates zoom effect on loading page */
  animation-name: hero-zoom;
  animation-duration: 5s;
  animation-fill-mode: backwards;
}

.hero-image {
  background: url("../img/resting.webp") no-repeat center center;
}

/* create the level of zoom for the hero image */
@keyframes hero-zoom {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

#cover-text {
  font-size: 120%;
  color: rgb(211, 209, 223);
  font-family: "IM Fell Double Pica SC", sans-serif;
  text-transform: uppercase;
  letter-spacing: 4px;

  width: 400px;
  height: 180px;

  padding-top: 50px;
  padding-left: 10px;

  background-color: rgba(75, 37, 16, 0.815);

  bottom: 30px;
  right: 150px;

  position: absolute;
}

/* Introduction section */

#intro {
  height: 550px;
  padding-bottom: 5%;
  margin-left: 5%;
  margin-right: 5%;
}

#left-intro {
  width: 28%;
  float: left;
}

#right-intro {
  width: 28%;
  float: right;
}

#center-intro {
  width: 33%;
  height: 350px;
  margin: 0 auto;
  padding-top: 5%;
  padding-bottom: 10%;
}

hr {
  border-top: 1px solid #3a3a3a;
  width: 100%;
  margin: 5px;
}

.left-intro-head {
  float: right;
  line-height: 20px;
  clear: both;
  margin-bottom: 5%;
}

.right-intro-head {
  float: left;
  line-height: 20px;
  clear: both;
  margin-bottom: 5%;
  text-align: right;
}

#introduction {
  text-align: center;
  margin: 5%;
  font-size: 300%;
  letter-spacing: 5px;
}

#circle-container {
  width: 400px;
  height: 400px;
  padding: 1px;
  border-style: solid;
  border-color: #ccc;
  border-width: 1px;
  border-radius: 50%;
  margin: 0 auto;
}

#circle-cover-bg {
  background: url("../img/porthole.webp") no-repeat center center;
  background-size: cover;
  height: 100%;
}

/* Timeline */

#timeline {
  background-image: url("../img/1951/plassy.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  width: 100%;
  overflow: hidden;
}

#timeline div {
  color: #fafafa;
  background-color: rgba(80, 34, 8, 0.644);
  width: 25%;
  height: 300px;
  float: left;
  padding: 60px 0 0 10px;
  text-align: center;

  border: 2px solid white;
  box-sizing: border-box;
}

#timeline h2 {
  text-underline-offset: 15%;
  font-size: 200%;
  text-decoration: underline;
  color: #fafafa;
}

/* history pages */

.hist-image {
  background: url("../img/trawler_class_section_bw.webp") no-repeat top center;
}

.timeline a {
  text-decoration: none;
}

.timeline:hover {
  opacity: 0.5;
}

.timeline-hist {
  background-image: url("../img/1951/plassy.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  width: 100%;
  overflow: hidden;
}

.timeline-hist div {
  background-color: rgba(80, 34, 8, 0.644);
  width: 25%;
  height: 100px;
  float: left;
  text-align: center;
  border: 2px solid white;
  box-sizing: border-box;
}

.timeline-hist h2 {
  font-family: "IM Fell Double Pica SC";
  text-underline-offset: 15%;
  letter-spacing: 3px;
  font-size: 200%;
  text-decoration: underline;
  color: #fafafa;
}

#page-title {
  text-align: center;
  font-size: 150%;
  letter-spacing: 3px;
}

#origin-intro {
  letter-spacing: 2px;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5%;
}

#builder {
  height: fit-content;
  padding-bottom: 5%;
}

.specs {
  width: 40%;
  position: relative;
  float: left;
  /*margin-top: 5%;*/
}

.specs-info {
  width: 80%;
  float: right;
  line-height: 20px;
  clear: both;
  margin-bottom: 5%;
}


#table {
  table-layout: fixed;
  width: 100%;
}

#table th {
  text-align: left;
  padding: 2%;
  width: 150px;
}

#table td {
  text-align: left;
  padding: 2%;
  width: 200px;
}

.advert {
  width: 50%;
  float: right;
}

.advert-info {
  width: 90%;
  float: left;
  line-height: 20px;
  clear: both;
  margin-bottom: 5%;
}

.advert-info img {
  width: inherit;
}

/*rescue images text */

.rescue-images a {
  text-decoration: none;
  color: inherit;
}
 
.rescue-images p:hover {
  border-bottom: 1px solid #3a3a3a;
} 

/* Imagessection */

#archive-images {
  width: 100%;
  clear: both;
  position: relative;
  float: left;
}

/*  two colum container for archive images */

.image-container {
  height: fit-content;
  clear: both;
  column-count: 2;
}

/* individual image sizing to ensure correct display */

.img-align {
  height: 100%;
  width: 100%;
}

div.img-txt {
  display: inline-block;
  text-align: left;
}

/* history 1940 page */

/*main image*/

.juliet-image {
  background: url("../img/1940/juliet.webp") no-repeat center center;
}

/* history 1947 page */

/*main image*/

.peterjon-image {
  background: url("../img/1947/peterjon.webp") no-repeat center center;
  background-size: cover;
}

#image-heading-1947 div {
  width: 100%;
}

/* history 1951 page */

/*main image*/

.plassy-image {
  background: url("../img/1951/plassy-air.webp") no-repeat center center;
  background-size: cover;
}

#chart img {
  width: 100%;
}

/* history 1960 page */

.rescue-image {
  background: url("../img/1960/rescue-color.webp") no-repeat center center;
}

#emblem-container {
  clear: both;
  position: relative;
  margin: auto;
  padding-top: 25px;
}

#circle-emblem {
  width: 300px;
  height: 300px;
  border-style: solid;
  border-color: #ccc;
  border-width: 1px;
  border-radius: 50%;
  margin: 0 auto;
}

#circle-cover-emblem {
  background: url("../img/1960/emblem.webp") no-repeat center center;
  background-size: cover;
  height: 100%;
  border-radius: 50%;
}
#origin-intro img {
  width: 600px;
  height: 450px;
}

#rescue-section {
  height: fit-content;
  margin-left: 5%;
  margin-right: 5%;
}

#rescue {
  width: 100%;
}

.rescue-images {
  width: fit-content;
  margin: auto;
}

.rescue-images p {
  width: fit-content;
  margin: auto;
}

#finnis-container {
  clear: both;
  position: relative;
  margin: auto;
  padding-top: 25px;
}

#circle-finnis {
  width: 300px;
  height: 300px;
  border-style: solid;
  border-color: #ccc;
  border-width: 1px;
  border-radius: 50%;
  margin: 0 auto;
}

#circle-cover-finnis {
  background: url("../img/finnis-buoy.webp") no-repeat center center;
  background-size: cover;
  height: 100%;
}

#aftermath {
  margin-left: 5%;
  margin-right: 5%;
}

.image-heading h2 {
  text-align: center;
}

/* individual image sizing to ensure correct display */

#coda div {
  margin-left: auto;
  margin-right: auto;
}

/* you tube video */
/* code taken from https://techstacker.com/how-to-responsive-youtube-videos/ */

.video-clip {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.video-clip::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.video-clip iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* footer */

footer {
  height: 150px;
}

.social-networks {
  text-align: center;
}

.social-networks > li {
  display: inline;
}

.social-networks i {
  font-size: 160%;
  margin: 1%;
  padding: 5%;
  color: #3a3a3a;
}

/* Images */
#photos {
  clear: both;
  line-height: 0;
  column-count: 4;
  column-gap: 0;
}

#photos > img {
  width: 100%;
}

/* Feedback Section */

.feedback-section {
  clear: left;
  background: url("../img/plassy-red-sky.webp");
  background-size: cover;
  background-position: center;
  height: 900px;
}

.feedback-form {
  margin: 150px 10% 0 0;
  color: #fff;
  background-color: rgba(60, 60, 60, 0.6);

  max-width: 400px;
  position: absolute;
  right: 0%; /*place input section to right for better placement relative to photo */
  padding: 30px;
}

.feedback-form > h2 {
  color: #fafafa;
  margin-bottom: 20px;
  letter-spacing: 3px;
}

.text-input {
  background: transparent; /* text input area to background or transparent */
  color: #fafafa;
  width: 98%; /* modified to ensure launch button remained inline */
  height: 25px;
  margin: 5px 0 20px 0;
  border: 1px solid #fafafa;
  border-radius: 2px;
}

.text-input:hover {
  border-color: #963c13;
}

/* place launch button on the bottom right */
.feedback-form div {
  right: 5%;
  bottom: 5%;
  position: absolute;
}

.launch-button {
  margin-top: 20px;
  border-radius: 2px;
  padding: 15px 32px 15px 32px;
  text-align: center;
  font-size: 100%;
  background-color: #963c13;
  color: #fafafa;
  display: block;
  margin-left: auto;
}

.launch-button:hover {
  background-color: #fafafa;
  color: #963c13;
}

#freetype {
  margin-top: 5px;
  height: 50px;
  width: 98%;
}

.bg-img-ref p {
  text-align: center;
}

.bg-img-ref a {
  text-decoration: none;
  color: #3a3a3a;
}

.bg-img-ref a:hover {
  text-decoration: underline;
}

/* Media queries */

/* For larger to medium screens size from 1200px wide and down */

@media screen and (max-width: 1200px) {
  #intro {
    width: 65%;
    height: 1250px;
    margin: 0 auto;
  }

  #introduction {
    padding: 30px 0;
    margin: 0;
  }

  #left-intro,
  #right-intro {
    width: 100%;
    float: left;
    padding: 0;
  }

  #left-intro-head,
  h2 {
    text-align: center;
  }

  #right-intro-head,
  h2 {
    text-align: center;
  }

  #left-intro-head,
  p {
    text-align: left;
  }

  #right-intro-head,
  p {
    text-align: left;
  }

  #center-intro {
    clear: both;
    width: 100%;
    float: left;
    padding: 0;
  }

  hr {
    display: none;
  }

  #timeline-home > div {
    width: 100%;
    clear: both;
    height: 150px;
    padding: 0;
  }
}

/* For medium screens size from 960px wide and down */

@media screen and (max-width: 960px) {
  #intro {
    width: 90%;
    height: 1150px;
    margin: 0 auto;
  }

  .left-intro,
  .right-intro-head {
    width: inherit;
  }

  .left-intro h2,
  .right-intro-head h2 {
    width: 100%;
    text-align: center;
  }

  .left-intro p,
  .right-intro-head p {
    text-align: center;
    padding: 0 20px;
  }

  #circle-container {
    width: 300px;
    height: 300px;
  }

  .advert {
    padding-top: 30px;
  }
}

/* For medium screens size from 780px wide and down */

@media screen and (max-width: 780px) {
  #circle-container {
    width: 250px;
    height: 250px;
  }

  #table table {
    width: 500px;
    padding-top: 10px;
    margin-left: auto;
    margin-right: auto;
  }

  .specs {
    width: 100%;
    float: none;
    margin-top: 0;
    padding-top: 0;
  }

  .advert {
    float: none;
    width: auto;
  }
  .advert-info {
    margin-left: 10%;
  }

  .specs-info {
    width: 100%;
  }

  #img-orig {
    column-count: 1;
  }
}

/* For medium screens size from 680px wide and down */

@media screen and (max-width: 680px) {
  .image-container {
    column-count: 1;
  }

  #cover-text {
    width: 80%;
    left: 50px;
  }

  #menu {
    clear: left;
    float: left;
    margin-left: 30px;
    margin-bottom: 20px;
    line-height: 25px;
  }
}

/* For medium screens size from 480px wide and down */

@media screen and (max-width: 480px) {
  #cover-text {
    height: 220px;
    left: 10%;
  }

  #table table {
    width: 100%;
    padding-top: 10px;
    margin-left: auto;
    margin-right: auto;
  }

  .advert-info {
    margin-left: 0;
    width: 100%;
  }

  .feedback-form {
    left: 10%;
    margin: 50px 10% 0 0;
  }

  .rescue-images img {
    width: 100%;
  }
}

/* For medium screens size from 300px wide and down */

@media screen and (max-width: 300px) {
  #cover-text {
    height: 280px;
    left: 10%;
  }

  .timeline h2 {
    font-size: revert;
  }
}