/* icons */
.icon {
  border-radius: 50%;
}

/* body background */
body {
  margin: 0;
  padding: 0;
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
              url(photos/lilychouchou.webp) center/cover no-repeat fixed;
}

/* animations */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* headings */
h1, h2 {
  text-align: center;
  text-transform: lowercase;
}

/* welcome text */
.welcomeText {
  padding-top: 15px;
  font-size: clamp(32px, 5vw, 70px); /* scales with screen size */
  margin-top: 0px;
  margin-bottom: 22px;
  color: white;
  text-shadow: 2px 2px 2px black;
  font-family: Zeyada;
}

/* grid for main content */
.grid-container {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* responsive grid */
  gap: clamp(20px, 8vw, 120px); /* min 20px, max 125px */
  max-width: 1400px; /* keeps content centered on big screens */
  width: 100%;
}

.grid-item {
  margin-left: auto;
  margin-right: auto;
}

/* portfolio layout */
.portfolioMain {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
}

.portfolios {
  padding: 20px; /* spacing between portfolio sections */
}

.portfolioText {
  font-family: "Scope One", serif;
  color: white;
  text-shadow: 1px 1px 1px black;
  margin-bottom: 30px;
  font-size: clamp(20px, 2vw, 36px); /* scales text smoothly */
  font-weight: 900;
  text-align: center;
}

/* image styles */
.imageCustomization,
.modelCustomization {
  border-radius: 15%;
  border: 1px solid black;
  width: clamp(200px, 20vw, 350px); /* scales with screen */
  transition: filter 0.5s, border-radius 1s;
}

.imageCustomization:hover,
.modelCustomization:hover {
  cursor: pointer;
  border-radius: 30%;
  filter: invert(70%);
}

/* contact section */
.contactMain {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px auto 0;
  max-width: 1200px;
}

.contactDiv {
  text-align: center;
  padding: 20px 30px; /* spacing between contact blocks */
  color: black;
}

.contactText {
  margin-top: 8px;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 900;
  color: white;
  text-shadow: 1px 1px 1px black;
  font-family: "Scope One", serif;
}

.contactImage {
  width: 80px;
  height: auto;
  border-radius: 10px;
  transition: transform 0.3s ease, background-color 1s, border-radius 1s;
}

.contactImage:hover {
  cursor: pointer;
  animation: spin 10s linear infinite;
}

/* extra styles */
.strike {
  text-decoration: line-through;
  text-decoration-color: red;
  color: white;
  font-style: italic;
}

.hidden {
  display: none;
}

#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #444;
  background-color: #fff;
  padding: 10px;
  z-index: 1000;
}

#popup img {
  max-width: 90vw;
  max-height: 90vh;
  display: block;
}

/* responsive tweaks */
@media (max-width: 1050px) {
  .contactDiv {
    padding: 20px;
  }
}

@media (max-width: 720px) {
  .grid-container {
    grid-template-columns: 1fr; /* single column on small screens */
  }
  .contactDiv {
    padding: 10px;
  }
}

.grid-container {
  gap: clamp(20px, 5vw, 125px);
  max-width: clamp(1000px, 90%, 1800px);
}

.welcomeText {
  font-size: clamp(32px, 5vw, 80px);
}

.portfolioText {
  font-size: clamp(20px, 2vw, 40px);
}

.imageCustomization,
.modelCustomization {
  width: clamp(200px, 20vw, 400px);
}

.contactMain {
  margin-top: clamp(20px, 8vw, 100px);
}