body {
    background-color: #222;
    color: #eee;
    margin: 0;
    padding: 0;
}

.container {
    background-color: #222;
    /* border: 1px solid yellow; */
    margin: 0;
    padding: 0;
    /* height: 100dvh; */
}

.square {
    background-color: #222;
    /* border: 1px solid darkcyan; */
    margin: 0;
    height: 5rem;
    width: 5rem;
    margin: 0.38rem;
    padding: 0.38rem;
}

a:link, a:visited, a:active, a:focus, a:hover {
  text-decoration: none;
  color: #222;
  padding: 1em;
}

a:active, a:focus, a:hover {
  filter: brightness(1.618);
}

/* .grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
}

.cube_wrap {
  grid-row-start: 1;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 5;
} */

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* @media (orientation: portrait) {
    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 10px;
    }
    .cube_wrap {
        grid-row-start: 1;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 4;
    }
}

@media (orientation: landscape) {
    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        gap: 10px;
    }
    .cube_wrap {
        grid-row-start: 2;
        grid-row-end: 5;
        grid-column-start: 2;
        grid-column-end: 5;
    }
} */

@keyframes sq {
      0% {transform: rotateY(0deg);}
     50% {transform: rotateY(180deg);}
    100% {transform: rotateY(360deg);}
}

@keyframes sq2 {
      0% {transform: rotateY(0deg); animation-timing-function: ease-in;}
     50% {transform: rotateY(180deg);}
    100% {transform: rotateY(360deg); animation-timing-function: ease-in-out;}
}

.cards_wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

p {
    margin: 0.1rem 0.5rem;
    padding: 0.1rem;
}