/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: black;
  color: #6f6bff;
  font-family: Gothic;
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.link-list {
  text-align: center; /* centers the whole line */
  font-family: Arial, sans-serif;
  margin-top: 20px;
  font-size: 18px;
}

.link-list a {
  font-size: 2rem;
  text-decoration: none; /* remove underline */
  color: #3323c4;       /* link color */
  margin: 0 5px;        /* small spacing */
}

.link-list a:hover {
  text-decoration: underline; /* optional hover effect */
}

.separator {
  font-size: 2rem;
  margin: 0 5px; /* spacing around -+- */
  color: #000dff;   /* color of the separator */
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.link-list2 {
  text-align: center; /* centers the whole line */
  font-family: Arial, sans-serif;
  margin-top: 20px;
  font-size: 18px;
}

.link-list2 a{
  font-size: 1.6rem;
  text-decoration: none; /* remove underline */
  color: #3323c4;       /* link color */
  margin: 0 5px;        /* small spacing */
}

.link-list2 a:hover {
  text-decoration: underline; /* optional hover effect */
}

.separator2 {
  font-size: 1.5rem;
  margin: 0 5px; /* spacing around -+- */
  color: #000dff;   /* color of the separator */
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
h1 {
    font-size: 4rem;
  font-family: 'UnifrakturCook', serif;
  text-align: center;
  z-index:2
}
p {
    font-size: 1rem;
  font-family: 'UnifrakturCook', serif;
  text-align: center;
  z-index:1
}
.text-box {
  font-size: 1.5rem;
  max-width: 800px;   /* sets maximum width */
  width: 100%;         /* optional: relative width */
  margin: 0 auto;     /* centers the box horizontally */
  text-align: center; /* optional: center the text inside */
  line-height: 1.5;   /* optional: spacing between lines */
}
.text-with-gifs {
  display: flex;
  align-items: center;      /* vertical alignment */
  justify-content: center;  /* center everything */
  gap: 10px;                /* space between items */
  margin: 20px 0;
}

.center-text {
  white-space: nowrap;      /* keeps text on one line */
  font-size: 18px;
}

.side-gif2{
  width: 300px;             /* base size */
  height: auto;
}
@media (max-width: 600px) {
  .side-gif2{
    max-width: 10%;
    z-index: 2;
  }
}


.caption2{
   color: #a232a8; 
    text-align:center;
  margin-top: 8px;
  font-size: 3rem;
  opacity: 0.85;
  display: block;
    margin: 0 auto;
}

.images1{
  text-align:center;
  display:block;
  margin: 0 auto;
  max-width: 30%;
}

.images2{
  text-align:center;
  display:block;
  margin: 0 auto;
  max-width: 30%;
  width: 30%;
}

.images3{
  text-align:center;
  display:block;
  margin: 0 auto;
  max-width: 300%;
}

.images4{
  text-align:center;
  display:block;
  margin: 0 auto;
  max-width: 20%;
  width: 20%;
}

.images5{
  text-align:center;
  display:block;
  margin: 0 auto;
  max-width: 30%;
  width: 30%;
}

@media(max-width: 600px){
  
  .images2{
  text-align:center;
  display:block;
  margin: 0 auto;
  width: 90%;
  max-width: 90%;
}
}
@media(max-width: 600px){
  
.images1{
  text-align:center;
  display:block;
  margin: 0 auto;
  max-width: 70%;
  width: 70%;
}
}
@media(max-width: 600px){
  
.images4{
  text-align:center;
  display:block;
  margin: 0 auto;
  max-width: 50%;
  width: 50%;
}
}

@media(max-width: 600px){
  
  .images5{
  text-align:center;
  display:block;
  margin: 0 auto;
  max-width: 90%;
  width: 90%;
}
}

.header-container {
  position: relative;
  display: flex;
  justify-content: center;   /* centers header image */
  align-items: center;       /* vertical alignment */
  margin-bottom: 20px;
}
.header-image {
  text-align: center;
  display: block;
  margin: 0 auto;      /* centers image */
  max-width: 47%;     /* responsive */
   z-index:1;
}
.side-gif {
  width: 30%;               /* adjust size of GIFs */
  height: auto;
  position: absolute;        /* allows floating left/right */
  top: 50%;                  /* vertically center */
  transform: translateY(-40%);
  z-index: 0;                /* behind header */
}

@media (max-width: 600px) {
  .side-gif {
    max-width: 30%;
    z-index: 2;
  }
}

.side-gif.left {
  left: -2px;               /* space to left of header */
}

.side-gif.right {
  right: -2px;              /* space to right of header */
}

@media (max-width: 600px) {
  .side-gif.left {
    left: -5px;
  }

  .side-gif.right {
    right: -5px;
  }
}

/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
.media-block {
  display: flex;
  align-items: center;      /* vertical centering */
  justify-content: center;  /* center the whole block */
  gap: 24px;
  width: fit-content;       /* shrink container to content */
  margin: 40px auto;        /* center horizontally */
}

.media-block img {
  max-width: 400px;
  height: 400px;
  max-height: 400px;
  object-fit: cover;
  display: block;
}



.media-text {
  display: flex;
  flex-direction: column; /* stack text vertically */
  gap: 4px;               /* spacing between lines */
  text-align: left;
}

.line-1 {
  font-size: 1.8rem;

}

.line-2 {
  font-size: 1.5rem;
  opacity: 0.8;
    font-weight: bold;
}

.line-3 {
  font-size: 1.1rem;
  opacity: 0.7;
}

@media (max-width: 600px) {
  .media-block {
    flex-direction: column; /* stack image above text */
    text-align: center;     /* center text on mobile */
  }
  
  .media-block img {
  max-width: 300px;
  height: 300px;
  max-height: 300px;
}

  .media-text {
    max-width: 90%;          /* shrink text box on small screens */
  }
}
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/


.link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 144px));
  column-gap: 300px;       /* horizontal spacing */
  grid-row-gap: 90px;     /* vertical spacing (only matters if multiple rows) */
  justify-content: center;
  margin: 10px 0;
}

.link-grid a {
  display: flex;
  flex-direction: column; /* image on top, caption below */
  align-items: center;    /* center both */
  text-align: center;
  text-decoration: none;
}

.link-grid a img {
  max-width: 344px;
  width: 300%;
  display: block;
  transition: transform 0.2s;
}

.link-grid a:hover img {
  transform: scale(1.05);
}

.caption {
  margin-top: 8px;
  font-size: 2rem;
  opacity: 0.85;
  display: block;
}

/* Mobile responsiveness */

@media (max-width: 600px) {


.link-grid {
  display: grid;
  grid-template-columns: repeat(2, 144px) !important;
  column-gap: 60px !important;       /* horizontal spacing */
  grid-row-gap: 80px !important;     /* vertical spacing (only matters if multiple rows) */
  justify-content: center;
  margin: 10px 0;
}

.link-grid a img {
  max-width: 177px !important;
  width: 177% !important;
  display: block;
  transition: transform 0.2s;
}


.link-grid a:hover img {
  transform: scale(1.25);

}

.caption {
  margin-top: 90px;
  font-size: 1rem;
  opacity: 0.85;
  display: block;
}
}
/* Hover effect (optional but nice) 
.grid-item:hover img {
  transform: scale(1.03);
  transition: transform 0.2s ease;
}

.grid-item:hover .caption {
  opacity: 1;
}

/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/

/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/


.center-gif-link {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
  height: 100vh;           /* full viewport height */
  text-decoration: none;   /* remove underline if any */
}

.center-gif {
  transform: scale(3);     /* 3x size */
  display: block;
  max-width: 100%;         /* prevent overflow on small screens */
  height: auto;
  transition: transform 0.2s;
}

.center-gif-link:hover .center-gif {
  transform: scale(1.5);/* optional hover effect */
}

@media(max-width: 600px) {

.center-gif {
  transform: scale(1);/* 3x size */
  display: block;
  max-width: 200%;        /* prevent overflow on small screens */
  height: auto;
  transition: transform 0.2s;
}



}