/* line 1, app/assets/stylesheets/app.scss */
.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: calc(100vw * 6.5 / 7);
}

@media (min-aspect-ratio: 7/6.5) {
  /* line 1, app/assets/stylesheets/app.scss */
  .wrapper {
    width: calc(100vh * 7 / 6.5);
    height: 100vh;
  }
}

/* line 15, app/assets/stylesheets/app.scss */
.frame-border {
  width: 100vw;
  aspect-ratio: 7/6;
}

@media (min-aspect-ratio: 7/6.5) {
  /* line 15, app/assets/stylesheets/app.scss */
  .frame-border {
    width: calc(100vh * 7 / 6.5);
  }
}

/* line 38, app/assets/stylesheets/app.scss */
.circle-transparent {
  mask-image: radial-gradient(circle at center, transparent 60%, black 60%);
}

/* line 48, app/assets/stylesheets/app.scss */
.font-brand {
  font-family: "Audiowide", sans-serif;
  font-weight: 400;
  font-style: normal;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

/*

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


 */