/* Basic page styles */
body {
  background-color: white;
  color: black;
  font-family: "Times New Roman", Times, serif;
background-image: 
    url('index_images/graffititag.png'); /* your tag */
  background-repeat: no-repeat;           /* don’t tile it */
  background-position: bottom right;      /* stick it in the corner */
  background-size: 100px auto;            /* adjust size, keeps proportions */
}
a {
  color: black;              /* normal text color */
  text-decoration: none;     /* removes underline */
}

a:hover {
  text-decoration: underline; /* underline only on hover */
  color: black;               /* stays black */
}

a:visited {
  color: black;               /* prevents purple links */
}
/* Grid container for the squares */
.squares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.square {
  position: relative;          /* for positioning title on top */
  width: 100%;
  aspect-ratio: 1/1;           /* keeps it square */
  overflow: hidden;
  text-decoration: none;
  color: black;
  display: flex;
  align-items: flex-end;       /* title sticks to bottom */
  justify-content: center;
  transition: transform 0.3s;  /* for hover zoom */
}

.square img {
  position: absolute;          /* fills the whole square */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;                  /* sits behind title */
}

.square-title {
  position: relative;
  z-index: 2;
  background-color: rgba(255,255,255,0.7);
  padding: 5px 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-weight: bold;
}

.square:hover {
  transform: scale(1.05);      /* subtle zoom on hover */
}


.corner-tag {
  position: fixed;      /* sticks in the corner even if you scroll */
  bottom: 20px;         /* distance from bottom */
  right: 20px;          /* distance from right */
  width: 100px;         /* or whatever size looks good */
  height: auto;         /* keeps proportions */
  z-index: 100;         /* so it floats above other content */
  opacity: 0.8;         /* optional: slightly transparent */
}

.turntable {
  perspective: 1000px; /* gives the 3D effect */
  width: 200px;        /* size of the cube */
  height: 200px;
  margin: 50px auto;   /* centers it */
}

.box-3d {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotateCube 10s infinite linear; /* rotates continuously */
}

.box-3d img {
  position: absolute;
  width: 200px;
  height: 200px;
  object-fit: cover;
}

/* Position each face */
.front  { transform: rotateY(0deg) translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

/* Keyframes for rotation */
@keyframes rotateCube {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to   { transform: rotateX(360deg) rotateY(360deg); }
}