@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');

 body {background-image: url("https://meiqth.ing/t/rabbits-bunnies-ezgif.com-crop.gif");} /* HEY SARAH THIS IS THE BACVKGROUND IMAGE */
 body {
  --font-primary: "Saira", sans-serif;
  font-family: var(--font-primary);
} 
 h1 {color: white;}
 p {color: white;}
 h3 {color: white;}
 h2 {color: white;}
 ul {color: white;}
 a:link {color: white;} /* default colour */
 a:visited {color: powderblue;} /* default clicked link */
 a:hover {color: white;} /* overrides above */
 a:active {color: powderblue;} /* the actualy DURING the click */
 body {
  background-color: pink;                                                                                   /* pink bg colour for pallette (your mom)*/
}

.dark-mode {
background-color: black;
}

 /* most of this css was fixed by ai, blame mae */
* {
  box-sizing: border-box; /* https://youtu.be/3fkP88FDgaI?t=24 */
}

/* remove site and body if shit breaks */
.site {
  width: 100%;
  max-width: 1929px;
  min-width: 1600px;
  margin: 0 auto;
  padding: 0 2rem;
}

body {
  color: white; 
  overflow-x: auto;       /* allow horizontal scroll if screen is smaller */
}




.parent {
  display: grid;
  grid-template-columns: 3% 20% 1.2% 51.6% 1.2% 20% 3%;
  width: 100%;
  margin: 0;       /* remove extra spacing */
  padding: 0;
}

.childleft,
.childbig,
.childright,
.title,
.showcase {
 margin-bottom: 23px;
}

/* spacing above footer */
.foot {
  margin-top: 3%;
}


.childleftparent {
  grid-column: 2; /* references percentages above for percentage of screen taken up */
}

.childrightparent {
  grid-column: 6;
}

.childbigparent {
  grid-column: 4;
}


.childleft, .childbig, .childright, .title{
  width: 100%;
  background-color: #dc6ea5; 
  /* pink box colour for palette */
  border: 3px solid #002026; 
  border-radius: 15px;
  padding: 3%; 
}
.title img {
  display: block;
  margin: auto;
  width: 50%;
}
.childbig iframe {
  display: block;
  margin: auto;
  width: 90%;
}
.showcase {
  box-sizing: border-box; /* Keeps the 3px border inside the width so it doesn't disappear */
  display: flex; 
  gap: 15px; 
  align-items: center; 
  justify-content: center;
  width: 100%;
  background-color: #dc6ea5;                                                                                   /* pink box colour for palette */
  border: 3px solid #002026;
  border-radius: 15px;
  padding: 3%; 
}
.showcase iframe {
  flex: 0 0 60%; 
  max-width: 60%;
  height: 315px;
  margin-right: 10px; 
}

.video-text {
  flex: 1;
  text-align: left;
  padding-right: 10px; 
}
.foot {
  width: 20%;
     margin: auto;
  text-align: center;
  background-color: #dc6ea5; /* [cite: 4] */                                                                  /* pink box colour for palette */
  border: 3px solid #002026; /* [cite: 4] */
  border-radius: 15px;
}

.button {
  display: inline-block;
  will-change: transform;

}

.button:hover {
  animation: bounce 700ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

@keyframes bounce {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-4px); }
  65%  { transform: translateY(-2px); }
  80%  { transform: translateY(-3px); }
  92%  { transform: translateY(-2px); } /* slow settle */
  100% { transform: translateY(0); }
}





.bunny {
  display: inline-block;
  transition: transform 0.2s ease;
  margin-bottom: 14px;
}

.bunny:active {
  transform: scale(0.92, 0.75);
}
.bunny {
  -webkit-user-drag: none;
  user-select: none;
}

.title-image {
  display: block;
  margin: auto;
  width: 50%;
}

.title img:not(.title-image) {
  display: inline;
  margin: 0;
  width: auto;
}

.button-row {
  display: block;        /* so text-align works */
  text-align: center;    /* centers ONLY the images */
  margin-top: 6px;
}

.button-row img {
  display: inline;
}


.rightbutton {
  position: fixed;   /* sticks to screen */
  right: 20px;       /* distance from right edge */
  top: 20px;        /* distance from top */
  z-index: 9999;     /* stays above everything */
}