* {
  box-sizing: border-box;
}
body {
  background-image: url("../Background.png");   
  background-repeat: repeat;       
  background-size: auto;
  letter-spacing: .5px;
  margin: auto;   
  max-width: 950px;          
}

#contenedor {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch; 
    width: 100%;   
    gap: 20px;     
   
    margin: auto;
    
}

#flex-center {
       
    
    background-color: rgb(234, 218, 214);
    display: flex;
    flex-direction: column;       
    justify-content: flex-start;  
    align-items: center;          
    
    border: 5px solid black;
    border-radius: 5px;
    height: 1100px; 
    flex: 2;   
                
    font-family: monospace;
    padding: 15px;
    
    
}

#flex-left, 
#flex-right {
    flex: 1;   
   
    
    background-color: rgb(234, 218, 214);
    display: flex;
    flex-direction: column;       
    justify-content: flex-start;  
    align-items: center;          
    
    padding: 15px;
    border: 5px solid black;
    height: 1100px; 
                    
    border-radius: 5px;
    
    font-family: monospace;
}

#flex-left h3, #flex-right h3 {
    color: rgb(64, 52, 45);
    font-size: 1.8em;
    text-shadow: 2px 8px 4px rgba(0,0,0,0.2);

    font-family: 'Isaac', sans-serif;
    text-align: center;
    overflow: visible;
    margin: 1px 0
}
#flex-center h3 {
    color: rgb(64, 52, 45);
    font-size: 1.8em;
    text-shadow: 2px 8px 4px rgba(0,0,0,0.2);
    font-family: 'Isaac', sans-serif;
    text-align: center;
    margin: 1px 0
    

    
    
}
 #frase {
      color: rgb(64, 52, 45);
      font-size: 1.5em;
      text-shadow: 2px 8px 4px rgba(0,0,0,0.2);
      font-family: 'TeamMeatFont12', sans-serif;
      font-weight: 500;
      line-height: 1.4em;
      letter-spacing: -1px;
      text-align: center; 
    }
#presentacion {
  color: rgb(64, 52, 45);
    font-size: 1.5em;
    text-shadow: 2px 8px 4px rgba(0,0,0,0.2);
    font-family: 'TeamMeatFont12', sans-serif;
    text-align: center;
    font-weight: 500;
    

}
#razon {
  color: rgb(64, 52, 45);
      font-size: 1.5em;
      text-shadow: 2px 8px 4px rgba(0,0,0,0.2);
      font-family: 'TeamMeatFont12', sans-serif;
      font-weight: 500;
      line-height: 1.4em;
      letter-spacing: -1px;
      text-align: center; 

}



#flex-left p,
#flex-right p {
    color: rgb(64, 52, 45);
    font-size: 1.5em;
    text-shadow: 2px 8px 4px rgba(0,0,0,0.2);
    font-family: 'TeamMeatFont12', sans-serif;
    text-align: center;
    font-weight: 500;
    
}


#navbar {
    margin-bottom: 20px;
    height: 40px;
    background-color: rgb(234, 218, 214);
    width: 100%;
    border-radius: 5px;
   
}
#navbar ul {
    
    display: flex;
    padding: 7px;
    margin: 0;
    list-style-type: none;
    justify-content: space-around;
    border: 5px solid black;
    
    

}
#header {
  
    width: 100%;
    
    background-color: rgb(234, 218, 214);
    height: 150px;
    background-size: 100%;
    margin-bottom: 20px;
    margin-top: 20px;
    border-radius: 3px;
    border: 5px solid black;

    display: flex;
    justify-content: space-between;   
    gap: 10px;
    align-items: flex-start;   
    
    
    


}
#left-header, #center-header, #right-header {
  flex: 1;              
  display: flex;        
  justify-content: center;
  align-items: center;
  text-align: center;   
}

#center-header p {
    color: rgb(64, 52, 45);
    font-size: 3.5em;
    text-shadow: 2px 8px 4px rgba(0,0,0,0.2);
    font-family: 'Isaac', sans-serif;
    text-align: center;
    margin: 40px 0;
    white-space: nowrap;

}

#center-header p span {
    display: inline-block;
    animation: wave 2s ease-in-out infinite;
}
#right-header img {
  width:32%;
  height: 32%;
  margin: 10px;
  
}
#left-header img {
  width:55%;
  height: 55%;
  margin: 10px;
  
}
#isaacBailando {
  max-width: 75%;   
  max-height: 75%;  
  height: auto;      
  width: auto;       
  object-fit: contain; 
}
#babyplumspinning {
  margin-top: 12px;
  margin-bottom: 12px;
  max-width: 100%;   
  max-height: 100%;  
  height: auto;      
  width: auto;       
  object-fit: contain; 

}
#isaacPC {
  margin-top: 18px;
  margin-bottom: 12px;
  max-width: 100%;   
  max-height: 100%;  
  height: auto;      
  width: auto;       
  object-fit: contain; 
}
#terrible {
  max-width: 100%;   
  max-height: 100%;  
  height: auto;      
  width: auto;       
  object-fit: contain; 
}

.cajita-scroll {
  width: 200px;       
  height: 150px;      
  border: 6px solid rgb(64, 52, 45);  
  
  
  

  border-radius: 8px;
  padding: 8px;
  background-color: rgb(234, 218, 214);
  overflow-y: auto;   
  overflow-x: hidden; 
}
#pelis {
  padding-left: 11px;
  
  color: rgb(64, 52, 45);
      font-size: 1.2em;
      text-shadow: 2px 5px 4px rgba(0,0,0,0.2);
      font-family: 'TeamMeatFont12', sans-serif;
      font-weight: 500;
      line-height: 1.4em;
      letter-spacing: -1px;
      text-align: center; 
      
      
}
#titulo-pelis {
  margin-top: 2px;
}

@font-face {
  font-family: 'Isaac';
  src: url('../upheaval-tt-brk.upheaval-tt-brk.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TeamMeatFont12';
  src: url('../IsaacGame.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
#center-header p span:nth-child(1) { animation-delay: 0s; }
#center-header p span:nth-child(2) { animation-delay: 0.2s; }
#center-header p span:nth-child(3) { animation-delay: 0.4s; } 
#center-header p span:nth-child(4) { animation-delay: 0.6s; }
#center-header p span:nth-child(5) { animation-delay: 0.8s; }
#center-header p span:nth-child(6) { animation-delay: 1s; }
#center-header p span:nth-child(7) { animation-delay: 1.2s; }
#center-header p span:nth-child(8) { animation-delay: 1.4s; }
#center-header p span:nth-child(9) { animation-delay: 1.6s; }
#center-header p span:nth-child(10) { animation-delay: 1.8s; }

@keyframes wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
#frase:hover {
      animation: glitch .3s linear infinite;
      cursor: pointer;
    }

    @keyframes glitch {
      0%   { transform: translate(0); }
      20%  { transform: translate(-2px, 2px); }
      40%  { transform: translate(-2px, -2px); }
      60%  { transform: translate(2px, 2px); }
      80%  { transform: translate(2px, -2px); }
      100% { transform: translate(0); }
    }

.carousel-container {
  width: 100%;
  padding-block: 0px 32px;
  margin: 16px 32px;
  overflow-x: auto;
  display: flex;
  height: 30%;
  gap: 8px;
  align-items: center;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
}

.carousel-container::-webkit-scrollbar {
  height: 20px;
  width: calc(100% - 48px);
}

.carousel-container::-webkit-scrollbar-track {
  background: #b1b3b399;
}

.carousel-container::-webkit-scrollbar-thumb {
  background: rgb(64, 52, 45);
}

.carousel-container::-webkit-scrollbar-track-piece:start {
  background: rgb(64, 52, 45);;
}

.carousel-slide {
  flex: 1 0 100%;
  aspect-ratio: 1;
  flex-flow: column nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #bae;
  scroll-snap-align: center;
}

@media (max-width: 600px) {
  .carousel-slide {
    flex: 1 0 90%;
  }
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}