/*
@font-face {
    font-family: 'blumenregular';
    src: url('/fonts/blumen-webfont.woff2') format('woff2'),
         url('/fonts/blumen-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

} */

body{
    background-color: whitesmoke;
    padding: 1em;
    text-align: center;
}

.affirmation-screen, .card{
    background-color: whitesmoke;
    transition: 1s ease-in;
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1{
    margin-bottom: .25em;
}

.show-affirmation-button{
    transition: all 1s;
    width: 20vw;
}

.show-affirmation-button, .hide-affirmation-button{
    font-size: 2rem;
    line-height: 1.25em;
    cursor: pointer;
    border-radius: .5rem;
    padding: .25em;
    margin-bottom: 1em;
}

.valid-selection{
    background-color: #fffeaf;
}


.card div{
    text-align: center;
}

.flower{
    font-family: 'blumenregular';
    cursor: pointer;
    font-size: 30vh;
    transition: 1s ease-in;
}

.selected{
    opacity: 0;
    pointer-events: none;
}

.affirmation{
    display: flex;
    justify-content: center;
    font-size: 3em;
    font-family: 'Vollkorn';
    font-weight: bold;
    margin-bottom: 1rem;
}

.card .flower{
    cursor: auto;
}

.hidden{
    opacity: 0;
    pointer-events: none;
    /* transform: translateX(-100%);  */
}

.other-flowers .flower{
    font-size: 15vh;
}

.rainbow-homepage{
    display: flex;
    justify-content: center;
  }

  .rainbow-homepage img{
    height: 2em;
  }

@media only screen and (max-width: 600px) {
    body{
        padding: 0px;
    }

    .flower {
        font-size: 30vw;
    }

    .other-flowers .flower{
        font-size: 15vw;
    }

    .card{
        padding: 1em 2em 0em 2em;
    }

    .show-affirmation-button{
        width: 80vw;
    }

    .hide-affirmation-button{
        margin-bottom: 1em;
    }

    .show-affirmation-button, .hide-affirmation-button{
        font-size: 1.5rem;
    }
}

/* Rainbow Styles */
#rainbow {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: .5em;
  border-radius: 100px;
  background: linear-gradient(230deg, #ffbfc5, #ffffff, #a8d1e7);
  background-size: 600% 600%;
  -webkit-animation: AnimationName 15s ease infinite;
  -moz-animation: AnimationName 15s ease infinite;
  animation: AnimationName 15s ease infinite;
  border:5px solid #deedce;
  z-index:2;
}

@media only screen and (max-width: 600px) {
  #rainbow{
    padding: 5px;
  }
}

#rainbow:hover{
  border:5px solid #B3DBD8;
}

@-webkit-keyframes AnimationName {
  0%{background-position:51% 0%}
  50%{background-position:50% 100%}
  100%{background-position:51% 0%}
}
@-moz-keyframes AnimationName {
  0%{background-position:51% 0%}
  50%{background-position:50% 100%}
  100%{background-position:51% 0%}
}
@keyframes AnimationName {
  0%{background-position:51% 0%}
  50%{background-position:50% 100%}
  100%{background-position:51% 0%}
}