@import url("./normalize.css");
@import url("./splide.min.css");

* {
  padding:0;
  margin:0;
  transition: all 0.3s ease-in-out;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #1565C0;
  color:#222;
  font-family: 'Roboto', sans-serif;
}

section {
  padding-left:2rem;
  padding-right: 2rem;
  padding-bottom:5rem;
}

.container {
  margin:0 auto;
}

.row {
  display:flex;
  flex-direction:row;
}

.column {
  flex:1;
  display:flex;
  flex-direction:column;
}

h1,h2,h3 {
  margin:0;
  padding:0;
  font-family: 'Cormorant', serif;
  align-self:center;
  text-transform: uppercase;
}

h1 {
  font-size:4rem;
}

h2 {
  font-size:3rem;
}

p {
  padding:0.5rem;
}

hr {
  border:1px solid #607D8B;
  width:25%;
  align-self:center;
  margin:1rem;
}

.card {
  background-color: #263238;
  color:snow;
  border:1px solid transparent;
  border-radius:3px;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.25));
  padding-left:1rem;
  padding-right:1rem;
  display:flex;
  flex-direction: column;
}

/* Border */

.border {
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-bottom:5rem;
}

.border svg {
  height:4rem;
  width:auto;
  background-color:#263238;
  background-image: radial-gradient(
    snow 45%,
    #263238 45%
  );
  border-radius:100%;
  fill:#2196F3;
  padding:0.5rem;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.25))
}

/* Nav */

nav {
  background-color: #222;
  color:snow;
  text-align: center;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1;
}

nav .container {
  background-color: #222;
  padding:1rem;
}

nav a {
  color:snow;
  text-decoration:none;
  font-weight: bold;
}

nav a:hover {
  color:dodgerblue;
  text-decoration:none;
}

nav .row {
  flex-wrap:wrap;
}

.title a {
  align-self: flex-start;
}

.title h1 {
  font-size:1.25rem;
}

.title {
  flex: 0 0 75%;
}

.toggle {
  flex: 0 0 25%;
}

.title,
.toggle,
.links {
  justify-content: center;
  align-items: center;
}

.toggle button {
  background-color: transparent;
  border:none;
  display:flex;
  flex-direction:column;
  align-self:flex-end;
  padding:0.5rem
}

.toggle button:hover {
  cursor: pointer;
}

.top,
.middle,
.bottom {
  height:2px;
  width:25px;
  border-radius:3px;
  margin:3px;
  background-color:snow;
}

.toggle.active .middle {
  opacity:0;
}

.toggle.active .top {
  transform: translateY(8px) rotate(45deg)
}

.toggle.active .bottom {
  transform: translateY(-8px) rotate(-45deg)
}

.links a {
  padding:0.5rem;
  margin:0.5rem;
}

.links {
  margin:0;
  padding:0;
  padding-bottom:1rem;
  background-color: #263238;
  width:100%;
  list-style:none;
  padding-top:5rem;
  position:fixed;
  top:-500px;
  left:0;
  right:0;
  z-index:-10;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.25));
}

.links li {
  margin:0.5rem;
  padding:0.5rem;
}

.links.active {
  top:0;
}

@media (min-width:768px) {
  .title {
    flex:1;
    align-items: flex-start;
    padding:0.5rem;
    margin:0.5rem;
  }
  .links {
    padding-top:0;
    padding-bottom: 0;
    display:flex;
    width:auto;
    flex-direction:row;
    justify-content: flex-end;
    top:0;
    position:relative;
    z-index:10;
    background-color: transparent;
  }
  .links a {
    padding:0.25rem;
    margin:0.25rem;
  }
  .toggle {
    display: none;
  }
}


/* Hero */

.hero {
  margin-top:12rem; /* adjusted for the fixed nav */
  background-color: #2196F3;
  background-image:
  linear-gradient(
    #1565c0 40%,
    #2196F3 40%
  );
}

.hero .row {
  flex-direction:column;
}

.hr-spaced {
  margin-top:3rem;
  margin-bottom:3rem;
}

.hero h1 {
  font-size:3rem;
  text-align: center;
  line-height: 3rem;
}

.hero h1 span {
  font-size:2rem;
  line-height: 2rem;
}

.hero-text {
  padding:1rem;
  justify-content: center;
}

.button-wrap {
  display: flex;
  flex-direction:column;
  justify-content: center;
  padding:1rem;
}

.hero a {
  flex:1;
  display:flex;
  text-decoration: none;
}

.hero button {
  flex:1;
  background-color:#2196F3;
  color:snow;
  font-weight: bold;
  font-size: 1rem;
  padding:0.5rem;
  margin:0.5rem;
  border:1px solid transparent;
  border-radius: 3px;
}

.hero button:hover {
  cursor: pointer;
  background-color: #1976D2;
}

.book {
  margin-top:-50px;
  margin-left:1rem;
  margin-right:1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.book img {
  max-width:100%;
  max-height:500px;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.25));
}

@media (min-width:768px) {
  .hero .row {
    flex-direction:row;
  }
  #mobile-hr {
    display:none;
  }
  .hr-spaced {
    margin-top:1rem;
    margin-bottom:1rem;
  }
  .hero h1 {
    font-size:4rem;
    line-height:3.5rem;
  }
  .book {
    margin-bottom:-50px;
  }
  .button-wrap {
    flex-direction:row;
  }
}

/* Introduction */

#introduction {
  background-color: #2196F3;
}

.introduction {
  background-color: #2196F3;
}

.introduction .card {
  padding:1rem;
  padding-bottom: 2rem;
}

.introduction h2 {
  text-transform: none;
  padding-top:2rem;
  padding-bottom:1rem;
  text-align:center;
}

/* Contents */

#contents {
  background-color:#2196F3;
}

.contents {
  background-image:linear-gradient(
    #2196F3 50%,
    #1565c0 50%
  );
}

.contents h2 {
  text-transform: none;
  padding-top:2rem;
  padding-bottom:1rem;
  text-align:center;
}

.intro {
  padding:1rem;
}

.contents .card {
  padding:1rem;
  padding-bottom:2rem;
}

.contents ul {
  list-style:none;
}

.contents li {
  padding:0.5rem;
}

.checklist-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}

.checklist-one,
.checklist-two {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.item {
  display:flex;
  justify-content: center;
  align-items: center;
  margin:1rem;
}

.item svg {
  background-image: radial-gradient(
    snow 50%,
    transparent 50%
  );
  height:2rem;
  width:2rem;
  overflow: visible;
  margin:0.25rem
}

.item p {
  font-style:italic
}

@media (min-width:768px) {
  .checklist-wrap {
    flex-direction: row;
  }
}

/* Reviews */

.reviews {
  background-image:linear-gradient(
    #1565c0 50%,
    #2196F3 50%
  );
}
/*
.slide-container {
  height:50vh;
  width:80%;
  display:flex;
  list-style: none;
  margin:0 auto;
  padding:0;
  overflow:scroll;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.slide {
  width:100%;
  height:100%;
  flex: 1 0 100%;
}
*/

.reviews h2 {
  color:snow;
  text-transform: none;
  text-align: center;
  padding:1rem;
}

.splide {
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.25));
  margin:0 auto;
  background-color:#263238;
  background: 
    url("../img/quote-open-sm.svg") top left no-repeat,
    url("../img/quote-close-sm.svg") bottom right no-repeat,
    #263238;
  background-repeat: no-repeat;
}

.splide__slide {
  color:snow;
  /*background-color:#263238;*/
  border-radius:3px;
  display:flex;
  flex-direction: column;
  font-style: italic;
  padding:1rem;
  justify-content: center;
  align-items: center;
  min-height:50vh;
}

.slide-wrap {
  display:flex;
  flex-direction:column;
}

.left {
  align-self: flex-start;
}

.right {
  align-self: flex-end;
  text-align: right;
}

.splide__pagination__page {
  margin:5px;
}

@media (min-width:768px) {
  .splide {
    background: 
      url("../img/quote-open.svg") top left no-repeat,
      url("../img/quote-close.svg") bottom right no-repeat,
      #263238;
    background-repeat: no-repeat;
  }
}

/* Preview */

#preview {
  background-color: #2196F3;
}

.preview {
  background-image: linear-gradient(
    #2196f3 30%,
    #1565c0 30%,
    #1565c0 70%,
    #2196f3 70%
  );
}

.preview .card {
  padding:2rem;
}

.preview h2 {
  color:snow;
  font-size:2rem;
  text-transform: none;
  text-align: center;
  padding:1rem;
}

.open_book {
  display:flex;
  flex-direction: column;
}

.open_book img {
  max-width:100%;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.25));
}

.signup {
  justify-content: center;
  align-items: center;
}

.preview_signup {
  max-width:100%;
  display: flex;
  flex-direction: column;
  padding:1rem;
}

.preview_signup button {
  width:80%;
  margin:0 auto;
}

.name-wrap {
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

#first_name,
#last_name,
#email {
  line-height:1.5rem;
  margin-bottom:0.5rem;
  padding:0.5rem;
  font-style: italic;
  border-radius:3px;
  border:none;
  flex:1;
  margin:0.5rem;
}

.check {
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-top:1rem;
  padding-bottom: 1rem;
}

.label-body{
  color:#607D8B;
  padding:0.25rem;
}

.preview_signup p {
  color:#607D8B;
  padding:1rem;
  text-align:center;
}

.preview_signup button {
  background-color:#2196F3;
  color:snow;
  font-weight: bold;
  font-size: 1rem;
  padding:0.5rem;
  border:1px solid transparent;
  border-radius: 3px;
}

.preview_signup button:hover {
  cursor: pointer;
  background-color: #1976D2;
}

@media (min-width:768px) {
  .preview h2 {
    font-size:3rem;
  }
  .preview .card {
    flex-direction:row;
  }
  .name-wrap {
    flex-direction: row;
  }
}


/* Purchase */

#purchase {
  background-color:#2196F3;
  padding-bottom:7rem;
}

.purchase {
  background-image:linear-gradient(
    #2196F3 40%,
    #1565c0 40%
  );
}

.purchase .row {
  flex-direction:column;
}

.purchase h1 {
  text-align:center;
  font-size:2.5rem;
}

.purchase a {
  flex:0 0 50%;
  display:flex;
  text-decoration: none;
}

.purchase button {
  flex:1;
  background-color:#2196F3;
  color:snow;
  font-weight: bold;
  font-size: 1rem;
  padding:0.5rem;
  margin:0.5rem;
  border:1px solid transparent;
  border-radius: 3px;
}

.purchase button:hover {
  cursor: pointer;
  background-color: #1976D2;
}

@media (min-width:768px) {
  .purchase .row {
    flex-direction:row;
  }
  .purchase h1 {
    font-size:3.5rem;
  }
}


/* Author */

.author {
  background-image:linear-gradient(
    #1565c0 40%,
    #2196F3 40%
  );
}

.author .card {
  padding:0;
  margin:0 auto
}

.author .card-text {
  padding:1rem;
  font-style: italic;
  align-items: center;
  justify-content: center;
  flex-direction:column;
}

.author img {
  height:5rem;
  width:5rem;
  background-color:#2196F3;
  border-radius:100%;
  padding:1rem;
  margin:1rem;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.25));
}

.social-icons {
  background-color: #222;
  padding:1rem;
  justify-content: center;
  align-items: center;
}

.social-media svg {
  height:2rem;
  width:2rem;
  fill:snow;
  margin:0.5rem;
  background-color: #37474F;;
  padding: 0.75rem;
  border-radius: 100%;
}

.social-media svg:hover {
  background-color: #2196F3;
}

#bottom {
  background-color:#2196F3;
}

@media (min-width:768px) {
  .author .card {
    width:80%;
  }
  .author .card-text {
    flex-direction:column;
  }
  .social-icons {
    justify-content: flex-end;
  }
}


/* Footer */

footer {
  background-color: #222;
  color:#607D8B;
  text-align:center;
  padding:2rem;
  padding-top:4rem;
  font-style: italic;
}

.footer-text {
  text-align:left;
  flex-direction:column;
}

.footer-text .column {
  border-left:2px solid #607D8B;
  padding-top:1rem;
  padding-bottom:1rem;
  margin-left:1rem;
}

.footer-title {
  text-transform: uppercase;
  font-size: smaller;
  letter-spacing: 3px;
}

.footer-text hr {
  margin:0.5rem;
  margin-left:0;
  align-self:flex-start
}

footer p {
  padding:0.5rem;
}

footer a,
footer a:hover {
  color:silver;
  text-decoration: none;
}

footer form {
  display: flex;
  flex-direction: column;
  padding:1rem;
}

#email_footer {
  line-height:1.5rem;
  margin-bottom:0.5rem;
  padding:0.5rem;
  font-style: italic;
}

footer button {
  background-color:#2196F3;
  color:snow;
  font-weight: bold;
  font-size: 1rem;
  padding:0.5rem;
  margin-top:0.5rem;
  margin-bottom:0.5rem;
  border:1px solid transparent;
  border-radius: 3px;
}

footer button:hover {
  cursor: pointer;
  background-color: #1976D2;
}

.social-links {
  margin-top:2rem;
  margin-bottom:1rem;
  padding:1rem;
  display: flex;
  flex-direction:row;
  align-items:center;
  justify-content: center;
}

.social-links svg {
  height:2rem;
  width:2rem;
  fill:snow;
  margin:0.5rem;
  background-color: #37474F;;
  padding: 0.75rem;
  border-radius: 100%;
}

.social-links svg:hover {
  background-color: #2196F3;
  fill:snow;
}

@media (min-width:768px) {
  .footer-text {
    flex-direction:row;
  }
}

/* Privacy Policy etc */

.policies {
  padding-top:10rem;
}

.policies .card {
  padding:5rem;
}

.policies h1 {
  text-transform: none;
}

.policies h3 {
  font-style: italic;
  align-self: auto;
  text-transform: none;
  font-size:2rem;
  padding:1rem;
  margin-top:1rem;
}

.policies a {
  color:snow;
  font-weight: bold;
  font-style: italic;
  text-decoration: none;
}

.policies a:hover {
  color: dodgerblue
}

.policies p,
.policies ul,
.policies li {
  padding:0.5rem;
  padding-left:1rem;
  padding-right:1rem;
}

.policies ul {
  margin-left:2rem;
}