/*
  Mainly sets up background and text alignment for page
*/
body {
  font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  background: #FFFA8D;
  text-align: center;
  color: darkblue;
  margin: 0;
  padding: 0;
}

/* Defines color and size of header "Exercise Video" */
h1 {
  color: rgb(78, 150, 250);
  font-size: 6em;
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  text-align: center;
}

/* Animates and styles navigation bar */
.sliding-nav-container {
  width: 100%;
  background-color: #4ED7F1;
  padding: 1px;
  position: fixed;
  top: 0;
  
}

/* Defines margins and text alignment for the navigation bar */
.sliding-nav-container nav {
    margin: 5px;
    text-align: center;
}

/* Styles unhovered navigation links */
.sliding-nav-container nav a {
    display: inline-block;
    margin: 0 1em;
    text-decoration: none;
    color: rgb(231, 139, 202);
    font-size: 2.5em;
    transition: color 0.3s ease, transform 0.3s ease;
}

nav a:hover {
  color: rgb(217, 67, 197);
  transform: scale(1.1);
}

/* 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(230, 232, 251);
  border: 2px solid #3f41c7;
  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(37, 78, 121);
  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%;
}