.projects_container {
    height: fit-content;
    width: 100%;

    display: flex;
    flex-direction: column;

}

.project_container {
    height: fit-content;
    width: 100%;

    display: flex;
    flex-direction: row;
    position: relative;

}



.project_picture_container {
    width: 50%;
    height: 100vh;

    overflow: hidden;
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    cursor: pointer;
}

.project_picture_container {
    transform: translateX(-200px);
    opacity: 0.4;
    transition: transform 0.9s cubic-bezier(.17,.67,.28,.98), opacity 0.6s ease-out, border-Radius 1s ease;
  }

  .project_picture_container:hover {
    opacity: 0.6;
  }
  
  .project_picture_container.slide-in {
    transform: translateX(0);
    opacity: 1;
  }

.spaceholder {
    width: 50%;
    height: 100vh;
}

.picture_container {
    aspect-ratio: 4 / 3;
    height: 50%;

    
    filter: drop-shadow(5px 5px 15px #00000050);
    -webkit-filter: drop-shadow(5px 5px 15px #00000050);

    object-fit: contain;
    box-sizing: border-box;
    z-index: 200;
    transition: var(--transition_duration);
}

.project_picture_container:hover .picture_container{
    scale: 1.02;
}

.noise_picture {
    width: 200%;
    height: 200%;
    position: absolute;
    z-index: 151;

    animation: noisemover .5s steps(2) infinite ;
}

.noise_picture_op {
    opacity: .1;
}

@keyframes noisemover {
    0%, 100% { transform:translate(0, 0) }
    10% { transform:translate(-5%, -10%) }
    50% { transform:translate(-15%, 10%) }
    60% { transform:translate(15%, 0%) }
    70% { transform:translate(0%, 15%) }
}

.backgound_picture {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 150;
}
.project_text_container {
    width: 50%;
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;

    position: relative;

    padding-left: 15%;
}



.header_container_project {
    width: 100%;
    height: fit-content;

    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
}

.projects_txt_header2, .projects_txt_sub2, .projects_header_txt, .projects_click_txt, .projects_click_txt2 {
    font-family: var(--outfit-font);
    color: var(--color-white);
    text-align: left;
    line-height: 1;
}

.projects_header_txt {
    font-weight: 200;
    font-size: 2.5rem;
    opacity: 1;
    position: relative;
    top: 0px;
    transition: opacity .6s ease, top .6s ease;
    cursor: pointer;
}

.projects_click_txt {
    font-weight: 400;
    font-size: .7rem;
    opacity: 1;
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 210;
    display: none;
    opacity: 50%;
}

.projects_click_txt2 {
    font-weight: 200;
    font-size: .7rem;
    z-index: 210;
    opacity: 50%;
    position: relative;
    top: 100px;
    display: none;
}

.projects_header_txt.load {
    opacity: 0;
    top: -30px;
}

.projects_txt_header2 {
    font-weight: bold;

    font-size: 8rem;
}

.projects_txt_sub2 {
    font-weight: 100;
    
    font-size: 3rem;
    opacity: var(--text-opacity);
}

.animated-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.animated-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.projects_txt_header, .projects_txt_sub {
    font-family: var(--outfit-font);
    color: var(--color-white);
    text-align: left;
    line-height: 1;
    font-size: 2rem;
}

.projects_txt_header {
    font-weight: bold;

    cursor: alias;
}

.projects_txt_sub {
    font-weight: 100;
    opacity: var(--text-opacity);
}