/* setting the font family for all body text and adding NYU purple as background color
while also adding custom cursor */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #57068c;
    cursor: url('assets/Normal\ Select\ Kawaii\ Kitty.cur'), auto; /* kitty cursor, fallback to default if this one fails*/
    color: #FFFFFF;
}
p, h1, h2, h3{
    cursor: url('assets/Text\ Select\ Kawaii\ Kitty.cur'), auto; /* kitty cursor, fallback to default if this one fails*/
}
/* Adding some Padding and Centering the footer content  */
.footer-container {
    padding-top: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Adding the custom cursor for the href element in the footer while also setting the correct color */
.footer-container a {
    color: #FFFFFF;
    cursor: url('assets/Alternate\ Select\ Kawaii\ Kitty2.cur'), auto; /* kitty cursor, fallback to default if this one fails*/
}
/* The header should have some padding than the components below and the elements should be at the center */
header {
    padding: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
}
.header-container h1 {
    font-size: 30px;
    margin: 0;
}
/* Centering the slider and hiding other pictures when one is displayed*/
.slider {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    position: relative;
    height: auto;
    overflow: hidden;
    background-color: #E5E5E5;
}
.slide {
    width: 600px;
    display: none; /* Hide all slides by default */
}
/* The previous, next slideshow buttons */
.prev, .next {
    cursor:  url('assets/Handwriting\ Kawaii\ Kitty.cur'), auto; /* kitty cursor, fallback to default if this one fails*/;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px; /* Set a fixed width */
    height: 50px; /* Set a fixed height to match the width because this is a circle */
    padding: 5px;
    margin: 0px 15px 0px 15px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease-out;
    user-select: none;
    background-color: rgba(0,0,0,0.5);
    border-width: 0px;
    border-radius: 50%; /* Make it round */
    display: flex; /* Use flexbox to center the arrow */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}
/* The even distancing between the two pointer buttons */
.next {
    right: 0;
}

.prev {
    left: 0;
}
/* The cool effect that makes the buttons more interactive when the user hovers over it */
.next:hover {
    padding-left: 13px; /* Add padding to the left on hover */
}

.prev:hover {
    padding-right: 13px; /* Add padding to the left on hover */
}

/* A row class that can be reused to present items in a row */
.row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
/* A column class that can be reused to present items in each row */
.column {
    flex: 1; /* Each column takes up equal space */
    padding: 10px;
}
/* Making image size responsive */
.image-block img {
    max-width: 100%;
    height: auto;
}
/* Centering the image block */
.image-block {
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
}
/* Making the text block more spaced between the lines and left aligned*/
.text-block p{
    text-align: left;
    font-size: medium;
    line-height: 30px;
}
/* This div stores the title of the section and the following component, so it should
be stacked as a column while centering the elements */
.section{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
/* This row adds upon the row defined above to present specifically the crew part */
/* It allows items to wrap on smaller screens and adds space between each crew member while preserving the same line */
.crew.row {
    flex-wrap: wrap; 
    gap: 20px;
    align-items: stretch;
}
/* This is the style for each crew member card*/
/* It adds a white background, padding, margin, shadow, and rounded corners */
/* It also stacks the items vertically and centers them horizontally */
.crew-member {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column; /* Stacks elements vertically */
    align-items: center; /* Centers items horizontally */
    padding: 20px;
    margin: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-radius: 10px; 
}
/* This class rounds the picture of each crew member */
.crew-member img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 15px; /* Adds space below the image */
}
/* The name of each crew member should be different than other h3 elements due to its black color */
.crew-member h3 {
    margin: 10px 0; /* Adds space above and below the heading */
    color: #000;
}
/* The introduction of each crew member should be center aligned and black colored while adding some nice line height*/
.crew-member p {
    text-align: center;
    color: #000;
    line-height: 30px;
    margin: 10px;
}
/* Seting the video's aspect ratio, centering the video, and making the width and height responsive */
.video-container {
    --aspect-ratio: 30.25%;
    position: relative;
    width: 100%; 
    max-width: 800px;
    margin: auto;
    padding-top: var(--aspect-ratio);
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* To display each cast member with their names */
.cast-member {
    display: flex;
    flex-direction: column; /* Stacks elements vertically */
    align-items: center; /* Centers items horizontally */
    padding: 10px;
    margin: 20px;
}
/* To make each cast member's picture rounded */
.cast-member img {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    margin-bottom: 15px; /* Adds space below the image */
}