/*
    Mainly sets up background and text alignment for page
*/
body {
  background: #FFFA8D;
  text-align: center;
  color: purple;
  margin: 0;
  padding: 0;
}

/* Defines color and size of header "Exercise Video" */
h1 {

  color: rgb(152, 54, 100);
  font-size: 6em;
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  text-align: center;
}

/* Defines search input's background and text color along with size and spacing */
button {
  margin-bottom: .5%;
  margin-top: .5%;
  padding: 1%;
  font-size: 1.5em;
  width: 100%;
  max-width: 10%;
  border: 0;
  border-radius: 5px;
  
  font-weight: bold;
  transition: transform 0.3s ease;

}

button:hover {
  transform: scale(1.05);
}

/*
  Arranges list items (similar to video cards) in grid layout using flexbox
*/
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
}

/*
  Styles each individual video card
*/
.video-item {
  background-color: rgb(251, 230, 249);
  
  border: 2px solid #c73f83;
  border-radius: 8px;
  padding: 15px;
  width: 300px; 
  text-align: left; 
  transition: transform 0.2s ease;
}
/* Makes it slightly bigger when mouse hovers over video */
.video-item:hover {
  transform: scale(1.05);
}

/* Styles the title heading within a video card */
.video-card h3 {
  margin-top: 0;
  color: rgb(151, 13, 84);
  font-size: 1.2em;
}

/*
  Sets up container for embedded videos
*/
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 60%;
  height: 0;
  overflow: hidden;
  margin-bottom: 10px;
}

/*
  Makes actual video fill its container
*/
.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}