.animationcontent {
                position: static;
                display: flex;
                flex-direction: column;

                min-height: 90vh;
                max-width: 100vw;
                align-items: center;
                text-align: center;
                background-image: none;
                filter: none;
                overflow: visible;
            }

            .animsort {
                display: flex;
                flex-direction: row;
                margin-top: 1%;
                z-index: 2;
                width: 66vw;
                max-width: 728px;
                justify-content: space-between;
                align-items: center;
            }

            .embedvid {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                width: 66vw;
                max-width: 728px;
                min-height: 40vh;
                gap: 15px;
                margin: 2%;
            }

            .embedvid > div {
                width: 219px;
                font-size: 14px;
                transition: all 0.3s ease;

                .vidtitle {
                    font-weight: bold;
                }

                .viddate {
                }

                .viddesc {
                    display: none;
                }
            }

            .embedvid > div > .vidthumbnail {
                position: relative;
                display: flex;
                background-color: black;
                width: 219px;
                height: 130px;
                border-radius: 11%;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                border: solid 2px black;

                justify-content: flex-end;
                align-items: flex-end;

                .animvidtag {
                    position: relative;
                    top: -6px;
                    left: -10px;
                    scale: 0.8;
                    margin: 1px;
                    pointer-events: none;
                    border: solid 1px white;
                    color: black;
                }

                .animvidtag[data-vidtag="favs"] {
                    background: none;
                    border: none;
                    height: 13px;
                    width: 13px;
                    background-image: url("../assets/images/art/anim/fav.webp");
                    background-repeat: no-repeat;
                    background-position: center;
                }

                .animvidtag[data-vidtag="mute"] {
                    border: none;
                    height: 13px;
                    width: 13px;
                    background-image: url("../assets/images/art/anim/mute.webp");
                    background-repeat: no-repeat;
                    background-position: center;
                }
            }

            .embedvid > div:hover,
            .embedvid > div:focus-within {
                scale: 1.05;
                cursor: pointer;
                filter: drop-shadow(0px 0px 15px #ffeb94);
            }

            .animvidtag {
                color: #563566;
                padding: 2px;
                border-radius: 10px;
                border: solid 2px white;
                text-align: center;
                transition: all 0.2s ease;
            }

            .animvidtag:hover,
            .animvidtag:focus-visible {
                cursor: pointer;
                scale: 1.2;
            }

            .animvidtag[data-vidtag="dnd"] {
                background-color: #cfacff;
            }

            .animvidtag[data-vidtag="majikaru"] {
                background-color: #ffacff;
            }

            .animvidtag[data-vidtag="pjo"] {
                background-color: #ffc25f;
            }

            .animvidtag[data-vidtag="favs"] {
                background-color: #fff276;
            }

            .animvidtag[data-vidtag="date"] {
                background-color: #6f537f;
                color: white;
                font-size: 13px;
            }

            .animvidtag[data-vidtag="mute"] {
                border: none;
                height: 13px;
                width: 13px;
                background-image: url("../assets/images/art/anim/mute.webp");
                background-repeat: no-repeat;
                background-position: center;
            }

            .animvidtag.inactive {
                background-color: grey;
                color: #fff78a;
            }

            .animvidtag[data-vidtag="mute"].inactive {
                background-color: transparent;
                filter: grayscale(1);
            }

            .animvidoverlay {
                display: flex;
                justify-content: center;
                position: fixed;
                background-color: rgba(0, 0, 0, 0.87);
                width: 100vw;
                height: 100vh;
                transition: all 0.7s ease;
                transform: translateY(-100px);
                opacity: 0;
                pointer-events: none;
                overflow-y: auto;
                overflow-x: hidden;
            }
            
            .animoverlay-stage{
                display: grid;
                grid-template-areas: "stack";
                position: relative;
                justify-content: center;
                margin-right: 30%;
                margin-left: 10%;
                margin-top: 0;
                
                iframe {
                    position: relative;
                    top: 26%;
                    grid-area: stack;
                    height: auto;
                    min-width: 500px;
                    width: 40vw;
                    max-width: 900px;
                    aspect-ratio: 16 / 9;
                }

                iframe.vertical {
                    aspect-ratio: 9/16;
                    top: 10%;
                    left: 20%;
                    height: auto;
                    min-width: 100px;
                    width: 360px;
                    max-width: 90vw;
                }
            }
            
            .closevidoverlay{
                position: relative;
                grid-area: stack;
                width: 153px;
                height: 99px;
                left: 87%;
                top: 80%;
                transition: all 0.3s ease;
            }
            
            .closevidoverlay:hover, .closevidoverlay:focus-visible{
                scale: 1.2;
            }

            .animvidoverlay.active {
                transform: translateY(0px);
                opacity: 1;
                pointer-events: all;
            }

            .animviddesc {
                position: relative;
                background-image: url(../assets/images/art/anim/paper2.webp);
                background-repeat: no-repeat; 
                background-position: bottom right;
                width: 389px;
                height: 599px;
                left: 90%;
                rotate: 3deg;
                top: 55%;
                transform: translateY(-50%);
                grid-area: stack;

                align-content: center;
                justify-content: center;
                padding: 28px;

                > div {
                    position: relative;
                    left: 55%;
                    transform: translateX(-50%);
                    width: 317px;
                }

                [data-vidtitle] {
                    margin-top: 14px;
                    font-size: 40px;
                }

                [data-viddate] {
                    font-size: 20px;
                    margin-bottom: 40px;
                }

                [data-viddesc] {
                    position: relative;
                    width: 265px;
                    min-height: 200px;
                    left: 55%;
                    transform: translateX(-50%);
                    margin-bottom: 20px;
                }

                .vidtags {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: end;
                    align-items: center;
                    gap: 10px;
                    width: 80%;
                }
            }
            
            body.dark .animviddesc{
                background-image: url(../assets/images/art/anim/paper2_d.webp);
            }

            .spoilervid {
                display: block;
            }
            
            .animtitle {
                height: 289px;
                width: 427px;
                align-content: flex-end;
                rotate: 4deg;
                margin-left: 15%;
                margin-right: 5%;
                background-image: url(../assets/images/art/anim/paper.webp);
                background-repeat: no-repeat;
                
                h1{
                font-size: 70px;
                margin: 5%;
                margin-left: 20%;
                }
            }
            
            body{
                overflow-y: scroll;
            }
            
            .line1anim{
     position: absolute;
                top: 53%;
                left: 0%;
                scale: 1;
                opacity: 1;
}
            .line2anim{
     position: absolute;
                top: 7%;
                left: 59%;
                scale: 1;
                transform: scaleX(-1);
                opacity: 1;
}
            
            .animtitle, .animviddesc, .closevidoverlay, .animvidoverlay, .animvidoverlay iframe{
                transition: all 0.3s ease;
            }
            
            @media (max-width: 1329px){
                .animviddesc {
                scale: 0.9;
                left: 302px;
                top: 482px;
                transform: translateY(-50%);

            }
                
                .closevidoverlay{
                scale: 0.9;
                left: 268px;
                top: 712px;
            }
                
                .animoverlay-stage {
                    margin-right: 18%;
                    margin-top: -8%;

                iframe {
                    top: 384px;
                    position: relative;
                    min-width: 100px;
                    width: 482px;
                    max-width: 90vw;
                    left: 30%;
                    transform: translateX(-50%);
                }

                iframe.vertical {
                    aspect-ratio: 9/16;
                    top: 142px;
                    min-width: 100px;
                    width: 291px;
                    max-width: 90vw;
                    height: auto;
                    left: 48%;
                    transform: translateX(-45%);
                }
            }
                
            }
            
            @media (max-width: 870px){
                .animviddesc {
                    scale: 0.9;
                left: 110px;
                top: 808px;
                transform: translateY(-50%);

            }
                
                .closevidoverlay{
                scale: 0.9;
                left: 74px;
                top: 992px;
            }
                
                .animoverlay-stage{

                iframe {
                    top: 384px;
                    position: relative;
                    min-width: 100px;
                    width: 482px;
                    max-width: 600px;
                    left: 50%;
                    transform: translateX(-50%);
                }

                iframe.vertical {
                    aspect-ratio: 9/16;
                    top: 120px;
                    min-width: 100px;
                    width: 291px;
                    max-width: 90vw;
                    height: auto;
                    left: 60%;
                    transform: translateX(-45%);
                }
            }
                
            }
            
             @media (max-width: 686px){
                 
                  .animsort {
                margin-left: 10%;
                width: 40vw;
                min-width: 300px;
            }
                
                .animtitle{
                    position: relative;
                    margin-left: 35%;
                    margin-right: 20%;
                    top: 34px;
                    scale: 0.85;
                }
                
                .animviddesc {
                    scale: 0.8;
                left: 0%;
                top: 684px;
                transform: translateY(-50%);

            }
                
                .closevidoverlay{
                position: absolute;
                scale: 0.8;
                left: 89px;
                top: 916px;
                margin-left: 10%;
                margin-right: 5%;
            }
                
                .animoverlay-stage{
                    margin: 0%;
                    margin-left: 2%;

                iframe {
                    top: 329px;
                    position: relative;
                    min-width: 100px;
                    width: 482px;
                    max-width: 90vw;
                    left: 50%;
                    transform: translateX(-50%);
                }

                iframe.vertical {
                    aspect-ratio: 9/16;
                    top: 170px;
                    min-width: 100px;
                    width: 231px;
                    max-width: 90vw;
                    height: auto;
                    left: 50%;
                    transform: translateX(-40%);
                }
            }
            }