@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-image: url('star.jpg');
  display: flex;
  flex-direction: column;
  align-items: center;
  image-rendering: pixelated;
}

header{
  background-image: url('beach.png');
  background-size:100% 125px;
  margin-top: 6px;
  width: 96%;
  height: 125px;
  padding: 2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  border-radius:20px;
  border: blue 4px solid;
  font-family: "ubuntu", "sans-serif";
  font-size: 20px;
  font-weight: bold;
  color: white;
  -webkit-text-stroke: 1.5px navy;
}

section{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title{
  animation: float 5s ease-in-out infinite;
}

@keyframes float{
  0%{
    transform: translatey(0);
  }
  
  50%{
    transform: translatey(-12px);
  }
  
  100%{
    transform: translatey(0);
  }
}

.gerador{
  margin: 8px 0 8px 0;
  width: 96%;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 20px;
  background: #2d0278;
  background: linear-gradient(180deg, rgba(45, 2, 120, 1) 0%, rgba(105, 0, 171, 1) 100%);
  color: white;
  font-family: "ubuntu", "sans-serif";
}

.main{
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 12px;
  width: 96%;
  min-height: 100px;
  max-height: max-height;
  background-image: url('space.png');
  background-size: 200px;
  color:white;
  border-radius:20px;
  padding: 8px 8px 8px 12px;
  font-family: "ubuntu", "sans-serif";
}

summary{
  width: 100%;
  font-family: "Press start 2p";
  font-size: 12px;
  background: linear-gradient(90deg, blue, darkblue, transparent);
}

summary::marker{
  content: '★';
}

.deta{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 20px;
  width: 100%;
  margin: 8px 0 8px 0;
  row-gap: 5px;
}

.deta a{
  width: 70%;
  background: linear-gradient(90deg, darkblue, transparent);
  text-decoration: none;
  color: white;
}

.deta a:hover{
  text-shadow: 0 0 5px white;
  font-style: italic;
  background: linear-gradient(90deg, blue, transparent);
  transition: 0.5s;
}

.pixel1{
  background: linear-gradient(90deg, transparent, #7724d1, darkblue, #7724d1, transparent);
  width: 100%;
  display: flex;
  justify-content: center;
  column-gap: 5px;
}

.pixel1 img{
  width: 20px;
  height: 20px;
}

main{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.obs{
  margin: 20px 0 20px 0;
  width: 100%;
}

.post{
  padding: 5px;
  width: 250px;
  height: 100px;
  background: linear-gradient(180deg, #ffed4f, #ffa733);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "ubuntu", "sans-serif";
  border: #912d01 4px solid;
  color: #912d01;
}

.block{
  margin: 8px 0 8px 0;
  height: max-height;
  width: 98%;
  padding: 30px;
  border: #2418c7 3px solid;
  border-radius: 40px;
  font-family: "ubuntu", "sans-serif";
  color: white;
  background: #180147;
  text-align:center;
}

h2{
  margin-top: 10px;
  font-family: "press start 2p";
  font-size: 18px;
  text-align: center;
  background: linear-gradient(180deg, white, #b2abff);
  background-clip: text;
  color: transparent;
}

.update{
  position: relative;
}

.caixaUpdate{
  padding: 10px;
  margin: 8px 0 8px 0;
  width: 96%;
  height: 200px;
  background-image: url("space.png");
  background-size: 200px;
  border-radius: 20px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  overflow-y:auto;
  overflow-x: hidden;
  row-gap: 10px;
}

.caixa{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100px;
  max-height: max-height;
  width: 70%;
  text-align: center;
  background: linear-gradient(180deg, white, lightblue);
  border: darkblue 4px solid;
  padding: 5px;
  color: darkblue;
  font-family: "ubuntu", "sans serif";
}

.data{
  font-family: "press start 2p";
  font-size: 18px;
  background: linear-gradient(90deg, red, orange, yellow, green, blue, purple);
  background-clip: text;
  color: transparent;
}

.palm{
  position: absolute;
  left: -50px;
  bottom: 0;
}

footer{
  margin-top: 50px;
  background-image: url("space.png");
  background-size: 200px;
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.redes{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 8px;
}

.redes a{
  width: 70%;
  background: linear-gradient(90deg, darkblue, transparent);
  text-decoration: none;
  color: white;
  font-family:"ubuntu", "sans serif";
}

.redes a:hover{
  text-shadow: 0 0 5px white;
  font-style: italic;
  background: linear-gradient(90deg, blue, transparent);
  transition: 0.5s;
}

.compartilhar{
  color: white;
  font-family: "ubuntu", "sans serif";
}

textarea{
  background: linear-gradient(180deg, white, lightblue);
}