beire-frontend/src/styles.scss

/* You can add global styles to this file, and also import other style files */

//@import url('https://fonts.googleapis.com/css2?family=Raleway&family=Reenie+Beanie&family=Staatliches&display=swap');
@import './_variables.scss';

@font-face{
  font-family:"Swiss Bold";
  src:url('assets/font/swissboldcondensed.woff2');
}

@font-face{
  font-family:"Swiss Light";
  src:url('assets/font/swisslight.woff2');
}

body {
  margin:0;
  padding:0;
  background-color:$background-color;
  cursor:crosshair;
  font-family:"Swiss Light";
}

h1 {
  // font-family:"Staatliches",sans-serif;
  text-transform:uppercase;
  font-family:"Swiss Bold";
  font-size:10vw;
  opacity:0.6;
}

h2 {
  font-size:3vw;
  font-family:"Swiss Light",serif;
}

/* animations css */

@keyframes heartBeat {
   0% {
    transform: scale(none);
    -webkit-transform: scale(none);
  }

  20% {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
  }

  30% {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
  }

  45% {
    transform: scale(1.25);
    -webkit-transform: scale(1.25);
  }

  50% {
    transform: scale(none);
    -webkit-transform: scale(none);
  }

  100% {
    transform: scale(none);
    -webkit-transform: scale(none);
  }
}

@-webkit-keyframes heartBeat {
   0% {
    transform: scale(none);
    -webkit-transform: scale(none);
  }

  20% {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
  }

  30% {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
  }

  45% {
    transform: scale(1.25);
    -webkit-transform: scale(1.25);
  }

  50% {
    transform: scale(none);
    -webkit-transform: scale(none);
  }

  100% {
    transform: scale(none);
    -webkit-transform: scale(none);
  }
}