:root {
      --color-primary: #f96814b9;
      --color-secondary: #000;
      --color-tertiary: #e5e7eb;
      --font-size-small: 1.2rem;
      --font-size-medium: 1.6rem;
      --font-size-large: 2.4rem;
      --padding-small: 2rem;
      --padding-medium: 3rem;
      --padding-large: 3rem;
      --text-cl-main: #333;
      --text-cl-secondary: #f96814b9;
      --text-cl-light: #e5e7eb;
      /* bordes para depuracion */
      --border-1: 1px solid red;
      --border-2: 1px solid green;
      --border-3: 1px solid blue;
    }
    .squares-columns {
      display: flex;
      flex-direction: column;
      gap: 1.9rem;
      padding: .3rem 0 0 0;
    }
    .square {
      height: 10vw;
      width: 10vw;
      max-height: 100px;
      max-width: 100px;
      background-color: var(--color-primary);
      box-shadow: 0 0 9px var(--color-tertiary);
    }
    .container__app {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      height: 100vh;
      background-color: var(--color-secondary);
      font-family: 'Roboto', sans-serif;
      padding: 2rem;
      box-sizing: border-box;
    }
    .btn {
      padding: var(--padding-small) var(--padding-medium);
      background-color: var(--color-primary);
      color: var(--text-cl-light);
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: var(--font-size-medium);
      margin-top: 1rem;
    }
    .btn--secondary {
      background-color: #cccccc37;
    }
    .btn--secondary:hover {
      background-color: var(--color-primary);
    }
    .mirror-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: var(--padding-medium);
    }
    .mirror-actions span {
      color: var(--color-tertiary);
      font-size: var(--font-size-medium);
      margin-top: var(--padding-small);
      font-style: italic;
      font-weight: bold;
    }
    @media (max-width: 600px) {
      .square {
        height: 15vw;
        width: 15vw;
      }
      .btn {
        font-size: var(--font-size-small);
        padding: var(--padding-small);
      }
      .mirror-actions span {
        font-size: var(--font-size-small);
      }
    }