@font-face{
  font-family: "Commodore 64";
  src: url("../Commodore-64.TTF");
}

 /*Main*/
.Main{
    width: 1440px;     
    margin: 0 auto;    
}


 /*Titulo*/
.C1{
  position: relative;
  top: 10%;
  left: 25%;
  height: 50%;
  width: 40%;
  background: rgba(55, 44, 95, 0.521);
  border: 2px solid rgb(56, 56, 56);

  display: flex;
  text-align: center;
  flex-direction: column;
}
  .Title{
    font-size: 2.6rem;
    position: relative;
  }

 /*Panel de links*/
.C3{
  position: fixed;
  left: 2%;
  margin-top: -125.7rem;
  height: 51.8rem;
  width: 10%;
  background: rgba(55, 44, 95, 0.521);
  border: 2px solid rgb(56, 56, 56);

  display: block;
  text-align: center;
  flex-direction: column;
}
  .BlogLain{
    font-size: 1.2rem;
  }
  .BlogLain:hover{
    color: rgb(102,0,102);
    font-size: 1.5rem;
  }
  .LainDepre{
    margin-top: 15px;
    margin-bottom: 15px;
    left: 1.5rem;
    max-width: 8.0rem;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .WhoLain{
    font-size: 1.2rem;
  }
  .WhoLain:hover{
    color: rgb(102,0,102);
    font-size: 1.5rem;
  }
  .MabelDance{
    margin-top: 15px;
    margin-bottom: 15px;
    left: 1.5rem;
    max-width: 8.0rem;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .InicioLain{
    font-size: 1.2rem;
  }
  .InicioLain:hover{
    color: rgb(102,0,102);
    font-size: 1.5rem;
  }
  .LainBurger{
    margin-top: 15px;
    margin-bottom: 15px;
    left: 1.5rem;
    max-width: 8.0rem;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
  }


 /*Caja central*/
.C2{
  position: relative;
  top: 15px;
  left: 20%;
  height: 121.5rem;
  width: 50%;
  background: rgba(55, 44, 95, 0.521);
  border: 2px solid rgb(56, 56, 56);

  display: flex;
  text-align: center;
  flex-direction: column;
}
  .Entry1{
    position: relative;
    top: 1.9rem;
    left: 1.0rem;
    height: 48.6rem;
    width: 96%;
    background: rgba(42, 33, 71, 0.521);
    border: 2px solid rgb(146, 146, 146);

    display: block;
    text-align: center;
    flex-direction: column;
  }
  .Entry2{
    position: relative;
    top: 1.0rem;
    left: 1.0rem;
    height: 68.6rem;
    width: 96%;
    padding-bottom: 15px;
    background: rgba(42, 33, 71, 0.521);
    border: 2px solid rgb(146, 146, 146);

    display: block;
    text-align: center;
    flex-direction: column;
  }

  .LeafWriting{
    width: 12.0rem;
    height: auto;
  }

  .Dreamcast{
    width: 18.0rem;
    height: auto;
  }

body {
  background-image: url(../Vox.png);
  background-color: white;
  color: rgb(214, 214, 214);
  font-family: "Commodore 64";
}


@media screen and (max-width: 800px) {
  
  .C1, .C2, .C3 {
    width: 90%;
    left: 5%;
    height: auto;
  }

  .C1 { top: 2rem; margin-bottom: 2rem; }
  .C2 { top: 0; padding-bottom: 2rem; }

  .C3 { margin-top: 2rem; margin-bottom: 2rem; padding-bottom: 2rem; }

  .Entry1 {
    width: 90%;
    height: auto;
    left: 0;
    margin: 1rem auto;
    padding-bottom: 2rem;
  }

  .Entry2 {
    width: 90%;
    height: auto;
    left: 0;
    margin: 1rem auto;
    padding-bottom: 2rem;
  }

  .LainDepre, .MabelDance, .LainBurger {
    left: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .LeafWriting {
    left: 0;
    margin: 1rem auto;
    display: block;
    max-width: 80%;
  }
}