body {background-image: url(stardown.gif); background-attachment:fixed; background-color: #000000; font-family: 'basiicfont', sans-serif;padding-left: calc(100vw - 100%);}

 @font-face {

  font-family: 'basiicfont';
  src: url('fonts/basiic lat.woff');
  font-weight: normal;
  font-style: normal;

}

 @font-face {

  font-family: 'EmojiFont';
  src: url('fonts/EmojiFont.ttf');
  font-weight: normal;
  font-style: normal;

}

hr {color:#874c5a;}

span {font-family: 'EmojiFont'}

a {

  color: #ff79c6;
  text-decoration: none;
  transition: all 0.5s ease-out; 
  display: inline-block; 

}

.irene {

  display: flex;
  object-fit: cover;
  width: 980px;
  height: auto;
  margin: -222px auto;
  margin-top: -65px;
  clip-path: inset(65px 0px 222px 0px); 

}

.box {

  display:flex;
  background-color: #220f16;
  width: 980px;
  max-height: 590px; 
  margin:0 auto;
  
}

.bottom {

  background-color: #6a374c;
  height: 26px; 
  width: 980px;
  margin:0 auto;
  white-space: nowrap;
  overflow: hidden;

}

.bottomtext {padding-left:100%;  animation: scroll-left 15s linear infinite; display: inline-block;}

.bottomtext p {display:flex; margin:0; color:#eacfd9; height:25px; align-items:center; justify-content:center;}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%); 
  }
}

/* TEXTO ========================================================================== */

.textbox {

  border: 2px solid #6a374c;
  scrollbar-color: #c77d96 #220f16;
  background-color: #220f16;
  width: 760px;
  height: auto;
  overflow-y: scroll;
  overflow-x: hidden;

}

.text {     

  font-size: 110%;
  text-align: left;
  padding-top: 2px;
  padding-left: 20px;
  padding-right: 24px;
  padding-bottom: 20px;
  color: #efdaf3;

}

.rightbox {

  border: 2px solid #6a374c;
  flex-direction: column;
  display: flex;
  width: 220px;
  max-height: 590px; 

}

/* LINKS ========================================================================== */

.linksheader {

  display: flex;
  justify-content: center;
  align-items: center;
  width: 220px;
  height: 35px; 
  background-color: #6a374c;

}

.linksheader a {color: #eacfd9}

.linksheader h2 {margin-top:0; margin-bottom:0;}

.linksbox {

  background-image: url("texture2.png");
  max-width: 220px;
  max-height: 400px; 
  background-color: #15090d;

}

.links {font-size: 14px;}

.links p {list-style: none; padding-left: 10px;}

.links a {color: #d299ad; transition: all 0.3s ease-out;}

.links a:hover {transform: translateY(-2px); color: #c77d96;}

.links img {width: 14px; padding-right: 5px;}

/* SOCIALES ========================================================================== */

.updatesheader {

  display: flex;
  justify-content: center;
  align-items: center;
  width: 220px;
  height: 35px; 
  background-color: #6a374c;
  color: #eacfd9;

}

.updatesbox{
  display: block;
  background-image: url("texture2.png");
  position: relative;
  width: 220px;
  height: 150px; 
  background-color: #15090d;
  padding-top: 6px;

}

.updatestext {font-size:14px;}

.updatestext p {list-style: none; padding-left:10px;}

.updatestext a {color:#d299ad; transition: all 0.3s ease-out;}

.updatestext a:hover {transform: translateY(-2px); color: #c77d96;}

.updatestext img {width:14px; padding-right:5px;}

/* UPDATES  ========================================================================== */

.updatesbox2 {height:auto; width:600px;margin:0 auto;}

.updatesheader2 {

  display:flex; 
  height:40px; 
  width:600px; 
  background-color:#6a374c;
  justify-content:center; 
  align-items:center;
  border: 3px solid #6a374c;
  border-bottom:none

}

.updatestextbox2 {

  background-color: #15090d;
  width:600px; 
  height:300px; 
  scrollbar-color: #c77d96 #090405; 
  overflow-y: scroll; 
  overflow-x: hidden;
  padding-top:5px; 
  border: 3px solid #6a374c; 
  border-top:none;
  background-image: url("texture2.png");

}

.updatestext2 {

  font-size: 100%;
  text-align: left;
  padding-top: 2px;
  padding-left: 20px;
  padding-right: 24px;
  padding-bottom: 20px;
  color: #efdaf3;

}

.updatestext2 a {font-size:16px;}


/* JUEGOS ========================================================================== */


.imagesbox{
  
  display: grid;
  grid-template-columns: repeat(6, 1fr);

}

.games {

  height: auto;
  width: auto;
  margin: 3px;
  transition: all 0.2s ease-out;

}

.games img {width: 100%; height: auto;}

.games:hover {transform: translateY(-4px);} 

/* DIBUJOS ========================================================================== */

.drawingsbox{

  display: flex;
  flex-wrap: wrap;

}

.drawings {

  height: auto;
  width: auto;
  margin: 3px;
  transition: all 0.2s ease-out; 

}

.drawings img {width: auto; height: 167px;}

.drawings:hover {transform: translateY(-4px);} 

/* WALLPAPERS ========================================================================== */

.wallpaperbox{
  
  display: grid;
  grid-template-columns: repeat(4, 1fr);

}

.wallpaper { 

  height: auto;
  width: auto;
  margin: 3px;
  transition: all 0.2s ease-out; 
   
}

.wallpaper img {height: auto; width: 100%;}

.wallpaper:hover {transform: translateY(-4px);}

/* YOUTUBE ========================================================================== */

.youtubebox{
  
  display: grid;
  grid-template-columns: repeat(3, 1fr);

}

.youtube {height: auto; width: auto; margin: 6px;}

.youtube img {width: 100%; height: auto;}

.youtube figcaption {font-size: 18px; padding: 4px; color: #efdaf3; transition: all 0.4s ease-out;}

.youtube figcaption:hover {color: #ff79c6;}

.youtube figure {margin:0 auto;}

/* GUIAS ========================================================================== */

.guiaslist {
 
  display: grid;
  grid-template-columns: repeat(3, 1fr);

}

.guias img {display: block; object-fit: contain; width: 100%; height: 250px;}

.guias figcaption {text-align: center; font-size: 22px; padding: 4px;}

.guia figure {margin:0 auto;}


/* No vayas a juzgar mi código eh, todavia soy nuevo en esto ( -_- ) */