/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


.box_statistics {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: repeat(5, 60px);
  p {
    margin: 0;
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
  }
}


.card {
  margin: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 20px;
  width: 400px;
  height: 200px;
  perspective: 1000px;
  position: relative;

  line-height: 1.5;
  font-weight: 300;
  color: white;
  font-family: "Nunito Sans", sans-serif;

  .front, .back {
    position: absolute;
    margin: 0;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px 10px rgba(#a18cd1, 0.25);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: ease-in 2s;
  }

  .front {
    transform: rotateY(0deg);
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    font-size: 38px;

  }
  .back {
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    font-size: 28px;
    transform: rotateY(-180deg);
  }

  button {
    background-color: white;
    color: rgb(158, 157, 157);
    font-size: 16px;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
  }

}
.card:hover {
  .front {
    transform: rotateY(180deg);
  }
  .back  {
    transform: rotateY(0deg);
  }
}


form.button_to {
  display: inline-block;
}