@font-face {
  font-family: "MiFuente";
  src: url("font/Blockt.ttf");
}

#fondo {
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  border: none;
  z-index: -1;
}

iframe {
  width: 420px ;
  height: 520px ;
  border: none;
  display: block;
  margin: 0 auto;
}

.titulo {
  font-family: "MiFuente";
  font-size: 60px;
  color: white;

  text-align: center;
  letter-spacing: 3px;

  -webkit-text-stroke: 1px #00ffff;

  text-shadow:
    0 0 5px #00ffff,
    0 0 15px #00ffff;

  text-transform: uppercase;
}

body {

 
 
}

.titulo {
  max-width:800px;
  margin: 0 auto;
  border-style: dashed;
  border-color: white;
}

/* iframe de fondo */
#fondo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: -1;
}

#stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

/* layout general */
.contenedor {
  display: flex;
  gap: 20px;
  padding: 20px;
}

/* sidebar izquierda */
.sidebar {
  width: 250px;
  height: 250px;
}

/* contenido principal */
.main {
  flex: 1;
}

/* perfil */
.perfil {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

/* estilo de cajas */
.caja {
  border: 3px solid #3189f0;
  background-color: black;
  color: #00ffff;
  padding: 10px;
  margin-bottom: 20px;
  font-family: monospace;
}

/* títulos */
.caja h2 {
  border-bottom: 2px solid #00ffff;
  padding-bottom: 5px;
}

/* capa oscura encima */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}