@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=PT+Serif:wght@400;700&family=Poppins:wght@300;400&display=swap');

html { overflow-x: hidden; }

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #121212; /* Dark background */
    color: #e0e0e0; /* Light text */
    font-family: 'Poppins', sans-serif;
}


/* TITLE  & DESCRIPTION */
#container-title {
    padding: 1em .8em .5em;
    margin-bottom: 1.5em;
}

h1 {
    font-size: 1.85em;
    color: #ffffff; /* White text for headings */
    font-family: 'PT Serif', serif;
}

h2, h3, h4, h5, h6 {
    color: #ffffff;
}


.container-description {
    font-family: 'Poppins', sans-serif;
    margin-top: 2em;
}

.subtitle-description {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1.27em;
}

.description {
    margin: .6em 0 0;
    font-size: .95em;
    font-weight: normal;
    max-width: 500px;
}

/* GRID OF CARDS */
#grid-images {
    padding: 0.5em 0em 1.5em .5em;
    
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1.5em;
}

/* CARD */
.container-member {
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    background-color: #1e1e1e; /* Dark card background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); /* Subtle shadow */
    color: #e0e0e0; /* Light text */
}


.container-member:nth-child(odd) {
    align-self: flex-start;
}
.container-member:nth-child(even) {
    align-self: flex-end;
    margin-top: 2.5em;
}

.container-member figure {
    height: 100%;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.member-img {
    height: 100%;
    width: 85%;
    max-width: 250px;
    border-radius: 8px;
    border: 2px solid #bb86fc; /* Purple border */
}


.container-member p {
    cursor: default;
    font-size: .7em;
    margin: 0;
    transform: rotate(90deg);
    position: absolute;
    top: 8.4em;
    right: -7.75em;
    width: 200px;
    font-family: 'PT Serif', serif;
    font-weight: 100;
    text-transform: uppercase;
}

/* FOOTER */
#footer {
    margin-top: 4em;
    font-family: 'Montserrat', sans-serif;
    font-size: .9em;
    background-color: #1e1e1e; /* Dark footer background */
    color: #a9a9a9; /* Light gray text */
    text-align: center;
}


#footer p { font-weight: 400; }

#footer a {
    font-weight: 600;
    color: #03dac6; /* Teal for links */
    text-decoration: none;
}

#footer a:hover {
    color: #018786; /* Darker teal on hover */
}



/* MEDIA QUERIES */
@media only screen and (min-width: 400px) {
    .container-member p { right: -7.1em; }
    
    @media only screen and (min-width: 500px) {
        h1 { font-size: 2em; }
        
        .subtitle-description { font-size: 1.47em; }
        
        .description { font-size: 1.05em; }
        
        .container-member figcaption { font-size: 1.1em; }
        
        .container-member p {
            right: -5.7em;
            font-size: .8em;
            top: 7.25em;
        }
    }
    
    @media only screen and (min-width: 640px) {
        .container-member p { right: -3.5em; }
    }
    
    @media only screen and (min-width: 725px) {
        #container-title {
            padding-left: 2em;
            padding-right: 2em;
        }
        
        .container-member:nth-child(even) { margin-top: 3.1em; }

        .container-member p { right: -1.8em; }
        
        #footer { margin-top: 8em; }
    }
    
    @media only screen and (min-width: 800px) {
        .container-member figcaption { font-size: 1.2em; }
        
        .container-member p {
            font-size: .9em;
            right: -.55em;
            top: 6.5em;
        }
        
        #footer { font-size: 1em; }
    }
    
    @media only screen and (min-width: 890px) {
        .container-member p { right: 1em; }
    }
}

/* Laptops & Desktops */
@media only screen and (min-width: 990px) {
    h1 { justify-self: center; }
    
    #grid-images {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-row-gap: 7em;
    }
    
    #container-title {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        align-items: flex-start;
        
        margin-bottom: 4em;
    }
    
    .container-description { margin: 0; }
    
    .description { max-width: 425px; }
    
    /* Even cards*/
    .container-member:nth-child(even) { margin: 0; }
    
    /* Second and fifth card */
    .container-member:nth-child(3n+2) {
        top: 6em;
        justify-self: center;
    }
    
    /* First and fourth card */
    .container-member:nth-child(3n+1) { justify-self: flex-end; }
    
    /* Third and sixth card */
    .container-member:nth-child(3n+3) {justify-self: flex-start; }
    
    .container-member p { right: -5.25em; }
    
    /* Images*/
    .member-img { max-width: 250px; }
    
    #footer { margin-top: 13em; }
}


/* Special classes of animations */
.less-from-left {
    animation: lessFromLeft 2s ease-out;
    animation-fill-mode: forwards;
}

.less-from-left:nth-child(3) { animation-delay: 1.25s; }

.less-from-left:nth-child(5) { animation-delay: 2.25s; }

.less-from-right {
    animation: lessFromRight 2s ease-out;
    animation-fill-mode: forwards;
}

.less-from-right:nth-child(2) { animation-delay: .75s; }

.less-from-right:nth-child(4) { animation-delay: 1.75s; }

.less-from-right:nth-child(6) { animation-delay: 2.75s; }


/* Special classes of animations greater than 990px*/
.greater-from-left {
    animation: greaterFromLeft 2s ease-out;
    animation-fill-mode: forwards;
}

.greater-from-left:first-child {
    animation-delay: .5s;
}

.greater-from-left:nth-child(4) { animation-delay: 2.25s; }

.greater-center {
    animation: greaterCenter 2s ease-out;
    animation-fill-mode: forwards;
}

.greater-center:nth-child(2) { animation-delay: .65s; }

.greater-center:nth-child(5) { animation-delay: 2.5s; }

.greater-from-right {
    animation: greaterFromRight 2s ease-out;
    animation-fill-mode: forwards;
}

.greater-from-right:nth-child(3) { animation-delay: .5s; }

.greater-from-right:nth-child(6) { animation-delay: 2.25s; }

/* KEYFRAMES */
/* Screen width less than 990px*/
@keyframes lessFromLeft {
    0% {
        right: 110%;
        opacity: 0;
    }
    
    10% { display: block; }
    
    70% { opacity: .5; }
    
    100% {
        right: 0%;
        opacity: 1;
    }
}

@keyframes lessFromRight {
    0% {
        left: 110%;
        opacity: 0;
    }
    
    10% { display: block; }
    
    70% { opacity: .5; }
    
    100% {
        left: 0%;
        opacity: 1;
    }
}

/* Screen width greater than 990px*/
@keyframes greaterFromLeft {
    0% {
        right: 110%;
        opacity: 0;
    }
    
    70% { opacity: .5; }
    
    100% {
        right: 0%;
        opacity: 1;
    }
}

@keyframes greaterCenter {
    0% { opacity: 0; }
    
    100% { opacity: 1; }
}

@keyframes greaterFromRight {
    0% {
        left: 110%;
        opacity: 0;
    }
    
    70% { opacity: .5; }
    
    100% {
        left: 0%;
        opacity: 1;
    }
}


/* TRANSITIONS*/
/* Transition of names*/
.greater-from-left figcaption, .greater-from-right figcaption, .greater-center figcaption {
    transition: all .5s;
}

.greater-from-left:hover figcaption, .greater-from-right:hover figcaption, .greater-center:hover figcaption {
    color: #00eeff;
}

/* Role transition*/
.greater-from-left p, .greater-from-right p, .greater-center p {
    transition: all .6s;
}

.greater-from-left:hover p, .greater-from-right:hover p, .greater-center:hover p {
    right: 50px;
    top: -24px;
    transform: rotate(0deg);
    font-weight: bolder;
    color: #727272;
}


.greater-from-left .member-img, .greater-from-right .member-img, .greater-center .member-img {
    transition: all .9s;
}

.greater-from-left:hover .member-img, .greater-from-right:hover .member-img, .greater-center:hover .member-img {
    border-radius: 2px;
}