.background-image 
{
     animation: scroll-background 250s linear infinite; /* Adjust the duration and timing function as needed */
}

 @keyframes scroll-background 
{
    0% { background-position: 0 0; } /* Start the animation with the initial position of the background */
    100% { background-position: 100% 2300%; } /* Move the background to the left by 100% of its width */
}

.poster
{
    position: relative;
    transition: .35s ease-in-out;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);
    border-radius: 30px;
    background-repeat: round;
    width: 300px;
    height: 300px;
    margin: 65px;
    display: inline-block;
    transform: scale(100%) rotation(0deg);
}

.poster:hover
{
    /*position: relative;
    transform: perspective(900px) rotateX(15deg);
    animation-name: shine;
    animation-duration: 200ms;
    background: var(--bg-image);
    background-repeat:round;*/
    
    transform: scale(120%) rotate(5deg);
}

:root
{
    --bg-image: url("https://img.itch.zone/aW1nLzY4ODA3NDQucG5n/315x250%23c/YWROrq.png");
    --max-size: 24px;
    --min-size: 24px;
    --max-margin: 20px;
    --min-margin: 20px;
}

@keyframes shine
{
    0% {
       
      background: linear-gradient(
        30deg, 
        hsla(260, 85%, 95%, 0.3) 0%, 
        hsla(0, 0%, 0%, 0) 25%), var(--bg-image);
      background-repeat:round;
    }
  
    25% {
      background: linear-gradient(
        30deg, 
        hsla(0, 0%, 0%, 0) 0%, 
        hsla(260, 85%, 95%, 0.3) 25%, 
        hsla(0, 0%, 0%, 0) 50%), var(--bg-image);
        background-repeat: round;
    }
  
    50% {

        background: linear-gradient(
        30deg,
        hsla(0, 0%, 0%, 0) 0%, 
        hsla(260, 85%, 95%, 0.3) 50%, 
        hsla(0, 0%, 0%, 0) 75%), var(--bg-image);
        background-repeat: round;
    }
  
    75% {

      background: linear-gradient(
        30deg, 
        hsla(0, 0%, 0%, 0) 0%, 
        hsla(262, 85%, 95%, 0.3) 75%, 
        hsla(0, 0%, 0%, 0) 100%), var(--bg-image);
        background-repeat: round;
    }
  
    99% {
        
      background: linear-gradient(
        30deg, 
        hsla(0, 0%, 0%, 0) 0%, 
        hsla(0, 0%, 100%, 0.2) 100%), var(--bg-image);
        background-repeat: round;
    }

    99% {
        
        background: var(--bg-image);
          background-repeat: round;
      }
}
  

.hover-grow
{
    transition: .15s linear;
}

.hover-grow:hover
{
    transform: scale(1.2);
}

.devlogSelect
{
  transition: .25s;

  width: 100%;
  height: auto;
  min-width:300px;
  min-height:100px;
  max-height: 1000px;

  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
 
  background-color: rgba(4, 4, 4, 0.6);
  border-radius: 20px;
  margin: auto;
  margin-bottom: 25px;
  padding: 10px;
  align-items: center;
  border: 2px solid rgba(4, 4, 4, 0);
  box-shadow: 5px 5px 5px rgba(51, 51, 51, 0.147);
  display: flex;
  justify-content: flex-end;
}

.devlogSelect:hover
{
  transition: .25s;

  transform: translate(-50%, 0) perspective(2000px) rotateY(5deg) rotateX(5deg) rotateZ(-1deg);
  background-color: rgba(13, 13, 13, 0.6);
  box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.147);
  border: 3px solid rgba(0, 0, 0, 0.6);
}

.devlogText
{
  font-family: 'Raleway', sans-serif;
  font: bold;
  font-weight: 200;
  font-size: 24px;
}

.blogMainText
{
  font-size: var(--max-size); 
  margin-left: var(--max-margin); 
  margin-right: var(--max-margin);
  
  font-family: 'Raleway', sans-serif;
  font: bold;
  font-weight: 200;
  color: white;
  text-align:justify;
  text-shadow: 3px 3px 4px black;
  margin: 20px;
}

.blogSeries
{
  font-size: var(--max-size); 
  margin-left: var(--max-margin); 
  margin-right: var(--max-margin);
  
  font-family: 'Sigmar', sans-serif;
  color: white;
  text-align:center;
  justify-self: center;
  text-shadow: 4px 4px 6px rgba(130, 130, 130, 0.907);
  margin: 20px;
}

.blogTitle
{
  font-size: var(--max-size); 

  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: var(--max-margin); 
  margin-right: var(--max-margin);

  font-family: 'Raleway', sans-serif;
  font: bold; font-weight: 800;
  color: white;
  text-align:center;
  text-shadow: 3px 3px 4px black;
  
}

.variableSizeDiv
{
  width: var(--max-percentaje-size);
}

.variableFontSize
{
  font-size: var(--max-size); 
}

.variableFontSize2
{
  font-size: var(--max-size); 
}

.variableSizeImage
{
  width: var(--max-width);
  height: var(--max-height);
}

.variableMargin
{
  margin-left: var(--max-margin); 
  margin-right: var(--max-margin);
}

@media screen and (orientation: portrait)
{
  .blogMainText
  {
    font-size: var(--min-size); 
    margin-left: var(--min-margin); 
    margin-right: var(--min-margin); 
  }
  .blogSeries
  {
    font-size: var(--min-size); 
    margin-left: var(--min-margin); 
    margin-right: var(--min-margin); 
  }
  .blogTitle
  {
    font-size: var(--min-size); 
    margin-left: var(--min-margin); 
    margin-right: var(--min-margin); 
  }
  .variableSizeDiv
  {
    width: var(--min-percentaje-size);
  }
  .variableFontSize
  {
    font-size: var(--min-size); 
  }
  .variableSizeImage
  {
    width: var(--min-width);
    height: var(--min-height);
  }
  .variableMargin
  {
    margin-left: var(--min-margin); 
    margin-right: var(--min-margin);
  }
}

.variableUnderlined
{
  border-bottom: 2px solid rgba(0, 0, 0, 0);
}

@media screen and (orientation: portrait)
{
  .poster
  {
    position: relative;
    transition: .25s linear;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    background-repeat: round;
    width: 80px;
    height: 80px;
    margin: 3px;
    display: inline-block;
    transform: scale(100%) rotate(0deg);
  }
  
  .poster:hover
    {
        transform: scale(100%) rotate(0deg);
    }
}

@media screen and (max-width: 750px)
{
  .poster
  {
    position: relative;
    transition: .25s linear;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    background-repeat: round;
    width: 130px;
    height: 130px;
    margin: 5px;
    display: inline-block;
    transform: scale(100%) rotate(0deg);
  }
  
  .poster:hover
    {
        transform: scale(100%) rotate(0deg);
    }
}

@media screen and (max-width: 992px)
{
  .variableUnderlined
  {
    border-bottom: 2px solid rgba(0, 0, 0, 0.4);
  }
  .variableFontSize2
  {
    font-size: var(--min-size); 
  }
}

.quote
{
  width:95%;
  background-color: rgba(255, 255, 255, 0.114);
  border-radius: 10px;
  margin: auto;
  margin-top: 70px;
  margin-bottom: 70px;
  display: flex;
}

.pic
{
  display: flex;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  border-radius: 20px;
  box-shadow: 7px 7px 6px rgba(0, 0, 0, 0.5);
}

.blogCommentsContainer
{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(8px);

  transition: .3s;
}

.blogComments
{
  width: 95%;
  height: auto;
  opacity: 1;
  background-color: rgba(15, 15, 15, 0.4);
  border-radius: 40px;
  box-shadow: inset 5px 5px 7px rgba(0, 0, 0, 0.7);
  margin: auto;
  border: 2px solid rgb(37, 37, 37);
  padding: 6px;
  display: flex;
  flex-direction: column;
  position: fixed;
  display: flex;
  flex-direction: column;
  transition: .3s;
}


.usernameTextarea
{
  width: 95%;
  max-width: 600px;
  height: 70px;
  margin: 10px;
  border-radius: 12px;
  border: 2px solid black;
  box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.7);
  background-color: rgb(20, 20, 20);
  resize: none;
  padding: 15px;

  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  color: white;
  text-align:justify;
  text-shadow: 3px 3px 4px black;
  font-size: 20px;
  outline: none;
  
  transition: .2s;
}

.usernameTextarea:focus
{
  border: 2px solid #9b9b9b;
  outline: none;

  transition: .2s;
}

.commentsTextarea
{
  width: 98%;
  height: 250px;
  margin-left: 10px;
  border-radius: 12px;
  border: 2px solid black;
  box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.7);
  background-color: rgb(20, 20, 20);
  resize: none;
  padding: 15px;
  padding-bottom: 200px;

  font-family: 'Raleway', sans-serif;
  font-weight: 200;
  color: white;
  text-align:justify;
  text-shadow: 3px 3px 4px black;
  font-size: 20px;
  outline: none;
  
  transition: .2s;
}

.commentsTextarea:focus
{
  border: 2px solid #9b9b9b;
  outline: none;

  transition: .2s;
}

.enviarComentario
{
  width: auto;
  height: auto;
  
  padding-top: 8px;
  padding-bottom: 8px;
  
  transition: .3s;

  margin: 10px;
  align-self:flex-end;
  margin-left: 10px;
  border-radius: 12px;
  border: 2px solid black;
  box-shadow: inset -3px -3px 2px rgba(0, 0, 0, 0.4);
  background-color: rgb(22, 22, 22);
}

.enviarComentario:hover
{
  background-color: rgb(33, 33, 33);
  text-decoration: underline white;
}