body {
  width: 1440px;
  height: 690px;
  background: #46c39f;
  font-family: 'Typewriter', sans-serif;
                                                
}

.PantallaDeJuego {
  width: 1440px;
  height: 1024px;
  left: 10px;
  top: -50px;
  position: absolute;
  background: #47C3A0;
}
/*-------- Boton de Borrar terminal ------*/

.Deletebutton {
  width: 114px;
  height: 47px;
  left: 1285px;
  top: 992px;
  border-radius: 20px;
  position: absolute;
}

.Botonazul {
  width: 114px;
  height: 53px;
  left: 0px;
  top: 0px;
  position: absolute;
}

.Fbotondelete2 {
  width: 114px;
  height: 47px;
  left: 0px;
  top: 6px;
  position: absolute;
  background: linear-gradient(180deg, #4FCCDD 0%, #3D82AA 50%, #2B3977 100%);
  border-radius: 20px;
  border: 1px #B3E5F1 solid;
}

.Fbotondelete1 {
  width: 114px;
  height: 47px;
  left: 0px;
  top: 0px;
  position: absolute;
  background: linear-gradient(180deg, #4FCCDD 0%, #3D82AA 50%, #2B3977 100%);
  border-radius: 20px;
  border: 1px #B3E5F1 solid;
}

.Borrar {
  width: 79px;
  height: 35px;
  left: 18px;
  top: 6px;
  position: absolute;
  color: black;
  font-size: 23px;
  font-weight: 400;
  font-family:'typewritter', sans-serif;
  word-wrap: break-word;
}
/* ------------- Boton borrar notas--------*/

.Notesbutton {
  width: 114px;
  height: 47px;
  left: 450px;
  top: -60px;
  border-radius: 20px;
  position: absolute;
}

.Botonazulrojo {
  width: 114px;
  height: 53px;
  left: 0px;
  top: 0px;
  position: absolute;
}

.FbotonNotes2 {
  width: 114px;
  height: 47px;
  left: 0px;
  top: 6px;
  position: absolute;
  background: linear-gradient(90deg, #DD4F67 0%, #2B3977 100%);
  border-radius: 20px;
  border: 1px #B3E5F1 solid;
}

.FbotonNotes1 {
  width: 114px;
  height: 47px;
  left: 0px;
  top: 0px;
  position: absolute;
  background: linear-gradient(90deg, #DD4F67 0%,  #2B3977 100%);
  border-radius: 20px;
  border: 1px #B3E5F1 solid;
}

.BorrarNotes {
  width: 79px;
  height: 35px;
  left: 18px;
  top: 15px;
  position: absolute;
  color: black;
  font-size: 23px;
  font-family: 'typewritter', sans-serif;
  font-weight: 400;
  word-wrap: break-word;
}
/* -------------boton de Enter ------------*/

.Enterbutton {
  width: 114px;
  height: 47px;
  left: 1154px;
  top: 992px;
  border-radius: 20px;
  position: absolute;
}

.Botonverde {
  width: 114px;
  height: 53px;
  left: 0px;
  top: 0px;
  position: absolute;
}

.Fbotonenter2 {
  width: 114px;
  height: 47px;
  left: 0px;
  top: 6px;
  position: absolute;
  background: linear-gradient(180deg, #4FDDB5 0%, #3DAA8C 50%, #2B7761 100%);
  border-radius: 20px;
  border: 1px #B3E5F1 solid;
}

.Fbotonenter1 {
  width: 114px;
  height: 47px;
  left: 0px;
  top: 0px;
  position: absolute;
  background: linear-gradient(180deg, #4FDDB5 0%, #3DAA8C 50%, #2B7761 100%);
  border-radius: 20px;
  border: 1px #B3E5F1 solid;
}

.Enter {
  width: 67px;
  height: 35px;
  left: 26px;
  top: 6px;
  position: absolute;
  color: black;
  font-size: 23px;
  font-weight: 400;
  word-wrap: break-word;
  font-family: 'typewriter';
}

/*--------La terminal ----------------*/
.Terminal {
  width: 657px;
  height: 523px;
  left: 735px;
  top: 258px;
  position: absolute;
  background: #333333;
  border-radius: 11px;
  border: 9px #4FDDB5 solid;
  overflow-y:auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  
}

.terminal-screen {
    color: #00FF00;
    font-family: monospace;
    padding: 10px;
/*    overflow-y: auto;*/
    height: 100%;
}

/*-------------El input de texto de la terminal -----------*/
.Input {
  width: 657px;
  height: 134px;
  left: 735px;
  top: 812px;
  position: absolute;
  background: #333333;
  border-radius: 11px;
  border: 9px #4FDDB5 solid;
  color: #00FF00;
  font-family: monospace;
  padding: 10px;
}

/* ---------  El block de notas -------------------------*/


.Notes {
  width: 625px;
  height: 756px;
  left: 51px;
  top: 253px;
  position: absolute;
  z-index: 0;
  box-shadow: 6.599999904632568px 6.599999904632568px 6.599999904632568px;
  

}

.fondoNotes {
  width: 638px;
  height: 770px;
  left: -7px;
  top: -5px;
  position: absolute;
  z-index: 0;
  background: linear-gradient(90deg, rgba(79.33, 220.98, 180.84, 0.54) 0%, rgba(190.33, 204.14, 200.23, 0.54) 100%);
  box-shadow: 6.599999904632568px 6.599999904632568px 6.599999904632568px;
  border-radius: 20px;
  
  filter: blur(6.60px);
  backdrop-filter: blur(4px);
}

.NoteContent {
  position: relative;
  width: 556px;
  height: 655px;
  left: 34px;
  top: 73px;
  border-radius: 16px;
  z-index: 1;
}

.Texturacuaderno {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 16px;
  z-index: 1;
}

.PistaEncontrada {
  position: absolute;
  top: 10px;
  left: 50px;
  width: 90%;
  height: 50%;
  overflow-y: auto;
  z-index: 3;
  padding: 10px;
  box-sizing: border-box;
  font-size: 20px;
  font-weight: 400;
  word-wrap: break-word;
}

.Divnotas {
  position: absolute;
  bottom: 0;
  left: 50px;
  width: 90%;
  height: 50%;
  background: transparent;
  border: none;
  z-index: 3;
  padding: 10px;
  box-sizing: border-box;
  resize: none;
  font-size: 20px;
}

.Pcuaderno {
  left: 26px;
  top: -60px;
  position: absolute;
  color: black;
  font-size: 24px;
  font-weight: 400;
  word-wrap: break-word;
  z-index: 4;
}

/* ---------  El bloque de instrucciones del juego ----------*/

.Intro {
  width: 661px;
  height: 151px;
  left: 729px;
  top: 61px;
  position: absolute;
}

.Boxintro {
  width: 670px;
  height: 151px;
  left: 0px;
  top: 0px;
  position: absolute;
  background: linear-gradient(90deg, rgba(79.33, 220.98, 180.84, 0.54) 0%, rgba(190.33, 204.14, 200.23, 0.54) 100%);
  box-shadow: 6.599999904632568px 6.599999904632568px 6.599999904632568px;
  border-radius: 20px;
  border: 1px #F6F3F3 solid;
  filter: blur(6.60px);
}

.Pintro {
  width: 589px;
  height: 43px;
  left: 36px;
  top: -10px;
  position: absolute;
  color: black;
  font-size: 23px;
  font-weight: 400;
  word-wrap: break-word;
}

/* ------------------ El Bloque con el Título del Juego---------------*/
.Header {
  width: 632px;
  height: 175px;
  left: 59px;
  top: 49px;
  position: absolute;
}

.Boxheader {
  width: 607px;
  height: 163px;
  left: 0px;
  top: 12px;
  position: absolute;
  background: linear-gradient(90deg, rgba(79.33, 220.98, 180.84, 0.54) 0%, rgba(190.33, 204.14, 200.23, 0.54) 100%);
  box-shadow: 6.599999904632568px 6.599999904632568px 6.599999904632568px;
  border-radius: 20px;
  border: 1px #F6F3F3 solid;
  filter: blur(6.60px);
  backdrop-filter: blur(4px);
}

.Titulo {   /*  AGATHA  */
  width: 476px;
  height: 125px;
  left: 74px;
  top: -90px;
  position: absolute;
  color: black;
  font-size: 120px;
  font-weight: 400;
  word-wrap: break-word;
}

.Subheader {  /* Un misterio a toda pastilla */
  width: 376px;
  height: 35px;
  left: 256px;
  top: 125px;
  position: absolute;
  color: black;
  font-size: 24px;
  font-weight: 400;
  word-wrap: break-word;
}