/* make sure the document is 100% tall. Takes up all visible space*/
html,
body {
  height: 100%;
}

/*----making the body a flex box so we can strecht it -----------*/
body {
  display: flex;
  flex-direction: column;
  font-family: var(--ts-body-font);
  font-size: var(--ts-font-size);
  font-weight: var(--ts-font-weight);
  color: var(--ts-dark-color);
  background: #d9a7c7; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #fffcdc,
    #d9a7c7
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #fffcdc,
    #d9a7c7
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/*----- flex: grow shrink auto----.This makes our flex box grow--*/
.content {
  flex: 1 0 auto;
  margin-top: 4.7rem;
}

/*-----shrink the footer as small as possible. The reason is because the flex box tries to make ever
everything even. But what we are trying to achieve is get one box as big as possible while the other one as small as possible ------*/
footer {
  flex-shrink: 0;
}

/*----------colors for the templates------- */
:root {
  /* colors for the template */
  --ts-dark-color: rgb(0, 0, 0);
  --ts-light-color: rgb(92, 184, 255);
  --ts-primary-color: rgb(204, 10, 234);
  --ts-highlight-color: rgb(215, 133, 230);
  --ts-secondary-color: rgb(240, 181, 235);
  --ts-background-color: rgba(188, 116, 237, 0.8);
  --ts-nav-toggler-glow: rgba(250, 225, 120, 0.5);

  /*fonts for the template */
  --ts-title-font: "Bebas Neue", Impact, Haettenschweiler, sans-serif;
  --ts-subtitle-font: "Fira Sans", sans-serif;
  --ts-body-font: "Roboto", sans-serif;
  --ts-font-size: 1.2rem;
  --ts-font-weight: 400;
}

/*--------------navbar override-----------------*/
#mainNav {
  background: #03001e; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #fdeff9,
    #ec38bc,
    #7303c0,
    #03001e
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #fdeff9,
    #ec38bc,
    #7303c0,
    #03001e
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  /* background:transparent; */
}

#mainNav button {
  border-color: var(--ts-highlight-color);
}

.navbar-toggler {
  color: var(--ts-nav-toggler-glow) !important;
}

.navbar-toggler-icon-ts {
  color: var(--ts-highlight-color);
}

/*---------main header styles-------------*/
.mainHeader {
  /* background-image: url(/img/JillPrestonBanner_576.jpg); */
  height: 200px;
  background-repeat: no-repeat;
  background-position: left top;
  background-color: var(--ts-light-color);
}

.mainHeader-wrapper {
  padding-right: 1rem;
  padding-left: 1rem;
}

.mainHeader-cover {
  background-image: url(/img/mountains.jpg);
  min-height: 200px;
  max-height: 350px;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}

/*----------mainHeader-content styles--------*/

/* making sure than content is a child of cover */
.mainHeader-cover > .mainHeader-content {
  backdrop-filter: blur(0px);
}

@supports not (backdrop-filter: blur(2px)) {
  .mainHeader-cover > .mainHeader-content {
    background-color: rgba(0, 37, 46, 0.6);
  }
}

.mainTitle {
  font-family: var(--ts-title-font);
  font-size: 2.5rem;
  color: var(--ts-dark-color);
  line-height: 2rem; /*lineHieght smaller than font-size stacks or brings them together */
  text-transform: uppercase;
}

.subTitle {
  font-family: var(--ts-subtitle-font);
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1rem;
  letter-spacing: 0.1rem;
  color: var(--ts-secondary-color);
  text-transform: uppercase;
}

.mainLogo {
  /* the img will always be same as the height of the maintitle. That's our goal */
  height: 0.6em; /*em means size will be related to the parent while rem means the size is relative to the whole document*/
}

/* --------Button override starts--------- */
.btn-outline-primary {
  color: var(--ts-dark-color);
  border-color: var(--ts-secondary-color) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus {
  border-color: var(--ts-highlight-color);
  background-color: var(--ts-secondary-color);
}

.btn-primary {
  color: var(--ts-secondary-color);
  background-color: var(--ts-dark-color) !important;
  border-color: var(--ts-secondary-color);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:visited {
  filter: brightness(1.1) !important;
  border-color: var(--ts-highlight-color);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--ts-title-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: var(--ts-dark-color);
}

.profilePic {
  border-radius: 20px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
}

.iconDev {
  font-size: 4em;
}

.section-cta {
  background: var(--ts-light-color);
}

.formColor {
  background: #ef32d9; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #89fffd,
    #ef32d9
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #89fffd,
    #ef32d9
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.footer-cta {
  background: #03001e; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #fdeff9,
    #ec38bc,
    #7303c0,
    #03001e
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #fdeff9,
    #ec38bc,
    #7303c0,
    #03001e
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 15px;
  width: 75%;
  padding-top: 1rem;
}

.footer-main {
  background: #ff00cc; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #333399,
    #ff00cc
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #333399,
    #ff00cc
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.social-icons {
  font-size: 2rem;
}

.social-icons:hover {
  color: var();
}

.section-page {
  padding: 2rem;
}

.section-page:nth-child(even) {
  background-color: var(--ts-secondary-color);
}

.section-page:nth-child(odd) {
  background-color: var(--ts-primary-color);
}

/*------------Media Queries----------------*/
/* media queires changs the css depending upon what size we are using */
/* X-Small devices (portrait phones, less than 576px)*/
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 375px) {
  .mainHeader {
    background-image: url(/img/JillPrestonBanner_375.jpg);
    height: 150px;
  }
}

@media (min-width: 576px) {
  .mainHeader {
    background-image: url(/img/JillPrestonBanner_767.jpg);
    height: 200px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .mainHeader {
    background-image: url(/img/JillPrestonBanner_992.jpg);
    height: 300px; /*look at the properties of this image in windows. That's where we are getting this height */
  }

  .mainTitle {
    font-family: var(--ts-title-font);
    font-size: 4.5rem;
    color: var(--ts-dark-color);
    line-height: 3.5rem; /*lineHieght smaller than font-size stacks or brings them together */
    text-transform: uppercase;
  }

  .subTitle {
    font-family: var(--ts-subtitle-font);
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1rem;
    letter-spacing: 0.1rem;
    color: var(--ts-dark-color);
    text-transform: uppercase;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .mainHeader {
    background-image: url(/img/JillPrestonBanner_1200.jpg);
    height: 400px; /*look at the properties of this image in windows. That's where we are getting this height */
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .mainHeader {
    background-image: url(/img/JillPrestonBanner_2560.png);
    height: 500px; /*look at the properties of this image in windows. That's where we are getting this height */
  }

  .mainTitle {
    font-family: var(--ts-title-font);
    font-size: 6rem;
    color: var(--ts-dark-color);
    line-height: 4.5rem; /*lineHieght smaller than font-size stacks or brings them together */
    text-transform: uppercase;
  }

  .subTitle {
    font-family: var(--ts-subtitle-font);
    font-weight: 300;
    font-size: 1.7rem;
    line-height: 1rem;
    letter-spacing: 0.1rem;
    color: var(--ts-dark-color);
    text-transform: uppercase;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}