body {
    background: #2C9FD1;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: auto;
}

#side-panel{
  position: absolute;
  top: 1vh;
  left:1vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.side-icon{
height: 4em;
width:5em;
}

.side-button:hover{
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  animation-iteration-count: infinite;
  transform: translate3d(0, 0, 0);
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.side-button{
  /* background: #2c9fd1; */
  background:white;
  border: 1px solid white;
  /* border-radius: 21px;
  font-size: 85%; */
  border-radius: 50%;
  color: white;
  outline: none;
  margin-top: 1em;
  height:8em;
  width:8em;
  transition: all 0.9s ease-in;
}

.invisible {
  visibility: hidden;
  transform: translateX(-0.5em);
  opacity: 0;
}

.side-button:hover{
  cursor: pointer;
}

#central-area {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 18vw));
    /* grid-template-rows:repeat(auto-fit, minmax(100px, 33vh)); */
    /* grid-template-rows: repeat(auto-fit, minmax(100px, 25vh)); */
    row-gap: 1.5vh;
    column-gap: 1.5vw;
    /* height: calc(50vw - 5px); */
}

.card {
    margin: 0;
    position: relative;
    border-radius: 10px;
    text-align: center;
    /* AAAAAAAAAAAAAAAAAAAAAAAAAAAa */
    /* AAAAAAAAAAAAAAAAAAAAAAAAAAAa */
    /* AAAAAAAAAAAAAAAAAAAAAAAAAAAa */
    /* AAAAAAAAAAAAAAAAAAAAAAAAAAAa */
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
    
    /* AAAAAAAAAAAAAAAAAAAAAAAAAAAa */
    /* AAAAAAAAAAAAAAAAAAAAAAAAAAAa */
    /* AAAAAAAAAAAAAAAAAAAAAAAAAAAa */
    /* AAAAAAAAAAAAAAAAAAAAAAAAAAAa */
}

.removed-card{
  visibility: hidden;
}

.card-container {
    perspective: 600px;
    margin: 10px;
    max-width: 28vw;
    max-height: 28vh;
}

.card-content {
    max-height: 90%;
    max-width: 90%;
    backface-visibility: hidden;
}

.card-back {
    transform: rotateY( 180deg);
}

.uncovered {
    transform: rotateY(180deg);
}

.clicked {
    /* background:#f8d14c;  */
    transform: rotateY(180deg);
}

.logo {
    max-width: 90%;
    max-height: 90%;

}

.theme-button {
    margin: 20px;
    max-width: 28vw;
    max-height: 28vh;
    /* align-self: center; */
    margin-top: 10px;
    color: #2c9fd1;
    background-color: white;
    border: none;
    border-radius: 7%;
    margin: 1em;

}


/*ANIMATING CARD FLIPPING - https://www.w3schools.com/howto/howto_css_flip_card.asp*/