body{
  background-image: url("estrellitasvioletitas.gif");
  overflow-x: hidden;
  font-family:monospace;
}
#container{
  width:1200px;
  margin:auto;
  color:purple;
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: auto auto auto;
  gap: 5px;
  padding: 10px;
  background-color: var(--glass-color);
  backdrop-filter: blur(3px);
  border-radius:10px;
  text-align:center;
  }
#header{
  background-image: url("portadita.gif");
  width:1180px;
  height:115px;
  padding: 10px;
  font-size: 15px;
  margin: 5px;
  border-radius:10px;
  background-color:#CCAAFF;
  grid-column-start: 1;
  grid-column-end: 4;
  border-radius:10px;
  }
#izquierda{
  padding: 10px;
  font-size: 15px;
  margin: 5px;
  border-radius:10px;
  background-color:#CCAAFF;
  width:210px;
  text-align:center;
  }
#derecha{
  padding: 10px;
  font-size: 15px;
  margin: 5px;
  border-radius:10px;
  background-color:#CCAAFF;
  text-align:center;
  width:210px;
  }
#parahacer{
  background-image:url(SB036.JPG);
  color:#4030AA;
  overflow-y:scroll;
  overflow-x:hidden;
  height:75px;
  margin:5px;
  padding:5px;
  text-align: left;
  }
#content{
  padding: 10px;
  font-size: 15px;
  margin: 5px;
  border-radius:10px;
  background-color:#CCAAFF;
  width:600px;
  text-align:center;
  }
#footer{
  padding: 10px;
  font-size: 15px;
  margin: 5px;
  border-radius:10px;
  background-color:#CCAAFF;
  grid-column-start: 1;
  grid-column-end: 4;
  }
#upper{
  padding: 10px;
  font-size: 15px;
  margin: 5px;
  border-radius:10px;
  background-color:#CCAAFF;
  height:20px;
  grid-column-start: 1;
  grid-column-end: 4;
  }
#upper img{
  width:150px;
  height:20px;
  }
#izquierda a {
    text-decoration:none;
    color:white;
    }
#izquierda a:hover{
  color:pink;
  }
nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 3px;
    background-color: #9070FF;
    border-radius:10px;
    width:100%;
    color: purple;
    font-size:15px;
    cursor: pointer;
}
nav button:hover {
  background-color: violet;
  }

#destacados{
  padding: 10px;
  font-size: 15px;
  margin: 5px;
  border-radius:10px;
  background-color:#CCAAFF;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 5px;
  justify-items: center;
}
#yo{
  padding: 10px;
  font-size: 15px;
  margin: 5px;
  border-radius:10px;
  background-color:#CCAAFF;
  grid-column: 1;
  grid-row: 1;
    width:180px;
    height:180px;
    background-image:url(hola.png);
    color:purple;
    transition:.5s;
    }
#yo:hover{
    transform: scale(1.1);
    }
#foto{
  padding: 10px;
  font-size: 15px;
  margin: 5px;
  border-radius:10px;
  background-color:#CCAAFF;
  grid-column: 2;
  grid-row-start:1;
  grid-row-end:3;
  width:250px;
  background-image:url(imagendestacadavr.png);
  color:white;
  transition:.5s;
  }
#foto:hover{
  background-image:url(imagendestacadacolor.png);
  transform: scale(1.1);
}
#dibujo{
  padding: 10px;
  font-size: 15px;
  margin: 5px;
  border-radius:10px;
  background-color:#CCAAFF;
  grid-column: 1;
  grid-row: 2;
  width:180px;
  height:250px;
  background-image:url(dibujodestacadovr.png);
  color:black;
  transition:.5s;
  }
#dibujo:hover{
  background-image:url(dibujoc.png);
  background-position: -180px -95px;
  transform: scale(1.1);
}
#derecha textarea{
  background-color:#7555AA;
  color:white;
  border: 2px solid white;
  overflow-y:scroll;
  height:150px;
  }
.video-container{
    text-align:center;
    margin:10px;
    width:145px;
    height:94px;
    }
.botones{
    display: grid;
    grid-template: auto auto;
    gap: 10px;
    justify-items: center;
    }
  #uno{
   text-align:left;
   font-size: 15px;
   margin:2px;
    }
#blog{
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 3;
  height:100px;
  overflow-y:auto;
  padding: 10px;
  font-size: 15px;
  margin: 5px;
  border-radius:10px;
  border: 2px solid #8050BB;
  background-color:#AA80CC;
  color:white;
  overflow-y:auto
    }
#statuscafe {
    width:190px;
    padding: .5em;
    background-color: #EEDDFF;
    border-radius:15px;
    border: 2px solid #BCAAFF;
    text-align:left;
}
#statuscafe a{
  color:violet;
  }
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}