* {
  font-family : var(--bodyFont);

}



p {
  font-size : 24px!important;
}

h3 {
  font-size : 30px!important;
}

.card {
  height : 80vh;
  width : 25vw;
  margin : 10px 0;
}

.card > img {
  height : 150px;
  width : auto;
}

nav {
  position : relative;
  top : 0;
  left : 0;
  width : 100%;
  height : auto;
}

nav > img {
  height : 150px!important;
  width : auto!important;
}

nav > span {
  width : 50%;
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : flex-end;
}

nav > span > * {
  margin : 0 10px;
}


nav > span > p {
  font-weight : bold!important;
  font-size : 24px;
}

#sign-up-button {
  padding : 10px 20px;
  font-size : 24px;
  color : white;
  background-color : var(--blue);
  border-radius : 50px;
  border : 0;
  font-weight : bold;
}

header {
  height : 80vh;
  width : 100%;
  margin : 0;
  padding : 0;
  display : flex;
  flex-direction : row;
  align-items: center;
  justify-content : center;
}

header > div {
  width : 40%;
  height : 90%;
  margin : 0 20px;
  display : flex;
  flex-direction : column;
  align-items: center;
  justify-content : center;
}

#header-text-container > img {
  width : 50%;
  height : auto;
}

#header-text-container > p {
  font-family : var(--mainFont);
  font-size : 30px;
  color : var(--blue);
  font-weight : bold;
  height : 50px;
}

#header-image-container > img {
  height : 100%;
  margin : 0;
  width : auto;
}

#header-slogan {
      white-space: nowrap;
      overflow: hidden;
      border-right: 3px solid var(--blue);
      display: inline-block;
      animation: blink-caret 0.75s step-end infinite;
    }

    @keyframes blink-caret {
      from, to { border-color: transparent; }
      50% { border-color: black; }
    }

    .full-img {
      height : auto;
      width : 100%;
      display : flex;
      align-items : center;
      justify-content : center;
      margin : 0!important;
    }

    .full-img > * {
      width : 100%;
      height : auto;
    }

    .full-img > a > * {
      width : 100%;
      height : auto;
    }

    .full-form > a, .full-form > a > * {
      text-align : center;
      font-weight : bold;
    }

    .full-form > a > *:hover {
      text-decoration : underline;
    }


    @media screen and (max-width: 980px) {

      * {
        font-family : var(--bodyFont);

      }

      p {
        font-size : 20px!important;
      }

      h3 {
        font-size : 26px!important;
      }

      .card {
        height : 60vh!important;
        width : 25vw;
        margin : 10px 0;
      }

      .card > img {
        height : 150px;
        width : auto;
      }

      nav {
        position : relative;
        top : 0;
        left : 0;
        width : 100%;
        height : auto;
        flex-direction : column;
      }

      nav > img {
        height : 80vw!important;
        width : auto!important;
      }

      nav > span {
        width : 90%;
        display : flex;
        flex-direction : column;
        align-items : center;
        justify-content : flex-end;
      }

      nav > span > * {
        margin : 10px 0;
      }


      nav > span > p {
        font-weight : bold!important;
        font-size : 24px;
      }

      #sign-up-button {
        padding : 10px 20px;
        font-size : 24px;
        color : white;
        background-color : var(--blue);
        border-radius : 50px;
        border : 0;
        font-weight : bold;
      }

      header {
        height : 50vh;
        width : 100%;
        margin : 0;
        padding : 0;
        display : flex;
        flex-direction : row;
        align-items: center;
        justify-content : center;
      }

      header > div {
        width : 90%!important;
        height : 90%;
        margin : 0 20px;
        display : flex;
        flex-direction : column;
        align-items: center;
        justify-content : center;
      }

      #header-text-container {
        width : 90%;
        margin-top : 50px;
      }

      #header-text-container > img {
        width : 70%;
        height : auto;
      }

      #header-text-container > p {
        font-family : var(--mainFont);
        font-size : 30px;
        color : var(--blue);
        font-weight : bold;
        height : 50px;
      }

      #header-image-container {
        display : none;
      }

      #header-slogan {
            white-space: nowrap;
            overflow: hidden;
            border-right: 3px solid var(--blue);
            display: inline-block;
            animation: blink-caret 0.75s step-end infinite;
          }

          @keyframes blink-caret {
            from, to { border-color: transparent; }
            50% { border-color: black; }
          }

          .full-img {
            height : auto;
            width : 100%;
            display : flex;
            align-items : center;
            justify-content : center;
            margin : 0!important;
            overflow : hidden;
          }

          .full-img > img {
            width : 320%;
            height : auto;
          }

          .full-img > a {
            height : auto;
            width : 100%;
            display : flex;
            align-items : center;
            justify-content : center;
            margin : 0!important;
            overflow : hidden;
          }

          .full-img > a > * {
            width : 320%;
            height : auto;
          }

          .full-form > a, .full-form > a > * {
            text-align : center;
            font-weight : bold;
          }

          .full-form > a > *:hover {
            text-decoration : underline;
          }

          #about-cards, #products {
            flex-direction : column;
            align-items : center;
            justify-content : center;
            width : 100%;
            height : auto;
          }

          #about-text, #about-contact {
            display : flex;
            flex-direction : column;
            align-items : space-around;
            justify-content : center;
            width : 100%;
            height : auto;
            margin : 0;
            padding : 0;
          }

          #about-text > p {
            width : 95%;
            font-family : var(--themeFont);
            color : var(--blue);
            text-align : center;
            z-index : 55;
            font-weight : normal;
          }

          #about-contact > ul > * > * {
            color : var(--blue);
            text-align : center;
          }

          #about-contact > * {
            margin : 0;
            padding : 0;
          }

          #about-contact > ul {
            margin-top : 70px;
          }



          .card {
            width : 85vw!important;
            height : 80vh;
            display : flex;
            flex-direction : column;
            align-items : center;
            justify-content : center;
            margin : 0;
          }

          .card > img {
            height : 30%;
            width : auto;
          }

          .card > p, .product-card > p  {
            font-family : var(--themeFont);
            color : var(--blue);
            text-align : center;
            z-index : 55;
          }

          h3 {
            font-family : var(--themeFont);
            color : var(--blue);
            text-align : center;
          }

          .header-text {
            display : block;
          }

          .product-card {
            width : 85vw;
            height : auto;
            margin : 0;
            padding : 25px;
          }

          .product-card > img {
            width : 100%;
            height : auto;
            transition-duration : 0.5s;
            z-index : 30;
          }

          .product-card > img:hover {
            transform : scale(1.2);
          }
    }