/* =========================== Container =========================== */

/* --- title --- */

#projects {
    margin:                     4vw auto 10vw auto;
    font-size:                  6vw;
    font-weight:                600;
    color:                      var(--white-color);
    opacity:                    0.3;
    text-transform:             uppercase;
}

/* --- projects --- */

.project-container {
    position:                   relative;
    display:                    flex;
    flex-direction:             column;
    align-content:              center;
    justify-content:            center;
    overflow:                   hidden;
}

.project-video {
    width:                      100vw;
    /* transform:                  translateX(-5%); */
    margin-bottom:              10rem;
    filter:                     blur(10px);
    overflow:                   hidden;
}

.project-card {
    display:                    grid;
    grid-template-columns:      repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap:                        3rem;
    margin:                     0 10vw 10rem; 
}

.project {
    width:                      100%;
    background-color:           var(--blue-color-light);

    display:                    flex;
    flex-direction:             column;
    align-items:                center;
    justify-content:            flex-start;

    font-size:                  1.5rem;
    font-weight:                900;
    transition:                 transform .4s;
    overflow:                   hidden;
}

.project section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ========================== TEXTS AND STUFFS ========================== */

.project-title {
    position:                   absolute;
    left:                       50%;
    transform:                  translate(-50%, 180%); /* Centers it exactly */
    align-self:                 center;
    font-size:                  10vw;
    color:                      #D2D4EA;
}

.project span {
    font-size:                  2rem;
    margin:                     0 0 1.5rem;
}

.project img {
    width:                      100%;
    filter:                     blur(1px);
    transition:                 filter .4s;
    margin:                     0 0 1.5rem;
}

.project a {
    background-color:           var(--sig-blue-darken);
    
    padding:                    0.65rem;
    text-align:                 center;
    font-family:                inherit;
    font-weight:                inherit;
    font-size:                  inherit;
    color:                      var(--blue-color);
    text-transform:             uppercase;
    
    margin:                     0 0 1.5rem;
    border:                     none;
    border-radius:              20px;
    height:                     3rem;
    width:                      15rem;
    transition:                 .4s;
}

/* ========================== ANIMATION OR HOVER ========================== */

.project:hover {
    transform:                  translateY(-10px)
}

.project img:hover {
    filter:                     none;
}

.project a:hover {
    cursor:                     pointer;
    transform:                  translateY(-5px);
    background-color:           var(--sig-blue-light);
}

.project a:active {
    transform:                  translateY(3px);
}

/* ====================== EXPAND ====================== */

.expand_left section {
    width: 30%;
}

#extra-information {
    padding: 1rem;
    width: 70%;
    height: 100%;
    background-color: var(--blue-color-lighten);
}

.expand_left {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}

.expand_left img {
    width: 100%;
    filter: none;
}

/* ========================== PHONE ========================== */

@media screen and (max-width: 1114px) {
    #projects {
        font-size:              12vw;
    }
    .project-video {
        width:                  100vh;
    }
    .project-title {
        font-size:              10vw;
        transform:              translate(-50%, -47vh);
    }
}