* {

    box-sizing: border-box;

}

body {

    background: #080808;

    color: white;

    font-family: Arial, sans-serif;

    margin: 0;

}

.tela-inicial {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 25px;

    text-align: center;

}

.marca h1 {

    font-size: 95px;

    margin: 0;

    color: white;

    letter-spacing: 8px;

    text-shadow: 0 0 20px red;

}

.marca p {

    color: red;

    letter-spacing: 12px;

    font-size: 20px;

    margin-top: 0;

}

.tela-inicial h2 {

    margin-top: 55px;

}

button {

    background: #e00000;

    color: white;

    border: none;

    border-radius: 25px;

    padding: 15px;

    width: 100%;

    max-width: 300px;

    margin-top: 15px;

    font-weight: bold;

}

.botao-secundario {

    background: white;

    color: #e00000;

}

.tela-formulario {

    display: none;

    min-height: 100vh;

    padding: 30px;

    text-align: center;

}

.tela-formulario h2 {

    color: red;

}

.tela-formulario input {

    display: block;

    width: 100%;

    padding: 15px;

    margin: 15px 0;

    background: #222;

    border: 1px solid red;

    border-radius: 12px;

    color: white;

}* {

  box-sizing: border-box;

}

body {

  margin: 0;

  background: #080808;

  color: white;

  font-family: Arial, sans-serif;

}

.app {

  max-width: 450px;

  min-height: 100vh;

  margin: auto;

  padding: 15px;

  padding-bottom: 90px;

}

header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-bottom: 1px solid #333;

  padding-bottom: 12px;

}

header h1 {

  color: #ff2020;

  font-size: 30px;

  letter-spacing: 2px;

}

button {

  background: #e60000;

  color: white;

  border: none;

  border-radius: 8px;

  padding: 11px 14px;

  margin: 4px;

  cursor: pointer;

  font-weight: bold;

}

button:active {

  transform: scale(.96);

}

section {

  margin-top: 20px;

}

.video {

  background: #191919;

  height: 420px;

  border-radius: 12px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  overflow: hidden;

  text-align: center;

}

.video video {

  width: 100%;

  height: 100%;

  object-fit: contain;

}

.acoes {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

}

input {

  background: #222;

  color: white;

  border: 1px solid #555;

  border-radius: 8px;

  padding: 12px;

  margin: 5px 0;

  width: 100%;

}

.momentos, #lista-destaques {

  margin: 20px 0;

}

#lista-momentos {

  display: flex;

  gap: 10px;

  overflow-x: auto;

}

#lista-momentos img,

#lista-momentos video {

  width: 75px;

  height: 100px;

  object-fit: cover;

  border-radius: 12px;

}

.foto-perfil {

  background: #252525;

  width: 90px;

  height: 90px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  font-size: 40px;

  margin: 15px auto;

}

.estatisticas {

  display: flex;

  justify-content: space-around;

  text-align: center;

  margin: 25px 0;

}

nav {

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  background: #151515;

  display: flex;

  justify-content: space-around;

  padding: 10px 2px;

  border-top: 1px solid #333;

}

nav button {

  background: transparent;

  font-size: 12px;

  padding: 8px 4px;

}

#tela-publicar,

#tela-live,

#tela-perfil,

#tela-login {

  display: none;

}

#comentarios {

  margin-top: 15px;

}

#sala-live {

  margin-top: 20px;

  padding: 15px;

  background: #191919;

  border-radius: 12px;

}