* {
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  text-decoration: none;
  box-sizing: border-box; }

ul {
  margin: 0;
  padding: 0; }

br {
  content: "A" !important;
  display: block !important;
  margin-bottom: 1.5em !important; }

.main, .main__alt,
.section__alt,
.section,
.main__alt,
.section__alt {
  background-color: #e8eddf;
  min-height: 90vh; }
  .main__alt,
  .section__alt {
    background-color: #cfdbd5; }
  .main .title, .main__alt .title, .section__alt .title,
  .section .title,
  .main__alt .title,
  .section__alt .title {
    font-family: "Bungee", cursive;
    text-align: center;
    color: #333533; }
  .main .article--side, .main__alt .article--side, .section__alt .article--side,
  .section .article--side,
  .main__alt .article--side,
  .section__alt .article--side {
    display: flex;
    justify-content: space-around;
    align-self: center;
    justify-self: center; }
  .main .article__p, .main__alt .article__p, .section__alt .article__p,
  .section .article__p,
  .main__alt .article__p,
  .section__alt .article__p {
    width: 80%;
    justify-self: center;
    align-self: center;
    text-align: center;
    color: #242423;
    font-size: 1rem;
    line-height: 1.3; }
  .main .article__img, .main__alt .article__img, .section__alt .article__img,
  .section .article__img,
  .main__alt .article__img,
  .section__alt .article__img {
    height: 450px;
    width: 450px;
    border-radius: 1rem;
    filter: drop-shadow(1px 1px 2px #242423); }
  @media (max-device-width: 991px) {
    .main .article--side, .main__alt .article--side, .section__alt .article--side,
    .section .article--side,
    .main__alt .article--side,
    .section__alt .article--side {
      flex-direction: column;
      justify-content: center; }
    .main .article__p, .main__alt .article__p, .section__alt .article__p,
    .section .article__p,
    .main__alt .article__p,
    .section__alt .article__p {
      width: 100%;
      align-self: center;
      text-align: center;
      color: #242423;
      font-size: 1rem;
      line-height: 1.2; }
    .main .article__img, .main__alt .article__img, .section__alt .article__img,
    .section .article__img,
    .main__alt .article__img,
    .section__alt .article__img {
      height: 350px;
      width: 320px; } }
  @media (max-device-width: 479px) {
    .main .article__p, .main__alt .article__p, .section__alt .article__p,
    .section .article__p,
    .main__alt .article__p,
    .section__alt .article__p {
      width: 100%;
      align-self: center;
      text-align: center;
      color: #242423;
      font-size: 1rem;
      line-height: 1.2; }
    .main .article__img, .main__alt .article__img, .section__alt .article__img,
    .section .article__img,
    .main__alt .article__img,
    .section__alt .article__img {
      height: 250px;
      width: 220px; } }
  .main .bg-container, .main__alt .bg-container, .section__alt .bg-container,
  .section .bg-container,
  .main__alt .bg-container,
  .section__alt .bg-container {
    background-color: #cfdbd5;
    border-radius: 0.5rem; }
    .main .bg-container__alt, .main__alt .bg-container__alt, .section__alt .bg-container__alt,
    .section .bg-container__alt,
    .main__alt .bg-container__alt,
    .section__alt .bg-container__alt {
      background-color: #e8eddf; }
  .main .text-color, .main__alt .text-color, .section__alt .text-color,
  .section .text-color,
  .main__alt .text-color,
  .section__alt .text-color {
    color: #242423; }
  .main .card, .main__alt .card, .section__alt .card,
  .section .card,
  .main__alt .card,
  .section__alt .card {
    border: 2px solid #333533;
    height: 40rem;
    width: 22rem;
    justify-self: center;
    border-radius: 0.5rem;
    filter: drop-shadow(1px 1px 2px #242423); }
    .main .card-img-top, .main__alt .card-img-top, .section__alt .card-img-top,
    .section .card-img-top,
    .main__alt .card-img-top,
    .section__alt .card-img-top {
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
      object-fit: fill; }
    .main .card-body, .main__alt .card-body, .section__alt .card-body,
    .section .card-body,
    .main__alt .card-body,
    .section__alt .card-body {
      background-color: #cfdbd5 !important;
      border-bottom-left-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem; }
      .main .card-body .btn-dark, .main__alt .card-body .btn-dark, .section__alt .card-body .btn-dark,
      .section .card-body .btn-dark,
      .main__alt .card-body .btn-dark,
      .section__alt .card-body .btn-dark {
        background-color: #f5cb5c !important;
        color: #242423 !important;
        border-radius: 1rem;
        text-align: center;
        opacity: 1;
        transition: ease-in-out 200ms;
        border: 1px solid #f5cb5c;
        border-color: #333533; }
        .main .card-body .btn-dark:hover, .main__alt .card-body .btn-dark:hover, .section__alt .card-body .btn-dark:hover,
        .section .card-body .btn-dark:hover,
        .main__alt .card-body .btn-dark:hover,
        .section__alt .card-body .btn-dark:hover {
          opacity: 0.7;
          transition: ease-in-out 200ms; }
    .main .card p, .main__alt .card p, .section__alt .card p,
    .section .card p,
    .main__alt .card p,
    .section__alt .card p {
      padding-bottom: 0.1rem !important;
      margin-bottom: 0rem !important; }
  .main .container__btn .btn, .main__alt .container__btn .btn, .section__alt .container__btn .btn,
  .section .container__btn .btn,
  .main__alt .container__btn .btn,
  .section__alt .container__btn .btn {
    margin: 0 0.5rem 1rem 0.5rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    text-align: center;
    border-radius: 1rem;
    color: #242423 !important;
    background-color: #f5cb5c;
    border: 1px solid #333533;
    transition: ease-in-out 200ms;
    opacity: 1; }
    .main .container__btn .btn-danger:hover, .main__alt .container__btn .btn-danger:hover, .section__alt .container__btn .btn-danger:hover,
    .section .container__btn .btn-danger:hover,
    .main__alt .container__btn .btn-danger:hover,
    .section__alt .container__btn .btn-danger:hover {
      transition: ease-in-out 200ms;
      background-color: #e42d3d; }
    .main .container__btn .btn-success:hover, .main__alt .container__btn .btn-success:hover, .section__alt .container__btn .btn-success:hover,
    .section .container__btn .btn-success:hover,
    .main__alt .container__btn .btn-success:hover,
    .section__alt .container__btn .btn-success:hover {
      transition: ease-in-out 200ms;
      background-color: #0eaf77; }
  .main .container__btn .btn:hover, .main__alt .container__btn .btn:hover, .section__alt .container__btn .btn:hover,
  .section .container__btn .btn:hover,
  .main__alt .container__btn .btn:hover,
  .section__alt .container__btn .btn:hover {
    transition: ease-in-out 200ms;
    opacity: 0.9; }
  @media (max-device-width: 991px) {
    .main .container__btn, .main__alt .container__btn, .section__alt .container__btn,
    .section .container__btn,
    .main__alt .container__btn,
    .section__alt .container__btn {
      flex-direction: column; } }
  .main .comment, .main__alt .comment, .section__alt .comment,
  .section .comment,
  .main__alt .comment,
  .section__alt .comment {
    height: 250px;
    resize: none; }

.header .bg-dark {
  background-color: #333533 !important;
  min-height: 12vh; }

.header .logo {
  width: 3rem;
  height: 3rem; }
  @media (max-device-width: 479px) {
    .header .logo {
      width: 2.5rem;
      height: 2.5rem; } }

.header .svg {
  filter: invert(87%) sepia(67%) saturate(6608%) hue-rotate(314deg) brightness(106%) contrast(92%); }

.header .navbar-collapse {
  flex-grow: 0; }

.header .btn-primary {
  background-color: #f5cb5c !important;
  color: #242423 !important;
  border-radius: 1rem;
  text-align: center;
  opacity: 1;
  transition: ease-in-out 200ms;
  border-color: transparent !important; }
  .header .btn-primary:hover {
    opacity: 0.7;
    transition: ease-in-out 200ms; }

.header button {
  border: 0px; }

.header .cart {
  width: 2rem;
  height: 1rem; }
  @media (max-device-width: 991px) {
    .header .cart {
      width: 2.4rem;
      height: 1.2rem; } }

.header .active {
  background-color: #242423 !important;
  color: #f5cb5c !important; }

.footer {
  background-color: #333533 !important; }
  .footer .menu {
    justify-self: center; }
    .footer .menu .links {
      display: flex;
      margin: 0.25rem;
      justify-content: center; }
      .footer .menu .links__a {
        margin: 0.25rem;
        padding: 0.5rem 1.25rem 0.5rem 1.25rem;
        text-align: center;
        border-radius: 1rem;
        color: #242423;
        background-color: #f5cb5c;
        border: 1px solid #333533;
        transition: ease-in-out 200ms;
        opacity: 1; }
        .footer .menu .links__a:hover {
          transition: ease-in-out 200ms;
          opacity: 0.7;
          color: #242423; }
  .footer .social__icons {
    height: 4rem;
    transition: ease-in-out 200ms;
    opacity: 1; }
    .footer .social__icons:hover {
      transition: ease-in-out 200ms;
      opacity: 0.7; }
  .footer .logo {
    width: 4rem;
    height: 4rem; }
  .footer .svg {
    filter: invert(87%) sepia(67%) saturate(6608%) hue-rotate(314deg) brightness(106%) contrast(92%); }
  @media (max-device-width: 479px) {
    .footer {
      display: flex;
      flex-direction: column;
      justify-content: center; }
      .footer .logo {
        display: none; }
      .footer .social {
        display: flex;
        flex-direction: row;
        align-self: center; }
        .footer .social a {
          margin: 1rem; }
        .footer .social__icons {
          height: 3rem; } }

.modal-dialog {
  max-width: 991px !important; }

.modal-content {
  background-color: #e8eddf; }
  .modal-content .table {
    border-color: #e8eddf; }
  .modal-content .decrease {
    background-color: #333533;
    border-color: #333533;
    color: lightgray; }
  .modal-content .increase {
    background-color: #f5cb5c;
    border-color: #f5cb5c;
    color: black; }
  .modal-content .clearItem {
    background-color: #333533;
    border-color: #333533;
    color: lightgray; }
  .modal-content .modal-footer {
    border-color: #e8eddf; }
    .modal-content .modal-footer .clear {
      margin: 0 0.5rem 1rem 0.5rem;
      padding: 0.5rem 1rem 0.5rem 1rem;
      text-align: center;
      border-radius: 1rem;
      color: #242423 !important;
      background-color: #f5cb5c;
      border: 1px solid #333533;
      transition: ease-in-out 200ms;
      opacity: 1;
      background-color: #f5cb5c;
      border-color: #f5cb5c;
      color: black; }
      .modal-content .modal-footer .clear:hover {
        transition: ease-in-out 200ms;
        background-color: #e42d3d; }
    .modal-content .modal-footer .continue {
      margin: 0 0.5rem 1rem 0.5rem;
      padding: 0.5rem 1rem 0.5rem 1rem;
      text-align: center;
      border-radius: 1rem;
      color: #242423 !important;
      background-color: #f5cb5c;
      border: 1px solid #333533;
      transition: ease-in-out 200ms;
      opacity: 1;
      background-color: #f5cb5c;
      border-color: #f5cb5c;
      color: black; }
      .modal-content .modal-footer .continue:hover {
        transition: ease-in-out 200ms;
        background-color: #0eaf77; }
    @media (max-device-width: 991px) {
      .modal-content .modal-footer {
        display: flex !important;
        flex-direction: column !important; } }

.table {
  border-color: #e8eddf;
  white-space: nowrap; }

.decrease {
  background-color: #333533;
  border-color: #333533;
  color: lightgray;
  transition: ease-in-out 200ms; }
  .decrease:hover {
    transition: ease-in-out 200ms; }

.increase {
  background-color: #f5cb5c;
  border-color: #f5cb5c;
  color: black;
  opacity: 1;
  transition: ease-in-out 200ms; }
  .increase:hover {
    opacity: 0.7;
    background-color: #f5cb5c;
    border-color: #f5cb5c;
    transition: ease-in-out 200ms; }
  .increase:focus {
    opacity: 0.7;
    background-color: #f5cb5c;
    border-color: #f5cb5c;
    transition: ease-in-out 200ms; }

.clearItem {
  background-color: #333533;
  border-color: #333533;
  color: lightgray; }

input {
  background-color: #e8eddf;
  border: hidden; }