* {
  box-sizing: border-box;
}

body {
  margin-top: 0;
  margin-left: 18rem;
  /* background-color: #fffff5; */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='16' height='16' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform=''%3E%3Crect width='100%25' height='100%25' fill='rgba(255, 255, 245,1)'/%3E%3Ccircle cx='23.09' cy='29.51' r='1' stroke-width='0' fill='rgba(255, 255, 245,1)' filter='url(%23filter-doodad-1)'/%3E%3Ccircle cx='11.91' cy='14.12' r='1' stroke-width='0' fill='rgba(255, 255, 245,1)' filter='url(%23filter-doodad-1)'/%3E%3Ccircle cx='30' cy='20' r='1' stroke-width='0' fill='rgba(255, 255, 245,1)' filter='url(%23filter-doodad-1)'/%3E%3Ccircle cx='30' cy='20' r='1' stroke-width='0' fill='rgba(45, 55, 72,1)' filter='url(%23filter-doodad-2)'/%3E%3Ccircle cx='11.91' cy='25.88' r='1' stroke-width='0' fill='rgba(45, 55, 72,1)' filter='url(%23filter-doodad-2)'/%3E%3Ccircle cx='23.09' cy='10.49' r='1' stroke-width='0' fill='rgba(45, 55, 72,1)' filter='url(%23filter-doodad-2)'/%3E%3C/pattern%3E%3Cfilter id='filter-doodad-1'%3E%3CfeTurbulence baseFrequency='2' numOctaves='2' type='fractalNoise' result='result1'/%3E%3CfeDisplacementMap in2='result1' scale='5' result='result2' xChannelSelector='R' in='SourceGraphic'/%3E%3CfeComposite in2='result2' in='SourceGraphic' operator='atop' result='fbSourceGraphic'/%3E%3C/filter%3E%3Cfilter id='filter-doodad-2'%3E%3CfeTurbulence baseFrequency='1.3' numOctaves='2' type='fractalNoise' result='result1'/%3E%3CfeDisplacementMap in2='result1' scale='12' result='result2' xChannelSelector='R' in='SourceGraphic'/%3E%3CfeComposite in2='result2' in='SourceGraphic' operator='atop' result='fbSourceGraphic'/%3E%3C/filter%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E ");
}

.header {
  text-align: center;
  padding: 32px;
}

.intro {
  font-size: 95%;
}

/* Project Grid */
.project-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}

.project-item {
  position: relative;
  overflow: hidden;
  /* box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3); */
}

.project-item img,
.project-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-item video.project-video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* show entire video without cropping */
  object-position: center;
  display: block;
  background-color: #fdde68; /* optional, adds black bars instead of blank space */

  transition: opacity 0.3s ease;
}

/* Match hover opacity effect with images */
.project-item a.opacity:hover video.project-video {
  opacity: 0.6;
}

/* Hover text styling */
.hover-text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: black;
  font-family: "Comico";
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show text on hover */
.project-item:hover .hover-text {
  opacity: 1;
}

/* Opacity on project item hover */
.opacity {
  opacity: 1;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.opacity:hover {
  opacity: 0.2;
}

/* Sizes Clouds Project */
iframe {
  height: 100%;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1150px) {
  .project-container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}

@media screen and (max-width: 950px) {
  .project-container {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 650px) {
  .project-container {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
  }
  body {
    margin-top: 7rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .anna-rizvi {
    width: 200px;
    margin-left: -1.2rem;
  }
}