body {background: #222; color: #111;}
.inter {
  font-family: "Karla", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 16px;
}
h2, h3 {
  font-family: "Catamaran", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 900;
}
h1 {
  font-family: "Permanent Marker", cursive;
  text-transform: uppercase;
  font-weight: 700;
  font-style: normal;
  color: #e51e25;
  mix-blend-mode: multiply;
  transform: rotate(-5deg);
  font-size: 56px;
  text-align: center;
}
h2 {color: #2baee4;  font-size: 48px; line-height: 1; }
h3 {font-size: 36px; line-height: 1.1}




.cover {background: black url(comp.png) top left repeat; min-height: 90vh;}
.sheet {background: #fefefe url(lines3.png) top center no-repeat; background-size: contain; margin-bottom: 100px; }
.sheet .content {padding: 40px 80px; line-height: 1.5;}
.sheet p, .sheet ul {}
.sheet p.lead{font-size: 1.4em;}
.sheet ul li { }
.namebadge {background: transparent url(namebadge.png) top center no-repeat; background-size: contain; margin-top: 80px; margin-bottom: 10vh; min-height: 320px; padding-top: 10px;}


img.retreats, .project img {border: 10px solid #fff; -webkit-filter: drop-shadow(5px 5px 5px rgba(30,10,10,.30)); filter: drop-shadow(5px 5px 5px rgba(30,10,10,.30));}
/*
.project img {max-width: 300px; margin-left: -140px; transform: rotate(-3deg);}
.project .deets {width: 400px; display: inline; float: right; margin-top: 0; }
.project h3 {margin-top: 0; margin-bottom: 0;}
*/
.cover, .sheet {max-width: 900px; border: 1px solid black; margin: 0px auto;}

.project {display: flex; margin: 40px 0;}
.project:nth-child(odd) {flex-direction: row-reverse; }
.project img {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    margin: 20px;
    max-width: 300px; /* Set a maximum width */
    flex-shrink: 0; /* Prevent image from shrinking */
    flex-grow: 0; /* Prevent image from growing */
    height: auto; /* Maintain natural proportions */
    width: auto; /* Allow the natural width to adjust */
}
.project-image-container {
    flex-shrink: 0; /* Prevent container from shrinking */
    flex-grow: 0; /* Prevent container from growing */
    margin: 0;
    position: relative;
}





.project:nth-child(odd) img { margin-right: -100px; transform: rotate(2deg);}
.project:nth-child(even) img {margin-left: -100px; transform: rotate(-2deg);}
.project-content {flex: 1;  padding: 0 20px;}
.project h3 {margin: 0; color: #e51e25;}
.sticker {
  -webkit-filter: drop-shadow(5px 5px 5px rgba(30,10,10,.30));
  filter: drop-shadow(5px 5px 5px rgba(30,10,10,.30));
  margin: 10px;
  position: absolute;
  cursor: grab;
}

#wave {max-width: 70px; transform: rotate(-15deg); top: 33px; margin-left: 54%;}
#tall {max-width:100px; transform: rotate(-5deg); top: 150px; margin-left: 12%;}
#sun {max-width:140px; transform: rotate(-1deg); top: 350px; margin-left: 76%;}
#pizza {max-width:100px; transform: rotate(-15deg); top: 400px; margin-left: 30%;}
#thumbsup {max-width:80px; transform: rotate(-15deg); top: 530px; margin-left: 57%;}
#record {max-width:100px; transform: rotate(1deg); top: 900px; margin-left: 73%;}
#bnb-blue {max-width:100px; transform: rotate(-10deg); top: 1400px; margin-left: 10%;}
#floppy {max-width:90px; transform: rotate(2deg); top: 1630px; margin-left: 90%;}
#plane {max-width:120px; transform: rotate(-2deg); top: 2289px; margin-left: 12%;}
#flag {max-width:80px; transform: rotate(8deg); top: 2899px; margin-left: 82%;}

#bnb-green {max-width:90px; transform: rotate(2deg); margin-left: 23%;  margin-top: -80px;}
#lightning {max-width:120px; transform: rotate(0deg); margin-left: 43%;  margin-top: -80px;}
#donut {max-width:120px; transform: rotate(0deg); margin-left: 3%;  margin-top: -95px;}

.whoswho {}
  .team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Responsive columns */
    gap: 20px; /* Space between grid items */
    margin: 0px auto;
    max-width: 800px; /* Optional: Limit max width */
    padding: 0px; /* Add some padding around the grid */
}
.team-member {text-align: center; }
.team-member img {max-width: 90%; border-radius: 100%;}


.whoswho, .retreats, .ai {border-top: 1px solid lightblue; margin-top: 80px; padding-top: 40px;}

.retreats img {max-width: 100%; transform: rotate(2deg); margin-right: -30px; padding-top: 0; margin-top: 0;}
.retreats img:nth-of-type(odd) { transform: rotate(-2deg); margin-left: -20px;}

.more strong {color: #2baee4;}
.footer {text-align: center; color: #ddd; padding: 40px 0;}
.footer a {color: #fff; text-decoration: underline;}


@media (max-width: 640px) {
 .content {padding: 20px!important; }
 .project {display: block; margin: 0;}
 .project img { display: block; max-width: 90%; margin-bottom: 50px; margin-top: 30px;}
 .project:nth-child(odd) img { margin-right: 0; transform: rotate(2deg);}
 .project:nth-child(even) img {margin-left: 0; transform: rotate(-2deg);}
 .project-image-container {max-width: 100%;}
 .namebadge {max-width: 76%; margin-left: 12%}
 h1 {line-height: 1.1;}
 h2 {font-size: 36px;}
 h3 {font-size: 24px;}
 .sheet p.lead {font-size: 1.2em; }
 #tall {margin-left: 5%; top: 200px;}
 #record {margin-left: 45%; top: 810px;}
 #sun {margin-left: 57%;}
 #plane {margin-left: 10%;}
 #flag {margin-left: 50%;}
 #floppy {margin-left: 45%;}
      }

@media (max-width: 420px) {
  h1 {font-size: 36px;}
  .namebadge {max-width: 70%; margin-left: 15%;}
  .retreats img {max-width: 90%;}
  #floppy, #flag, #plane, #record, #bnb-blue {display: none;}

}

/* Bob */
@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
.hvr-bob {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}