:root {
  --main-info-padding: 25px; 
  --second-info-padding: 14px; /* Text padding -11px */
} 


@keyframes color-cycle {
            0% { 
                background-color: #FFFCFC; 
            }
            33.33% { 
                background-color: #FFFCFC; 
            }
            66.66% { 
                background-color: #FDADD5; 
            }
            100% { 
                background-color: #FFFCFC;
            }
        }



@font-face {
  font-family: 'Nunito Extra Bold';
  src: url('http://squashcomics.de/font/Nunito-ExtraBold.ttf')  format('truetype');
  font-weight: bold;
}

@font-face {
  font-family: 'Nunito Extra Bold Italic';
  src: url('http://squashcomics.de/font/Nunito-ExtraBoldItalic.ttf')  format('truetype');
  font-weight: italic;
}

    html,body{
        margin:0;
        padding:0;
        animation: color-cycle 60s ease-in-out infinite alternate;
        font-family:"Arial Rounded MT Bold", "Nunito Extra Bold", Arial, sans-serif;}
   
    h1{
        font-size: 60px;
        margin:35px 25px 5px 25px;
}



    main{
        /* 
        max-width:1200px;
        Changed! */
        margin:0 0;}

header {
    display: block; 
    margin: 15px 0 0 20px;
    text-align: left;
    max-width:1000px;
    gap: 10px; 
}

/* --- TOP MENU --- */
.top-menu {
    width: 100%;
    border-bottom: 4px solid #000000;
    background: #FFFCFC;
    margin: 0;
    padding: 0.5rem 0;
}

.top-menu ul {
    list-style: none;
    display: flex;
    justify-content: space-evenly;  /* distributes items evenly */
    align-items: center;
    margin: 0;
    padding: 0;
}

.top-menu li {
    margin: 0;
    padding: 0;
}

.top-menu a {
    text-decoration: none;
    color: black;
    font-family: "Arial Rounded MT Bold", "Nunito Extra Bold", Arial, sans-serif;;
    font-size: 1rem;
}

.top-menu a:hover {
    text-decoration: underline;
}

/* --- TOP MENU END --- */

#jelly_logo {
    position: absolute;
    height: 240px;
    top: 60px;
    right: 35px;
    margin: 0 0 35px 25px;
}

#squash_logo {
    
    height: 230px;
    margin: 25px 0 35px 25px;
}

    /* event layout */
    .event {
      display:flex;
      gap:2rem;
      align-items:stretch;
      padding: 0;
      background-color: #FFFCFC;  
 
    }

    /* full-width divider between events */
    .event + .event {
      border-top:5px solid #000;
      margin-top: 0;
      padding-bottom: 0;
    }


hr 
{
    height:5px;
    border-width:0;
    color:gray;
    background-color:black;
    margin: 0;
}

.poster {
      margin-left: 12px;
    }

.poster-block {
  display: flex;
    align-items: stretch;
  gap: 14px;
  
    
  /* Allow it to shrink/grow equally and set basis to 50% */
  flex: 1 1 40%;
  max-width: 40%; /* Ensure it doesn't exceed 50% */
    max-height: 50%;
    
}

/* vertical rotated date */
.event-date-vertical {
  writing-mode: vertical-rl;
  font-size: 60px;
  font-weight: 800;
  line-height: 1.1;
/* Remove these conflicting Flex properties: */
  /* display: flex; */
  /* align-items: flex-start; */
  /* justify-content: flex-start; */
  height: auto;  
  margin: 0;
  padding: var(--main-info-padding) 12px var(--main-info-padding) 18px;
  border-width: 5px;
  border-style: hidden solid hidden hidden;  
  background-color: lightpink;
}

/* vertical rotated date */
.event-location-vertical {
  writing-mode: vertical-rl;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
/* Remove these conflicting Flex properties: */
  /* display: flex; */
  /* align-items: flex-start; */
  /* justify-content: flex-start; */
  height: auto;  
  margin: 0;
  padding: var(--main-info-padding) 24px var(--main-info-padding) 35px;
  border-width: 5px;
  border-style: hidden hidden hidden solid;
    border-color: black;
  background-color: cornflowerblue;
  color: floralwhite;
}

/* ensure poster still aligns nicely */
.poster img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border: 3px solid black;
  border-radius: 2px;

  margin-top: var(--main-info-padding);
  margin-bottom: var(--main-info-padding);
  
}

.info {
  /* Set to grow/shrink equally with .poster-block, with a 50% basis */
  flex: 1 1 40%;
  /* Removed min-width to prevent overflow and ensure responsiveness */
    padding-top: var(--second-info-padding);
    
}

    .info h2{font-size:40px;margin:0 0 0.5rem;}
    .info .meta{font-weight:600;margin-bottom:0.8rem;color:#333;}
    .info p{margin:0.4rem 0;line-height:1.2;color:#222;}
    .meta small{display:block;font-weight:normal;color:#666;margin-top:0.4rem;}

.infotextblock {
    max-width: 420px;
    padding: 15px 0 var(--main-info-padding) 0;
    text-align: justify;
	text-align-last: none;
}


footer {
  /* 1. Make the footer a 'positioning context' */
  position: relative;
  
  /* 2. Center the main link ("See past events") */
  text-align: center;
  
  /* 3. Add some padding so it looks good */
  padding: 1.5rem 0;
  
  /* 4. Ensure it spans the full width */
  width: 100%;
}

.footer-center-link {
  /* This link is already centered by 'text-align: center' */
  /* You could add other styles here if you want */
  font-weight: bold;
}

.footer-corner-link {
  /* 1. Take this link out of the normal page flow */
  position: absolute;
  
  /* 2. Position it on the right side */
  right: 20px; /* (1.5rem from the right edge) */
  
  /* 3. Vertically center it */
  top: 50%;
  transform: translateY(-50%);
  
  /* 4. Make it small, as requested */
  font-size: 0.8rem;
  
  /* Optional: Make it a bit less prominent */
  color: #555;
}






    /* RESPONSIVE */
 @media (max-width: 880px) {
     
     header {
display: block; 
    margin: 15px 0 0 0;
    text-align: left;
    max-width:1200px;
    gap: 10px; 

  /* 2. Vertically centers the items (images) on the cross-axis */
  align-items: center;

  /* Optional: Horizontally centers the items */
  justify-content: center;
     }
     
h1{
        margin:15px 12px 0;
    font-size: 40px;
}    
     
.info h2{font-size:30px;margin:0 0 0.5rem;}
     
    #jelly_logo {
        width: 50%;
        height: auto;
}

#squash_logo {
        width: 40%;
        height: auto;
}
     
  .event {
    flex-direction: column;
    align-items: center;
    text-align: left;
    padding: 12px;
  }

  .poster-block {
    max-width: 100%;
flex-direction: column; 
  /* Align items to the start (left) for better text readability */
  align-items: flex-start; 
  /* Remove justify-content: center to keep elements left-aligned */
}
  

  .event-date-vertical {
    writing-mode: horizontal-tb;
    font-size: 55px;
    height: auto;
    border-style: hidden;
    padding: 4px 15px 0 0;
    background-color: inherit;
  }
     
     .event-location-vertical {
         display: none;
     }
         

     .poster {
      margin-left: 0;
    }
     
  .poster img {
    width: 100%;
    max-height: 500px;
    margin-top: 5px;
  }

  .info {
    width: 98%;
      padding: 0 0 0 0;
      margin: 0 15px 0 15px;
  }
}