@import "https://fonts.googleapis.com/css?family=Oswald:400,700";
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;  
}
img {
  -webkit-touch-callout: none; /* Evita o menu de toque no iOS */
  -webkit-user-select: none;   /* Evita a seleção no Chrome, Safari e Opera */
  -khtml-user-select: none;    /* Evita a seleção no Konqueror */
  -moz-user-select: none;      /* Evita a seleção no Firefox */
  -ms-user-select: none;       /* Evita a seleção no Internet Explorer/Edge */
  user-select: none;           /* Evita a seleção nos navegadores compatíveis */
  pointer-events: none;        /* Desativa todos os eventos do mouse na imagem */
}
html, body{
  height: 100%;
  height: dvh;
  width: 100vw;
  overflow: hidden;
}
body{
  font-family: "Oswald", sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: white;
  background-color: #001b14;
}
iframe {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#root {
  background-color: rgba(0, 0, 0, 0.85);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  flex-direction: column;
}
.mascote{
  width: 56%;
  max-width: 280px;
  margin-bottom: -30px;
}
.spaceGame {
  text-align: center;
  width: 80%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ribbon {
  position: relative;
  width: 80%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #038b67, #024b37);
  text-transform: uppercase;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  margin: 5px 0;
  transform: skew(0, -10deg);
  z-index: 1; /* Adicionando um z-index ao elemento principal */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  border-radius: 2px;
}

.ribbon.before,
.ribbon.after{
  position: relative;
  width: 70%;
  margin-left: -10%;
  height: 54px;
  background: linear-gradient(to right, #04503c, #024b3750);
  z-index: -1;
  transform: skew(0, -25deg);
  margin-top: -35px;
  border-radius: 2px;
  margin-bottom: -27px;
  max-width: 250px;
}
.ribbon.before2 {
  margin-left: 10%;
  height: 24px;
  margin-bottom: -9px;
  margin-top: -16px;
  transform: skew(0, -18deg);
  max-width: 253px;
}
.ribbon.after {
  margin-left: 10%;
  height: 22px;
  margin-bottom: 29px;
  margin-top: -24px;
  transform: skew(0, -18deg);
  margin-right: -8%;
  width: 42%;
  max-width: 149px;
}
.inner{
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeYAAAALCAYAAACqPi4nAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjEyM0FFRTU0NUUzMTFFNTlDMjdDMEJDMDFCNjlGNDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjEyM0FFRTY0NUUzMTFFNTlDMjdDMEJDMDFCNjlGNDkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEOUZEM0I5NDQ1QkQxMUU1OUMyN0MwQkMwMUI2OUY0OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MTIzQUVFNDQ1RTMxMUU1OUMyN0MwQkMwMUI2OUY0OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pm3y348AAAIOSURBVHja7JvhboIwEMfbOZgyQF9h2cPtrfZ8+7APU0RQt7FrciQ3QqHodFT+v+RCc9ikHtX/tUe1GjFVVc3okij/0GRL5ScrT8edkt15OG4zv2cejvuRLPBw3BFZ6OG452y+8UC28HDcAc/xa/FN9k72RvaqSfzMH/EL2RPZMwcyFRMh4YkcKwAAAGC6GAHNyHZke7I1Wcm2Zp+5t+F2Trbltku/TGv9pQeuYGuxTjmjSISAS99CCHwt6l2+JfeNOaMN8PwBAAAMkSgWxIKF7oOvRYdQ5tx26kei+XmNL6JHG+Gqaop1yAIe8hZD7VuJbYc2X73ltuJ7kfAtMZcBAOAqWFeJ3N62CGXp2o9E83grgdJTnymUAEixluIfcVIQdPjq+knM91PhS/hztW+O3yUAYMSi2be6PHn7lkTzgBBDmMeaBEixbtbwkx6frVTQ5sNzBeB22DiuLvu2b8u2fiSae4QYwgwunwDcK3sN31bXt5UKusoHEaINJk524urSafuWRLNEiCHMAAxNAmQNv6+u3ywV9JUPZKlghmiDgeS2VaJyfznIJrBGNAuEGECYwZQTAHNGOVXudX1ZFnApH6RiBwFcnp0QynNWl60CS6KZI8QAwgzA7SQBlzgCGCp/jgUWLUJ5zuryl8CSaG4xywCAMAMw1iTgr44AmutBnfdykBHNDE8FgP/lR4ABABGzGigi55YSAAAAAElFTkSuQmCC") center bottom no-repeat;
  display: block;
  width: 100%;
  height: 5px;
}
.ribbon .inner:first-child{
  transform: scaleY(-1);
}
.ribbon-1{
  font-size: 2rem;
  line-height:  3rem;
  letter-spacing: 5px;
  max-width: 300px;
}
.ribbon-2{
  width: 60%;
  height: 40px;
  color: lime;
  max-width: 226px;
}

.grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  width: 86%;
  font-size: 0;
  margin-top: -8px;
}
.grid a{
  width: 100%;
  aspect-ratio: 1/1;
  display: block;
  transition: all 0.3s;
  box-shadow: 0px 0px 50px 19px rgb(0 0 0 / 90%);
}
.grid a:hover{
  transform: scale(0.95);
  
}
.grid a picture{
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.grid a::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 
    2px 2px 4px 1px rgba(255,255,255,0.10) inset,
    -2px -2px 3px 0px rgba(0,0,0,0.4) inset;
  z-index: 1;
  top: 0;
  left: 0;
  border-radius: 20%;
}
.grid a picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20%;
  position: relative;
  z-index: 0;
}
.content{
  width: 100%;
  max-width: 450px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}