style.css

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital@0;1&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: 0;
}

body {
  font-family: "Nunito Sans";
  font-size: 16px;
  line-height: 1.5;

  background-color: #1A1E39;
  color: #fff;
  margin: 80px auto 48px auto;
  max-width: 1120px;
  width: auto;
}

img {
  width: 100%;
  height: auto;
}

header img {
  width: 400px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h1, nav, footer {
  font-family: "Josefin Sans";
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
}

h1 span {
  color: #f4bcbb;
}

h1 span.green {
  color: #077644;
}

h2 {
  font-family: "Josefin Sans";
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 16px;
}

a {
  color: #fff;
  text-decoration: none;
  margin: 0 0 0 32px;
  transition: color 0.3s, border-bottom 0.3s;
  border-bottom: 2px solid transparent;
}

a:hover, a.selected {
  color: #f4bcbb;
  border-bottom: 2px solid #f4bcbb;
}

section {
margin: 80px 0 80px 0;

display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 32px 32px;
grid-auto-flow: dense;
}

h1 {
  opacity: 0; /* Start hidden */
  animation: slideDown 1.5s ease forwards; /* Apply fadeIn animation */
}

section h1 {
  grid-column: 2 / span 10;
  text-align: center;
}

section.project div.artwork{
  width: 100%; /* Ensures images scale within their grid area */
  height: 100%; /* Keeps image height consistent with grid rows */
  object-fit: cover; /* Ensures images maintain aspect ratio within their grid space */
  grid-column: 1 / span 8;
  text-align: center;
  
}

section.project div.description {
  grid-column: 9 / span 4;
}

section.project img {
  max-height: 640px;
}

section.project-alt div.artwork{
  width: 100%; /* Ensures images scale within their grid area */
  height: 100%; /* Keeps image height consistent with grid rows */
  object-fit: cover; /* Ensures images maintain aspect ratio within their grid space */
  grid-column: 5 / span 8;
}

section.project-alt div.description {
  grid-column: 1 / span 4;
}

section.about div.photo {
  width: 100%; /* Ensures images scale within their grid area */
  height: 100%; /* Keeps image height consistent with grid rows */
  object-fit: cover; /* Ensures images maintain aspect ratio within their grid space */
  grid-column: 1 / span 5;
}

section.about div.description {
  grid-column: 7 / span 5;
}

section.about h1 {
  margin: 0;
  text-align: left;
}

section.about p {
  margin: 16px 0 16px 0;
}

section.contact div.form {
  grid-column: 4 / span 6;
}

section.contact h1 {
  text-align: left;
}

section.alice-layout img{
  grid-column: 1 / span 12;
}

section.alice-layout h2{
  grid-column: 1 / span 4;
}

section.alice-layout div{
  grid-column: 7 / span 6;
}

/* section.grid-layout div {
  grid-column: span 6;
} */

/* video {
  width: 100%;
} */

section.project img {
  border-radius: 8px;
}

section.about img {
  border-radius: 8px;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

footer a {
  margin: 0 16px 0 16px;
}

input, textarea {
  width: 100%;
  background-color: #111118;
  border: 2px solid #fff;
  border-radius: 5px;
  color: #fff;
  padding: 8px 16px 8px 16px;
}

label {
  display: block;
  margin: 16px 0 16px 0;
}

textarea {
  height: 320px;
}

button {
  background-color: #f4bcbb;
  border: none;
  font-size: 24px;
  font-family: "Josefin Sans";
  padding: 8px 16px 8px 16px;
  border-radius: 5px;
}

input:focus, textarea:focus {
  border: 2px solid #f4bcbb;
  outline: none;
}

@media (max-width: 1248px) {
  body {
    width: auto;
    margin: 80px 64px 48px 64px;
  }

  h1, nav, footer {
    font-size: 24px;
  }
}

@media (max-width: 920px) {
 header {
  flex-direction: column;
 }

 nav {
  margin: 24px 0 0 0;
 }

 header img{
  max-width: 300px;
 }

 header a {
  margin: 0 16px 0 16px;
 }
}

@media (max-width: 660px) {
  nav a {
    margin: 8px;
  }
  section {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 24px;
    margin: 64px 0 64px 0;
  }

  section h1, 
  section.project div.artwork, 
  section.project div.description
  section.about div.photo,
  section.about div.description,
  section.contact div.form{
    grid-column: 1 / span 4;
  }

  section.project div.description {
    grid-column: 1 / span 4;
}
}

@media (max-width: 500px) {
  body {
    margin: 48px 32px 32px 32px;
  }

  header img {
    width: 100%;
  }

  nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/* Keyframes for Fade-In */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Zoom-in On-hover images */
.artwork img {
  transition: transform 0.4s ease;
}

.artwork:hover img {
  transform: scale(1.05);
}

/* Bounce on-hover on the footer icons */
footer a {
  display: inline-block;
  transition: transform 0.3s ease;
}

footer a:hover {
  transform: translateY(-5px);
}

/* Entrance animation for Header */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

header {
  animation: slideDown 0.8s ease forwards;
}

.description h2 {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 0.5s; /* Adds delay */
}


/* Fade-in animation and zoom for images as the section enter the viewport */
/* Section Styling */
/* Initial hidden state */
.project {
  opacity: 0;
  transform: scale(0.9); /* Slightly smaller scale for zoom-in effect */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Class to apply when in view */
.project.in-view {
  opacity: 1;
  transform: scale(1); /* Zooms in to original size */
}