/* Main styles*/
* {
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 1); 
    box-sizing: border-box;
}

body {
  font-family: merienda;
  font-size: 110%;
}

a {
  text-decoration: none;
}

ul,nav {
  list-style: none;
}

/* Header styles*/
header {
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 35px 30px 0px;
}

header .top-bar {
  flex-direction: row;
  justify-content: space-between;
}

header nav {
  display: flex;
}

header nav li {
  margin: 0 10px;
}

header nav li button {
  border: 2px solid black;
  color: white;
  padding: 8px 13px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  border-radius: 50px;
  background-color:  #058096ea;
  border-color: black;
  outline: none;
}

header nav li button:hover {
  color: white;
  background-color:  #06acc9;
  transform: scale(1.05);
  font-weight: 110%;
}

/* adapted from https://css-tricks.com/the-checkbox-hack/
   this is the CSS for creating a clickable dropdown */ 

* { 
  box-sizing: border-box; 
}

.tabs {
  position: relative;
  clear: both;
  display: none;
  margin-top: -45px;
  margin-left: 68vw;
}

.tab {
  position: relative;
}

.tab label {
  background: #058096ea;
  padding:5px 30px;
  cursor: pointer;
  display: block;
  position: relative;
  border-radius: 10px;
  border-color:black;
  border-width: 100px;
}
.tab label i {
  font-style: normal;
  font-size: 30px;
  color: white;
}

.tab [type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  z-index: 1;
}
.content {
  position: absolute;
  top: 100%;
  opacity: 0;
  left: 0;
  background: #058096ea;
  color: white;
  padding: 20px;
  border-radius: 20px;
  
}
.content ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.content a {
  color: white;
  display: block;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid white;
  padding: 5px;
}

[type="radio"]:checked ~ label {
  z-index: 2;
}

[type="radio"]:checked ~ label ~ .content {
  z-index: 1;
  opacity: 1;
}

.close-tab {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.close-tab label {
  background: #333;
  color: white;
}

[type="radio"]:checked ~ label ~ .close-tab {
  z-index: 3;
}

/* Section general styles */
section{
  display:flex;
  flex-direction: column;
  line-height: 40pt;
}

/* Banner page*/
.banner-section {
  position: relative;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  color: #fff;
}

/* adapted from https://www.w3schools.com/css/css3_buttons.asp  
   CSS styling for a basic button */

.cta-button button {
  /* button color adapted from https://www.javaer101.com/en/article/15058386.html */
  background-image: linear-gradient(45deg, #f09433 0%,#e6683c 30%,#dc2743 60%,#cc2366 75%,#bc1888 100%);/* #058096 Green */
  border: black;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  border-radius: 50px;
  font-family: merienda;
  border: 2px solid black;
  border-color: black;
  outline: none;
}

.banner-section strong {
  color: white;
  font-family: merienda;
}

.cta-button button:hover {
  transform: scale(1.05);
  opacity: 0.9;
  font-weight: 110%;
}

 .banner-cover-image {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), 90%,  rgba(255, 255, 255, 1)), url('processed_imgs/background\ copy.jpeg');
  z-index: -1;
  position: absolute;
  background-size: cover;
  left:0px;
  width: 100%;
  height:100%;
  opacity: 1;
}

.banner-section h1 {
  margin-bottom: 30px;
  font-family: merienda;
  font-size: 65px;
}

.banner-section h2 {
  margin-bottom: 20px;
}

/* adapted from: https://codepen.io/huange/pen/rbqsD
   CSS for a simple search bar with borders and icon */
.search-bar {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
}

.query {
  border: 3px solid #058096ea;
  border-right: none;
  border-radius: 5px 0 0 5px;
  outline: none;
  color:#96a39d;
  padding: 15px;
  height: 35px;
}

.query:focus {
  color: black;
}

.search-button {
  width: 40px;
  height: 36px;
  border: 1px solid #058096ea;
  border-radius: 0 5px 5px 0;
  background: #058096ea;
  text-align: center;
  color: #fff;
  cursor: pointer;
  font-size: 25px;
}

.search-bar .fa {
  color: white;
}

/* About section styles */
.about {
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 100px;
  padding-right: 100px;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.about-img {
  width: 100%;
}

.about-text {
  margin-top: 50px;
  text-align: left;
}

.about-text p {
  margin-bottom: 30px;
  text-align: justify;
}

.about h2{
  text-decoration: underline overline;
  color: #005bb1;
}

.about h3 {
  margin-bottom: 50px;
  text-align: justify;
}

/* Collection section styles */
.collection {
  padding-bottom: 100px;
  padding-left: 100px;
  padding-right: 100px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.collection-us {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 80vh;
  justify-content: space-evenly;
}

.collection-img-text-bundle {
  display: flex;
  flex-direction: column;
  width: 30%;
  height: 100%;
}

.collection-images {
  margin-top:50px;
  display:flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.collection-images:hover {
  transform: scale(1.03);
}

.collection h2{
  text-decoration: underline overline;
  color: #bb0249;
}

#rsfdress {
  background-image: url("processed_imgs/about1.jpeg");
  width: 100%;
  height: 100%;
}

#fsjacket {
  background-image: url("processed_imgs/about2.jpg");
}

#cdjacket {
  background-image: url("processed_imgs/about3.jpeg")
}

.collection-text {
  margin-top: 50px;
  text-align: left;
}

.collection-text p {
  margin-bottom: 30px;
  text-align: justify;
}

.collection-text h3 {
  margin-bottom: 30px;
  text-align: justify;
}

/* Reef section styles */
.reef {
  padding-bottom: 170px;
  padding-left: 100px;
  padding-right: 100px;
  padding-top: 130px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  margin-bottom: 30px;
  background: linear-gradient(to bottom,rgba(255, 255, 255, 1),15%, rgba(255, 255, 255, 0.1), 90%,  rgba(255, 255, 255, 1)), url('processed_imgs/reef-background.jpg');
  background-size: cover;
}

.reef h2{
  text-decoration: underline overline;
  color: #096b00;
}

/* adapted from: https://www.youtube.com/watch?v=j18CH0Grhbw 
   this is how I learned to create an animated slideshow of images */
.frame-slider {
  margin-top: 50px;
  overflow: hidden;
  width: 800px;
  height: 500px;
  display: flex;
  align-items: center;
}

@-webkit-keyframes slide_anim {
  0% { 
    left:4000px;
  }
  5.88235% {
    left:4000px;
  }
  11.764% {
    left:3200px;
  }
  17.647% {
    left:3200px;
  }
  23.529% {
    left:2400px;
  }
  29.411% {
    left:2400px;
  }
  35.294% {
    left:1600px;
  }
  41.176% {
    left:1600px;
  }
  47.059% {
    left:800px;
  }
  52.941% {
    left:800px;
  }
  58.823% {
    left:1600px;
  }
  64.706% {
    left:1600px;
  }
  70.588% {
    left:2400px;
  }
  76.471% {
    left:2400px;
  }
  82.35% {
    left:3200px;
  }
  88.235% {
    left:3200px;
  }
  94.118% {
    left:4000px;
  }
  100% {
    left:4000px;
  }
}

.img-slides {
  width: 4800px;
  height: 500px;
  margin: 0 0 0 -4000px;
  position:relative;
  -webkit-animation-name: slide_anim;
  -webkit-animation-duration: 35s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: reverse;
  -webkit-animation-play-state: running;
}

.img-container {
  width: 800px;
  height: 500px;
  position: relative;
  float: left;
  display: flex;
  object-fit: cover;
}

/* adapted from: https://www.youtube.com/watch?v=j18CH0Grhbw 
   this is how I learned to create an animated slideshow of images - Mini version for media query*/
.frame-slider-mini {
  margin-top: 50px;
  overflow: hidden;
  width: 320px;
  height: 200px;
  display: none;
  align-items: center;
}

@-webkit-keyframes slide_anim_mini {
  0% { 
    left:1600px;
  }
  5.88235% {
    left:1600px;
  }
  11.764% {
    left:1280px;
  }
  17.647% {
    left:1280px;
  }
  23.529% {
    left:960px;
  }
  29.411% {
    left:960px;
  }
  35.294% {
    left:640px;
  }
  41.176% {
    left:640px;
  }
  47.059% {
    left:320px;
  }
  52.941% {
    left:320px;
  }
  58.823% {
    left:640px;
  }
  64.706% {
    left:640px;
  }
  70.588% {
    left:960px;
  }
  76.471% {
    left:960px;
  }
  82.35% {
    left:1280px;
  }
  88.235% {
    left:1280px;
  }
  94.118% {
    left:1600px;
  }
  100% {
    left:1600px;
  }
}

.img-slides-mini {
  width: 1920px;
  height: 200px;
  margin: 0 0 0 -1600px;
  position:relative;
  -webkit-animation-name: slide_anim_mini;
  -webkit-animation-duration: 35s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: reverse;
  -webkit-animation-play-state: running;
}

.img-container-mini {
  width: 320px;
  height: 200px;
  position: relative;
  float: left;
  display: flex;
  object-fit: cover;
}

.img-container-mini img {
  max-width: 100%;
  max-height: 100%
}

/* Bottom links section styles */
.bottom-links {
  padding-bottom: 50px;
  padding-left: 100px;
  padding-right: 100px;
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content: space-between;
  margin-bottom: 100px;
  margin-top:100px;
}

.link-column {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: 18px;
}

/* adapted from: https://css-tricks.com/4-ways-to-animate-the-color-of-a-text-link-on-hover/ 
   using background-clip:text to animate the color of a text link on hover */
.bottom-links a { 
  margin-bottom: -20px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: linear-gradient(to right, rgb(37, 75, 190) 50%, rgb(37, 75, 190) 50%, black 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 400ms ease;
  text-decoration: underline;
}

.bottom-links a:hover {
  background-position: 0 100%;
  font-weight:800;
}

.bottom-links p { 
  margin-bottom: -20px;
}

/* Footer section styles */
footer {
  color:white;
  display: flex;
  flex-direction: column;
  text-align: center;
}

footer h3 {
  margin-bottom: 30px;
}

/* adapted from: https://www.youtube.com/watch?v=sHLVoL1tDR0
   adds social media icons with circular borders */
.icon-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  margin-bottom: 100px;
}

footer a {
  width: 70px; 
  height: 70px;
  box-shadow: 1px 4px 2px 2px #d1d2d6;
  border-radius: 50px;
  text-align: center;
  margin: 10px;
  line-height: 85px;
}

footer a i {
  font-size: 40px;
}

footer a:hover i{
  transform: scale(1.3);
  opacity: 0.7;
}

.fa-instagram {
  background-color: red;
  
  /* adapted from: https://fossheim.io/writing/posts/css-text-gradient/ 
   This applies a color gradient to text instead of background via an overlay */
  /* Create the gradient. */
  background-image: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  background-size: 100%;
  background-repeat: repeat;
  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

.fa-facebook {
  color: #3b5993;
}

.fa-envelope{
  color: rgb(255, 172, 19);
  background-color: white;
}


/* Media Query to handle mobile / smaller screen size*/ 
@media only screen and (max-width: 640px) {
  
  /* Main styles */
  p {
    line-height:40px;
  }
  
  /* Header section */ 
  body header nav {
    display: none;
  }
  
  .top-bar{
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .tabs {
    display: flex;
  }

  .tab input {
    width: 5em;
  }

  .top-bar a h1 {
    display: inline;
  }
  
  /* About section */ 
  body .about {
    padding-bottom: 100px;
    padding-left: 65px;
    padding-right: 65px;
    margin-top: 40px;
  }

  /* Collection section */
  body .collection {
    padding-bottom: 100px;
    padding-left: 65px;
    padding-right: 65px;
    margin-top: 40px;
  }
  
  body .collection-us {
    flex-direction: column;
    margin-bottom: 100px;
    margin-top: 200px;
  }

  body .collection-img-text-bundle {
    width: 60%;
    height: 300px;
  }

  body .collection-images {
    height: 100%;
  }

  /* Reef section */
  body .reef {
    padding-bottom: 100px;
    padding-left: 65px;
    padding-right: 65px;
    margin-top: 40px;
  }

  body .cover .about h3 {
    text-align: center;
  }

  body .reef .frame-slider {
    display: none; 
  }

  body .reef .frame-slider-mini {
    display: flex; 
  }

  /* Bottom links section */
  body .bottom-links { 
    flex-direction: column;
    text-align: center;
  }
  
  body .bottom-links h3{ 
    margin-top:40px;
    text-align: center;
  }

  body .bottom-links p {
    margin-bottom: -10px;
    text-align: center;
  }

  body .bottom-links a {
    text-align: center;
  }
}