:root {
    --mainColor: #aa0e40;
    --bgColor: rgba(0, 0, 0, 0.02);
    --maxWidth: 1600px
}


a {
    text-decoration: none;
}


.projectInterface {
    /* border: 1px solid rgb(255, 0, 0); */
    width: 100%;
    max-width: var(--maxWidth);
    height: 100%;
    padding-left: 170px;
    padding-right: 20px;
    /* opacity: 0; */

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* align-items: center; */
}


.projectScroll {
    /* border: 1px solid rgb(255, 0, 0); */
    width: 220px;
    padding-top: 45vh;
    padding-bottom: 45vh;

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

    gap: 80px;
}


.projectScrollElement {
    /* border: 1px solid rgb(123, 0, 255); */
    /* width: 100%; */

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

    gap: 10px;
}


.imageBoxPrj {
    position: relative;
    /* border-radius: 0px; */
    width: 160px;
    /* max-height: 200px; */
    /* height: 90px; */
    overflow: hidden;
    /* z-index: 100; */

    display: flex;
    justify-content: center;
    align-items: center;

    transition: width 0.15s ease, scale 0.2s ease;
    /* height 1s ease 0.1s,
    transform 0.3s ease; */
}

.imageBoxPrj:hover {
    scale: 1.1;

}



.imageBoxPrj.active {
    width: 200px;
    /* max-height: 300px; */
    /* scale: 1.2; */
}





.imageBoxPrj img {
    /* position: absolute; */
    border: 1px solid var(--bgColor);
    /* padding: 5px; */
    background-color: var(--bgColor);
    width: 100%;
    height: 100%;
    
    
    object-fit: contain;
}

.imageBoxPrj video {
    position: absolute;
    border: 1px solid var(--bgColor);
    /* padding: 5px; */
    background-color: var(--bgColor);
    width: 100%;
    height: 100%;
    
    pointer-events: none;
    object-fit: contain;
}



.imageBoxContainer {
    position: fixed;
    width: 100%;
    /* max-width: 60vw; */
    opacity: 0;
    /* border: 1px solid rgb(106, 255, 250); */

    display: flex;
    align-items: center;
    justify-content: center;

    /* transition: opacity 0.5s ease 0.5s; */
}




.imageBoxPrjBig {
    position: absolute;
    width: 100%;
    /* height: 20vh; */
    /* padding: 20px; */
    border: 1px solid var(--bgColor);
    /* border: 1px solid rgb(123, 0, 255); */
    background-color: var(--bgColor);
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
}


.imageBoxPrjBig img {
    width: 100%;
    height: 100%;
    max-height: 70vh;
    
    object-fit: contain;
}


.imageBoxPrjBig video {
    width: 100%;
    height: 100%;
    max-height: 70vh;
    opacity: 0;
    z-index: 10;

    object-fit: contain;

    transition: opacity 0.2s ease;
}

.imageBoxPrjBig video:hover {
    opacity: 1;
}





.bgCanvas {
    position: fixed;
    width: 100vw;
    height: 100vh;
    max-width: var(--maxWidth);
    /* left: 0; */
    opacity: 0;
    /* border: 1px solid rgb(0, 179, 255); */

    display: flex;
    align-items: center;
}



.dots {
    position: absolute;
    left: 140px;
    /* border: 1px solid rgb(255, 0, 0); */

    display: flex;
    align-items: center;
}



.dotBox {
    /* border: 1px solid rgb(255, 0, 0); */
    position: absolute;
    height: 50px;
    /* opacity: 0; */

    display: flex;
    align-items: center;
    transform-origin: left;
}


.dotBox svg {
    /* border: 1px solid rgb(123, 0, 255); */
    width: 320px;
    height: 30px;
}






.dotBox h3 {
    /* position: absolute; */
    /* border: 1px solid rgb(123, 0, 255); */
    padding: 5px;
    /* height: 100%; */
    font-size: 15px;
    white-space: nowrap;
    opacity: 0.15;

    transition: opacity 0.2s ease 0.1s, font-size 0.2s ease;
}

.dotBox h3.active {
    opacity: 1;
}


.dotBox h3:hover {
    opacity: 1;
    font-size: 20px;
}



.dot {
    cx: 300;
    cy: 15;
    r: 5;

    fill: white;
    stroke: var(--mainColor);
    stroke-width: 1px;
    transition: fill 0.2s ease;
}

.dot.active {
    fill: var(--mainColor);
}

.dot:hover {
    fill: var(--mainColor);
}


.projTitle {
    /* border: 1px solid rgb(64, 0, 255); */
    position: fixed;
    bottom: 30px;
    /* margin: 20px; */
    padding: 10px;
    border-radius: 20px;
    font-size: 15px;

    transition: background-color 0.2s ease, color 0.2s ease;
}

.projTitle:hover {
    background-color: var(--mainColor);
    color: white;


}