@import "bulma/sass/utilities/initial-variables";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Lobster&family=Comfortaa:wght@400;500;600;700&display=swap');
@import url('https://use.fontawesome.com/releases/v5.12.0/css/all.css');

$family-sans-serif: 'Roboto',
sans-serif;
$family-secondary: 'Comfortaa',
cursive;
// // https://coolors.co/06aed5-086788-f0c808-fff1d0-dd1c1a
// $blue: #083d77;
// $red: #dd1c1a;
// $orange: #ee964b;
// $yellow: #f4d35e;
// $light: #f5fafe; // #ebebd3;
// $primary: $blue;
// $green: #007932; // hsl(141, 53%, 53%);
// $footer-background-color: $light;

$blue: #4c82fc;
$primary: $blue;

$text: $grey-dark;
$body-background-color: #FAFCFE;
$light: #fff;

@import 'bulma/bulma';

@import './demo';

.is-font-logo {
  font-family: 'Lobster', cursive;
}

.card {
  height: 100%;
}

.is-vcentered {
  height: 100vh;
}

.content {
  padding: 30px 60px 50px;

  &>h1 {
    margin-bottom: 40px;
  }
}

body {
  min-height: 100vh;
}

.button.google {
  background: rgb(225, 98, 89);
  color: white;
}










.animation-ctn {
  text-align: center;
  margin-top: 5em;
}

@-webkit-keyframes checkmark {
  0% {
    stroke-dashoffset: 100px
  }

  100% {
    stroke-dashoffset: 200px
  }
}

@-ms-keyframes checkmark {
  0% {
    stroke-dashoffset: 100px
  }

  100% {
    stroke-dashoffset: 200px
  }
}

@keyframes checkmark {
  0% {
    stroke-dashoffset: 100px
  }

  100% {
    stroke-dashoffset: 0px
  }
}

@-webkit-keyframes checkmark-circle {
  0% {
    stroke-dashoffset: 480px
  }

  100% {
    stroke-dashoffset: 960px;

  }
}

@-ms-keyframes checkmark-circle {
  0% {
    stroke-dashoffset: 240px
  }

  100% {
    stroke-dashoffset: 480px
  }
}

@keyframes checkmark-circle {
  0% {
    stroke-dashoffset: 480px
  }

  100% {
    stroke-dashoffset: 960px
  }
}

@keyframes colored-circle {
  0% {
    opacity: 0
  }

  100% {
    opacity: 100
  }
}

/* other styles */
/* .svg svg {
    display: none
}
 */
.inlinesvg .svg svg {
  display: inline
}

.svg-icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  height: 154px;
  width: 154px;
}

/* .svg img {
    display: none
} */

.svg-icon--order-success svg polyline {
  -webkit-animation: checkmark 0.30s ease-in-out 0.9s backwards;
  animation: checkmark 0.30s ease-in-out 0.9s backwards
}

.svg-icon--order-success svg circle {
  -webkit-animation: checkmark-circle 0.8s ease-in-out backwards;
  animation: checkmark-circle 0.8s ease-in-out backwards;
}

.svg-icon--order-success svg circle#colored {
  -webkit-animation: colored-circle 0.8s ease-in-out 0.9s backwards;
  animation: colored-circle 0.8s ease-in-out 0.9s backwards;
}