@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

#page6 {
    height: 190vh;
    width: 100%;
    background-color: #000000;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}   


#page6 #projecthead{
    color: rgb(255, 255, 255);
    font-family: "League Gothic", serif;
    font-weight: 600;
    font-size: clamp(6rem, 10vw, 100vw);
    margin-bottom: 4vw;
}

#page6 #projectcover {
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    position: relative;

}

#page6 #projectcover .projects {
    height: 22%;
    width: 90%;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    transition: all 0.5s linear;
    margin: auto;

}

/* Blur all project cards when parent is hovered */
#page6 #projectcover:hover .projects {
    filter: blur(3px);
}

#page6 #projectcover .projects:hover {
    filter: none;
    transform: scale(1.05);
    background-color: #d8d8d8;
}

#page6 #projectcover .projects:hover .projectright,
#page6 #projectcover .projects:hover .projecttitle {
    color: #3A3A3A;
}

.projectleft{
    height: 100%;
    width: 60%;
    display: flex;
}

.projectright{
    height: 100%;
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: space-between;
    color: #ffffff;
}

.projectright h3{
    font-size: 1.2rem;
    font-weight: 400;
    color: #81acfc;
}

.projectright p{
    font-size: 1.2rem;
}

.projectimg{
    height: 100%;
    width: 55%;
    background-color: rgb(139, 139, 139);
    border-radius: 22px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.projecttitle{
    height: fit-content;
    width: fit-content;
    margin-top: auto;
    margin-left: auto;
    font-size: 6vw;
    font-family: "League Gothic", sans-serif;
    color: #ffffff;
    text-align: right;
}

@media (max-width: 900px) {

#page6 {
    height: fit-content;
}

#page6 #projectcover .projects {
    flex-direction: column;
    height: 10%;
    margin: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.projectleft{
    flex-direction: column;
    width: fit-content;
}

.projecttitle{
    margin-left: 0px;
    margin-right: auto;
    margin-top: 1rem;
    font-size: 70px;
    font-weight: 300;
}


.projectright{
    width: 80%;
    margin: 1rem;
}

.projectright p{
    margin: none;
}

.projectimg{
    width: 300px;
    height: 200px;
}

}