/*
  ================================================
  Responsive "Square" (now Rectangle) Stylesheet
  ================================================
  HOW TO CHANGE ASPECT RATIO:
  --------------------------------
  1. Go to the ":root" section below.
  2. Change the value of --aspect-ratio.
     Example:
       • 1 / 1  → perfect square
       • 4 / 3  → classic photo ratio
       • 16 / 9 → widescreen rectangle
       • 3 / 4  → tall portrait shape
  --------------------------------
*/

:root {
  --squere-size: 80;               /* Base size multiplier */
  --aspect-ratio: 4 / 3;           /* 👈 Change this to adjust shape */
  --translate-y: translateY(-15%); /* Vertical adjustment */

  /* Convenience variables for sizing */
  --square-size-vh: calc(var(--squere-size) * 1vh);
  --square-size-vw: calc(var(--squere-size) * 1vw);
}

/* Adjust on larger screens */
@media (min-width: 1024px) {
  :root {
    --squere-size: 60;
    --translate-y: translateY(0);
  }
}

/* Basic resets */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

/* Center the square/rectangle on screen */
body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: white;
  font-family: monospace;
  padding: 20px;
}

/* Wrapper to prevent layout shift */
a {
  flex-shrink: 0;
}

/* Main visual element (now with adjustable aspect ratio) */
.square {
  width: min(var(--square-size-vw), var(--square-size-vh));
  aspect-ratio: var(--aspect-ratio); /* 👈 Controls shape ratio */
  transform: var(--translate-y);
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

/* Image version */
.square > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text version */
.square.text {
  padding: 2rem;
  font-size: 1rem;
  text-align: center;
}

.square.text a {
  text-decoration: none;
  color: white;
}

/* General link styles */
a,
.link {
  text-decoration: none;
  color: black;
}

.underline {
  text-decoration: underline !important;
}

/* Anything positioned below the main square */
.below-square {
  position: relative;
  width: min(var(--square-size-vw), var(--square-size-vh));
  aspect-ratio: var(--aspect-ratio); /* Keeps the same ratio */
  max-width: 100vw;
  top: 0;
  left: 0;
}

.below-square > * {
  top: 12px;
  position: absolute;
}

/* Shared footer styling - prevents layout shift */
#shared-footer {
  margin-top: 8px;
  width: min(var(--square-size-vw), var(--square-size-vh));
  max-width: 90vw;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease-in;
  /* Fixed height prevents layout shift */
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

#shared-footer.loaded {
  opacity: 1;
}

#shared-footer p {
  margin: 8px 0;
  line-height: 1.5;
  font-size: 0.9rem;
  white-space: nowrap;
}

#shared-footer a {
  color: inherit;
  text-decoration: underline;
}

/* More spacing on larger screens */
@media (min-width: 1024px) {
  #shared-footer {
    margin-top: 20px;
  }
  
  #shared-footer p {
    font-size: 1rem;
  }
}