@import "compass/css3";

.logo-container {
  background-color: white;
}
h1 {
  font-family: "Days One", sans-serif;
  font-size: 3.75em;
}

h2 {
  color: white;
  font-family: "Days One", sans-serif;
  font-size: 2em;
}

.banner {
  background-image: url("../assets/banner.jpg");
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/*Mobile-------------------------------------*/
@media only screen and (max-width: 570px) {
  .hanging-spider img {
    display: none;
  }
  .about {
    background-color: white;
    text-align: center;
    padding: 2em 3em;
    font-size: 1.2em;
  }

  .title {
    font-family: "Lobster", cursive;
    font-size: 1.75em;
  }

  .advice {
    font-size: 1.25em;
    color: white;
    text-align: center;
    padding: 2.5em;
    background-color: var(--main-blue);
  }

  #show {
    opacity: 0;
    transition: height 4350ms ease-in-out, opacity 1750ms ease-in-out;
  }

  .btn {
    border: 2px solid black;
    background: var(--main-gold);

    font-size: 1em;
  }
}

/*Tablet-------------------------------------*/
@media only screen and (min-width: 571px) and (max-width: 1024px) {
  .hanging-spider img {
    display: none;
  }
  .about {
    background-color: white;
    text-align: center;
    padding: 3em 5em;
    font-size: 1.5em;
  }

  .title {
    font-family: "Lobster", cursive;
    font-size: 2.25em;
  }

  .advice {
    font-size: 1.25em;
    color: white;
    text-align: center;
    padding: 3em;
    background-color: var(--main-blue);
  }

  #show {
    opacity: 0;
    transition: height 4350ms ease-in-out, opacity 1750ms ease-in-out;
  }

  .btn {
    border: 2px solid black;
    background: var(--main-gold);

    font-size: 0.7em;
  }
}
/*Desktop-------------------------------------*/
@media only screen and (min-width: 1025px) {
  .hanging-spider img {
    width: 80%;
  }
  .about {
    background-color: white;
    text-align: center;
    padding: 4em 6em;
    font-size: 1.5em;
  }

  .title {
    font-family: "Lobster", cursive;
    font-size: 2.5em;
  }

  .advice {
    font-size: 1.5em;
    color: white;
    text-align: center;
    padding: 3em;
    background-color: var(--main-blue);
  }

  #show {
    opacity: 0;
    transition: height 4350ms ease-in-out, opacity 1750ms ease-in-out;
  }

  .btn {
    border: 2px solid black;
    background: var(--main-gold);

    font-size: 0.7em;
  }
}

.services {
  padding-bottom: 8em;
  padding-top: 2em;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 1.25em;
}

.text {
  padding: 0.5em;
}
.text-wrapper {
  padding: 1.5em 0 1.5em 0;
}

.text a {
  color: black;
  border-radius: 1.5em;
  padding: 1em;
}

.text a:hover {
  text-decoration: none;
}

/* style menu link on current page - underline remains*/
.current a::before,
a:focus::before {
  transform: scale(1, 1) !important;
}

.hanging-spider {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1;
}