@import "../css/global/global_colors.css";

body {
  position: relative;

  #types-main-container {
    --HORIZONTAL-BROWN-DECORATION-HEIGHT: 14rem;
    --HORIZONTAL-BROWN-TOP: calc(53% - (VAR(--HORIZONTAL-BROWN-DECORATION-HEIGHT) / 2));
    --HORIZONTAL-BROWN-LEFT: 0;
    --HORIZONTAL-BROWN-PADDING: 0.7rem 0;

    .title-container {
      width: fit-content;
      position: relative;

      margin: 0.5rem auto;
      padding: 0.2rem 1.9rem;
      border-radius: 12px;

      background-color: VAR(--foxxycreamlight);

      .text {
        font-size: 4.2rem;
        text-align: center;
        color: VAR(--foxxycreamdark);
      }
    }

    .carrusel-fox-imgs {
      display: flex;
      gap: 0.8rem;
      flex-direction: row;

      position: absolute;
      left: VAR(--HORIZONTAL-BROWN-LEFT);
      top: VAR(--HORIZONTAL-BROWN-TOP);

      width: 100%;
      height: VAR(--HORIZONTAL-BROWN-DECORATION-HEIGHT);

      justify-content: center;

      .card {
        .card-img {
          width: auto;
          height: VAR(--HORIZONTAL-BROWN-DECORATION-HEIGHT);
          border-radius: 12px;
          padding: VAR(--HORIZONTAL-BROWN-PADDING);
        }
        .card-footer-text {
          text-align: center;
          font-size: 1.8rem;
          /* padding: 0 2rem; */
          /* max-width: calc(100% - 2rem); */
        }
      }
    }

    .center-horizontal-decoration-brown {
      width: 100vw;
      height: VAR(--HORIZONTAL-BROWN-DECORATION-HEIGHT);

      position: absolute;
      left: VAR(--HORIZONTAL-BROWN-LEFT);
      top: VAR(--HORIZONTAL-BROWN-TOP);
      padding: VAR(--HORIZONTAL-BROWN-PADDING);
      /* top: 0; */

      background-color: color-mix(in srgb, VAR(--foxxycreamydarky) 70%, transparent);
      z-index: -5;
    }
  }

  .center-vertical-decoration-brown {
    --DECORATION-WIDTH: 30rem;
    width: VAR(--DECORATION-WIDTH);
    height: 100vw;
    position: fixed;
    background-color: color-mix(in srgb, VAR(--foxxybrownmegaalternative) 80%, transparent);
    top: 0;
    left: calc(50% - (VAR(--DECORATION-WIDTH) / 2));
    z-index: -10;
  }
}