@import "reset.css";

@import url('https://fonts.googleapis.com/css2?family=Frijole&family=Macondo&family=Macondo+Swash+Caps&family=Milonga&family=Sirin+Stencil&family=Special+Elite&family=Yatra+One&display=swap');

:root {
  --time: 0.250s;

  /* rgb values */
  --clr-turquoiseblue-6FFFE9: 111, 255, 233;
  --clr-oxfordblue-0C1531: 12, 21, 49;
  --clr-maxbluegreen-5BC0BE: 91, 192, 190;
  --clr-black-222222: 34, 34, 34;
}

html {
  font-size: 10px;
  overflow: hidden;
}

body {
  background-color: rgb(var(--clr-black-222222));
}

.wrapperSupreme {
  display: flex;
  flex-direction: column;
  gap: 4vmin;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background-size: cover;
  opacity: 0;
}

.atpod {
  text-align: center;
  font-family: 'Macondo', sans-serif;
  font-size: 20vh;
  font-weight: bold;
  line-height: 1.25;
  color: rgb(var(--clr-oxfordblue-0C1531));
  -webkit-text-fill-color: rgba(var(--clr-maxbluegreen-5BC0BE), 0.3);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(var(--clr-oxfordblue-0C1531), 0.9);
  opacity: 0;
  user-select: none;
}

.showMe {
  opacity: 1;
  transition: opacity var(--time) ease-in;
}