@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --path: "M668 355.5s6-35-22-35-34 28-34 27.5c0 .5-13-26.5-33-26-29 1.5-40 22.5-40 22 0 .5 2-43.5-34-43.5-46-1-47 38-47 37.5 0 .5-42-150.5-119-152-88-.5-116 141.5-116 141 0 .5-26-39.5-51-39s-37 39.5-37 39c0 .5 4-23.5-10-22s-17 26.5-17 26.5";
  --jump: "m653,452.5c-71.33333,-152.16667 -281.66667,-142.33333 -336,-0.5"
}

* {
  box-sizing: border-box;
}

.sheep1 {
  height: 10px;
  width: 40px;
  background: rgba(128,191,255,0.5);
  border: 2px #80bfff solid;
  position: absolute;
  top: 0%;
  left: 0%;
  offset-path: path(var(--jump));
}

.sheep-jumping {
  position: absolute;
  height: 10px;
  width: 40px;
  top: 0%;
  left: 0%;
  -webkit-animation: travel 2s linear 1s alternate forwards;
  animation: travel 2s linear 1s alternate forwards;

}

@-webkit-keyframes travel {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
  0% { 
    transform: translate(-50%, -50%) scale(1.25, 0.75); 
  }
  50% { transform: translate(-50%, -150%) scale(1, 1); }
  100% { transform: translate(-50%, -50%) scale(1.25, 0.75); }

}

@keyframes travel {

  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }

  0% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
  50% { transform: translate(-50%, -150%) scale(1, 1); }
  100% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
}
/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * 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.
 *


 */