* {
  margin: 0;
  padding: 0;
  user-select: none;
}
body {
  /* display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: url(./assets/image7.png);
  backdrop-filter: blur(10px) */
}

#app{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: url(./assets/image7.png);
  /* backdrop-filter: blur(10px) */
 
}

.body-mask1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(25px);
}
.body-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  backdrop-filter: blur(30px);
 /*  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(224, 55, 180, 0.108) 100%);
  backdrop-filter: blur(50px); */
}
.menu-container {
  position: relative;
  width: 77vw;
  height: 37vw;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
header {
  display: flex;
  align-items: center;
  height: 5vw;
  margin-left: 1.7vw;
}
.logo {
  display: none;
  align-items: center;
  justify-content: center;
  width: 5vw;
  height: 5vw;
  background: radial-gradient(260.99% 176.41% at 118.87% 204%, rgba(194, 253, 109, 0.94) 0%, rgba(30, 34, 42, 0.94) 100%);
  border-radius: 20px;
}
.logo img{
  width: 3.5vw;
}
.header-title{
  width: 34vw;
  margin-left: 1.5vw;
}
.header-title h1{
  font-family: 'Gotham';
  font-style: normal;
  font-weight: 700;
  font-size: 1.75vw;
  line-height: 2vw;
  text-transform: uppercase;
  color: #FFFFFF;
}
.header-title h2{
  font-family: 'Gotham';
  font-style: normal;
  font-weight: 400;
  font-size: 1vw;
  line-height: 24px;
  color: #FFFFFF;
  opacity: 0.5;
}
.cards{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 55vw;
  padding: 0 1.5vw;
  height: 30vw;
  margin: 2vw 1.5vw 1.5vw 0.5vw;
  overflow: hidden;
  z-index: 1;
}
.card{
  position: relative;
  height: 25vw;
  width: 16vw;
  overflow: hidden;
  opacity: 0.5;
 /*  border-radius: 10px; */
  background: rgba(110, 110, 110, 0.5);
  box-shadow: 0px -1px 12px 1px rgba(0,0,0,0.4);
  border: 2px solid #C2FD6D;
  border-radius: 7px;
}
.card-img{
  position: relative;
  height: 100%;
  background-color: red;
  overflow: hidden;
  /* background: url(./assets/praca.png); */
  background-size: cover;
 
}
.card-blur{
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(9, 9, 9, 0.95) 0%, rgba(0, 0, 0, 0) 56.25%, rgba(0, 0, 0, 0) 100%);
mix-blend-mode: normal;
border-radius: 7px;
}
.card-infos{
  position: relative;
  font-family: 'Gotham';
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  position: absolute;
  top: 0;
  height: 23vw;
  width: 19vw;
  border-radius: 15px;
  overflow: hidden;
 /*  margin-left: 1vw; */
}


.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 4.5vw;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(40px);

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.footer svg {
  width: 1.2vw;
  margin-right: .5vw;
}

.street{
  display: flex;
  text-align: center;
  justify-content: center;
  width: 100%;
  align-items: center;
  height: 1.5vw;
}


.street h1 {
  color: #FFFFFF;
  opacity: 0.85;
  font-family: GothamP;
  font-size: .5vw;
  text-align: center;
  font-weight: 100;
}

.selectArea{
  position: relative;
  background: #1E222A;
  width: 100%;
  height: 3.2vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .selectArea:hover{
  background-color: #b4158a;
} */
.selectArea h1 {
  font-size: .8vw;
  font-family: GothamP;
  color: #FFFFFF;
  font-weight: 300 !important;
}

.selectArea h1 span {
  font-weight: 700 !important;
}


.spawnar{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13vw;
  height: 3vw;
  margin-top: 2.75vw;
  border-radius: 20px;
  background: radial-gradient(260.99% 176.41% at 118.87% 204%, rgba(194, 253, 109, 0.94) 0%, rgba(30, 34, 42, 0.94) 100%);
}
.spawnar h1{
  font-style: normal;
  font-weight: 700;
  font-size: 0.8vw;
  text-align: center;
  letter-spacing: 0.05vw;
  text-transform: uppercase;
  margin-top: 0;
  text-shadow: 0.08vw 0.08vw 0.08vw rgb(0 0 0 / 81%);
  color: #FFFFFF;
}
.spawnar:hover{
  background: #da1ea7;
}
.card:hover{
 /*  transform: scale(1.1); */
  transition: 0.2s;
}
.ultima-card{
  display: grid;
  place-items: center;
  width: 12.5vw;
  height: 2.75vw;
  border-radius: 15px;
  margin-top: 3vw;
  background: rgba(0, 0, 0);
  border: 0.15vw solid #E037B4;
}
.ultima-card h1{
  font-family: 'Gothaml';
  font-style: normal;
  font-weight: 900;
  font-size: 0.8vw;
  line-height: 15px;
  text-align: center;
  letter-spacing: 0.05vw;
  text-transform: uppercase;
  margin-top: 0;
  text-shadow: 0.08vw 0.08vw 0.08vw rgba(0, 0, 0, 0.808);
  color: #FFFFFF;
}
.card-description, .card-descriptionc{
  height: 6vw;
  width: 17vw;
  margin-top: 4.5vw;
}
.card-descriptionc{
  margin-top: 2.75vw;
}
.card-description h1, .card-descriptionc h1{
  margin: 0;
  font-family: 'Gothaml';
  font-style: normal;
  font-weight: 900;
  font-size: 0.6vw;
  line-height: 20px;
  text-align: center;
  text-shadow: none;
  letter-spacing: 0.08vw;
  text-transform: uppercase;
  color: #FFFFFF;
}.card-descriptionc p{
  font-family: 'GothamT';
  font-style: normal;
  font-weight: 300;
  font-size: 0.5vw;
  line-height: 0.75vw;
  text-align: center;
  opacity: 0.5;
  letter-spacing: 0.03vw;
  margin-top: 0.3vw;
  color: #FFFFFF;
}
.card-description p{
  font-family: 'GothamB';
  font-style: normal;
  font-weight: 300;
  font-size: 0.5vw;
  line-height: 0.75vw;
  text-align: center;
  opacity: 0.5;
  margin-top: 1vw;
  color: #FFFFFF;
}

.central{
  opacity: 1;
  transform: scaleY(1.15) scaleX(1.1);
}
.central:hover{
 /*  transform: scaleY(1.25) scaleX(1.2); */
  transition: 0.2s;
}
.ultima-loc{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11vw;
  height: 2.75vw;
  margin-top: 0.75vw;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.493);
}
.ultima-loc:hover{
  background: rgba(0, 0, 0, 0.6);
}
.ultima-loc h1{
  font-family: 'GothamL';
  font-style: normal;
  font-weight: 900;
  font-size: 0.5vw;
  line-height: 0vw;
  text-align: center;
  margin-top: 0;
  text-shadow: 0.05vw 0.05vw 0.05vw rgb(0 0 0 / 81%);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.animationL{
  animation: animationL 1s ease-in-out;
}

.animationR{
  animation: animationR 1s ease-in-out;
}
.animationCR{
  animation: animationCR 1s ease-in-out;
}
.animationCL{
  animation: animationCL 1s ease-in-out;
}


footer {
  width: 100%;
  height: 5vw;
  margin-top: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

footer .confirm{
  width: 8vw;
  height: 2.3vw;
  background: #2A2D33;
  border-radius: 7px;
  text-transform: uppercase;

  display: grid;
  place-items: center;
  margin-right: .3vw;
}

footer .confirm:hover, footer .lastLocation:hover{
  background: radial-gradient(260.99% 176.41% at 118.87% 204%, rgba(194, 253, 109, 0.94) 0%, rgba(30, 34, 42, 0.94) 100%);
}

footer .lastLocation{
  width: 8vw;
  height: 2.3vw;
  background: #2A2D33;
  border-radius: 7px;
  text-transform: uppercase;

  display: grid;
  place-items: center;
  margin-left: .3vw;
}

footer h1{
  font-size: .65vw;
  color: white;
  font-family: GothamP;
  font-weight: 100;
}

footer .lastLocation{
  text-transform: uppercase;
}

@keyframes animationL { /* esquerda meio */
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translateX(19.75vw) scaleY(1.15) scaleX(1.1);
  }
}
@keyframes animationCR { /* direita meia */
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translateX(-19.75vw) scaleY(1) scaleX(1);
  }
}
@keyframes animationCL { /* meia direita */
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translateX(19.75vw) scaleY(1) scaleX(1);
  }
}
@keyframes animationR { /* meia esquerda */
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translateX(-19.75vw) scaleY(1.15) scaleX(1.1);
  }
}
@keyframes animation2 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.x{
  overflow: hidden;
  display: flex;
  align-items: center;
  position: absolute;
  width: 55vw; /* 77 */
  height: 37vw;
}
.y{
  position: absolute;
  right: -19vw;
  animation: enterR 1s ease-in-out;
}
.z{
  position: absolute;
  left: -19vw;
  animation: enterL 1s ease-in-out;
}
@keyframes enterR { /* trig */
  0% {
    transform: translate(0);
  }
  100% {
    transform: translateX(-19.5vw);
  }
}
@keyframes enterL {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translateX(19.5vw);
  }
}

@font-face {
    font-family: 'Gotham';
    src: url(./assets/Gotham-Font/GothamMedium.ttf);
  }
  @font-face {
    font-family: 'GothamB';
    src: url(./assets/Gotham-Font/GothamBold.ttf);
  }
  @font-face {
    font-family: 'GothamL';
    src: url(./assets/Gotham-Font/Gotham-Light.otf);
  }
  @font-face {
    font-family: 'GothamT';
    src: url(./assets/Gotham-Font/Gotham-Thin.otf);
  }
  @font-face {
    font-family: 'GothamX';
    src: url(./assets/Gotham-Font/Gotham-XLight.otf);
  }
  @font-face {
    font-family: 'Assinatura';
    src: url(./assets/Photograph\ Signature.ttf);
  }

  @font-face {
    font-family: 'GothamP';
    src: url(./assets/Gotham-Font/Gotham-Pro-Regular.ttf);
  }