@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Jost:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);
@import url(https://necolas.github.io/normalize.css/8.0.1/normalize.css);

main {
    display: flex;
    align-items: center;
}

.work-titles {
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: stretch;
    justify-items: center;
    justify-content: space-between;
    color: #f2e0df;

}
.illus-title{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
a {
    text-decoration: none;
}

.medium {
    width: max-content;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    align-content: stretch;
    justify-content: center;
    margin: 6px 24px;
    border-radius: 8px;
    text-decoration: none;
    color:#bdcdcf;
    position: relative;
}

.medium::before {
    background-color: #8dcdcf;
    content: '';
    width: 0%;
    height: 1px;
    bottom: 0;
    left: 0;
    position: absolute; 
    transition: 0.4s ease;   
}
.medium:hover::before {
    width: 100%;
}

.chosed-medium {
    font-weight: 500;
    color: #f2e0df;
}

.some-info{
    color: #f2e0df;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    align-content: stretch;
    justify-content: space-between;
    row-gap: 1rem;
    padding: 24px 0px 0 0px;
    position: relative;  
}
.title{
    width: fit-content;
    height: min(51px, fit-content);
    font-family: 'Montserrat';
    font-style: normal;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.2px;
    text-decoration: none;    
}
.explain{
    width: 100%;
}
img{
    display: block;
    width: 100%;
    margin-bottom: 1em;

}

.describe-img {
  width: 30%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 51, 50, 0) 7.000000000000001%,#034134 100%);
  border-radius: 4px;
  display: flex;
  align-items: start;
  align-content: stretch;
  justify-content: start;
  flex-direction: row;
  position: absolute;
  right: 0;
  z-index: 0;
}
.describe-img div{
    height: 100%;
    aspect-ratio: 2/3;
    position: relative;
    z-index: 0;
}
#img-il{
    background:#8dcdcf;
    mask-image: url(https://64.media.tumblr.com/c2b9e6b0fa6df43953601dd1361140fe/63c89bc51636409a-e5/s2048x3072/0fddffe5ad5b75612e863249e0e4eed913bad711.pnj);
    mask-size: cover;
    opacity: 50%;
}
#img-gr{
    background:#8dcdcf;
    mask-image: url(https://64.media.tumblr.com/1af4cd8dea82c86d7ff2f98201744480/63c89bc51636409a-ac/s2048x3072/12262d78f6b1fd3d638ef08d2eca0cbcbb43075a.pnj);
    mask-size: cover;
    opacity: 50%;
}
#img-an{
    background:#8dcdcf;
    mask-image: url(https://64.media.tumblr.com/c5445bb09bdd0c0d2d631db002a359a5/63c89bc51636409a-83/s2048x3072/2da42b04b6b2208ecd56024b26bc0e7d2e052fc9.pnj);
    mask-size: cover;
    opacity: 50%;
}
#img-3d{
    background:#8dcdcf;
    mask-image: url(https://64.media.tumblr.com/86fdf4b5b8059d0f9963d5f84bf125e9/63c89bc51636409a-2e/s2048x3072/89fc9e6bf66dd790cc82443a0858c465ccdef741.pnj);
    mask-size: cover;
    opacity: 50%;
}
.describe-img::after{
    content: '';
    width: 100%;
    height: 100%;
    background: #44a1ff00;
    mix-blend-mode: color;
    position: absolute;
    top: 0;
    bottom: 0;    
    overflow: hidden;
    z-index: 1;
}
.details{
    height: fit-content;
    width: 65%;
}

.work-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
}
.works-illustration > img {
    border-radius: 4px;
}
.works-illustration{
    display: block;
    align-content: stretch;
    columns: 3 300px;
    column-gap: 1em;
}

.works-animation {
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: end;
    align-content: stretch;
    justify-content: center;
    gap: 24px;
    padding-bottom: 5em;
    position: relative;
}
.works-animation > video {
    border-radius: 8px;
}
.left-video{
    display: flex;
    flex-direction: row-reverse;
}
.right-video{
    display: flex;
    flex-direction: row;
}
.video-down{
    width: fit-content;
    display: flex;
    flex-direction: column;
}

.video-descript{
    width: 100%;
}
.video-info-left {
    width: 100%;
    max-width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    align-content: stretch;
    justify-content: end;
    gap: 64px;
    color: #bdcdcf;
    margin-bottom: 1rem;
}

.video-info-right {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    text-align: right;
    align-items: start;
    align-content: stretch;
    justify-content: end;
    gap: 64px;
    color: #bdcdcf;
    padding-bottom: 1rem;
}
.works-animation-columns{
    display: block;
    align-content: stretch;
    columns: 3 200px;
    column-gap: 1em;
}

.video-title{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 36px;
    width: 100%;
    justify-content: space-between;
    color: #f2e0df;
    position: relative;
}
.video-title::after{
    content: '';
    width: 100%;
    height: 1px;
    background: #bdcdcf;
    opacity: 50%;
    position: absolute;
    bottom: -50%;
    left: 0;
}
.tr {
    height: 2px;
    width: 2px;
    background-color: #8dcdcf;
    border-radius: 50%;
    margin: 0.1rem;
}
video {
    display: block;
    margin-bottom: 1em;
    width: 100%;
    border-radius: 0.1rem;
}
.big-vid {
    width: 70%;
}

img {
    border-radius: 0.05rem;
}

@media screen and (max-width:860px) {
    .work-titles:has(a) {
        flex-direction: column;
        justify-content: center;
        gap: 0.5em;
        position: relative;
    }
    .work-titles:has(a)::before{
        content: '';
        width: 0.5rem;
        height: 0.1rem;
        border-radius: 1rem;
        background: #8dcdcf;
        opacity: 50%;
        position: absolute;
        bottom: -0.5rem;
        margin: 0 100%;
    }
    .work-titles:has(a)::after{
        content: '';
        width: 1.5rem;
        height: 0.1rem;
        border-radius: 1rem;
        background:#8dcdcf;
        opacity: 50%;
    }
    .video-title {
        font-size: 24px;
        display: flex;
        flex-direction: row;
        transform: scale(0.75);
        gap: 3px;
    }
    .title{
        font-size: 28px;
    }
    .video-info-left{
        gap: 1rem;
        align-content: space-between;
    }
    .video-info-right{
        gap: 1rem;
        align-content: space-between;
    }
    .works-illustration{
    display: block;
    align-content: stretch;
    columns: 2 100px;
    column-gap: 1em;
}
}

@media screen and (max-width:640px) {
    .video-title {
        font-size: 18px;
        display: flex;
        flex-direction: row;
        transform: scale(0.75);
        gap: 3px;
    }
    .title{
        font-size: 28px;
    }
    .video-info-left{
        gap: 1rem;
        align-content: space-between;
    }
    .video-info-right{
        gap: 1rem;
        align-content: space-between;
    }
    .tr {
    display: none;   
    }
    .some-info{
        flex-direction: column;
        align-items: center;
    }
    .describe-img{
        position: relative;
        height: fit-content;
        background: none;
    }
    .describe-img div{
        width: 100%;
    }
    .details{
        width: 100%;
    }
}