.window2 {
    position: absolute;
    background: transparent;
    width: 100%;
    height: 100%;

    top: 100%;
    left: 0px
}

.window2handle {
    position: absolute;
    background: transparent;

    width: 70vmax;
    height: 10vmax;

    left: 50%;
    top: 6vmax;
    translate: -50% 0%;
    scale: 0.85;
}
.window2handletxt {
    position: absolute;
    text-align: center;
    background: linear-gradient(to right, var(--gr), var(--gr2), var(--gr));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: poppins,sans-serif;
    font-size: 3vmax;
    width: 100%;

    left: 50%;
    translate: -50% 0%;

    line-height: 4vmax;

    animation: txtgradient 5s infinite linear;
}
.window2handledesc {
    position: absolute;
    text-align: center;
    color: var(--txt);
    font-family: poppins,sans-serif;
    font-size: 1.5vmax;
    opacity: 0.75;

    line-height: 1.7vmax;

    top: 6vmax;
}

.window2handle2 {
    position: absolute;
    background: transparent;

    width: 87vmax;
    height: 30vmax;

    left: 50%;
    top: 22vmax;
    translate: -50% 0%;
    scale: 1;
}
.window2handle2 > img {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    scale: 0.35;
    height: 100%;
}
.window2handle2feature1, .window2handle2feature2
, .window2handle2feature3, .window2handle2feature4
, .window2handle2feature5, .window2handle2feature6{
    position: absolute;
    background: var(--bg2);
    width: 30vmax;
    height: calc(33.3% - 0.5vmax);
    box-shadow: 0px 0px 1vmax 0.1vmax black;

    border-radius: 2vmax;
}

.window2handle2feature2 {
    right: 0px;
}
.window2handle2feature3 {
    top: 50%;
    translate: 0% -50%;
}
.window2handle2feature4 {
    top: 50%;
    translate: 0% -50%;
    right: 0px;
}
.window2handle2feature5 {
    bottom: 0px;
}
.window2handle2feature6 {
    bottom: 0px;
    right: 0px;
}

.window2handle2line1, .window2handle2line2, .window2handle2line3 {
    position: absolute;
    background: var(--gr2);
    align: center;
    width: 40vmax;
    height: 0.5vmax;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 2vmax;
    z-index: -1;

    overflow: hidden;
}
.window2handle2line2 {
    transform: rotate(38deg);
    translate: -50% 0%;
}
.window2handle2line3 {
    transform: rotate(-38deg);
    translate: -50% 0%;
}
.window2handle2lineactive {
    position: absolute;
    background: transparent;
    box-shadow: 0px 0px 0px 1vmax var(--gr);

    aspect-ratio: 1/1;
    height: 10vmax;

    left: 50%;
    top: 50%;
    translate: -50% -50%;

    animation: lineactive 3s infinite linear;
}
.window2handle2line1 > .window2handle2lineactive {
    animation: lineactive2 3s infinite linear;
}
.featureimageleft, .featureimageright {
    position: absolute;
    background: var(--bg2);
    translate: -50% -50%;
    border-radius: 50vmax;
    box-shadow: 0px 0px 1vmax 0vmax black;

    aspect-ratio: 1/1;
    height: 3vmax;
}
.featureimageleft {
    right: -3vmax;
    top: 50%;
}
.featureimageright {
    top: 50%;
}
.featureimageleft > img, .featureimageright > img {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    scale: 0.65;
    height: 100%;
    filter: invert(96%) sepia(2%) saturate(5%) hue-rotate(125deg) brightness(116%) contrast(100%);
}
#active {
    filter: invert(41%) sepia(48%) saturate(1001%) hue-rotate(217deg) brightness(87%) contrast(82%);
    opacity: 0;
    animation: iconactive infinite 3s linear;
}

.featuretitleleft {
    position: absolute;
    text-align: center;
    white-space: nowrap;


    color: var(--gr);
    font-family: poppins,sans-serif;
    font-size: 1.4vmax;

    right: 50%;
    translate: 50% 0%;
}
.featuredescleft {
    position: absolute;
    text-align: center;
    color: var(--txt);
    font-family: poppins,sans-serif;
    font-size: 0.95vmax;
    width: 80%;
    opacity: 0.8;
    line-height: 1.4vmax;

    top: 3vmax;
    right: 50%;
    translate: 50% 0%;
}
.featuretitledecor {
    position: absolute;
    background: var(--gr);
    opacity: 0.2;
    width: 100%;
    height: 1vmax;

    left: 50%;
    bottom: 6.5vmax;
    translate: -50% 0%;
    border-radius: 1vmax;

    transition: height 0.3s ease;
}

.window2handle2feature1 > .featuretitledecor {
    width: 20vmax;
}
.window2handle2feature2 > .featuretitledecor {
    width: 13.5vmax;
}
.window2handle2feature3 > .featuretitledecor {
    width: 13vmax;
}
.window2handle2feature4 > .featuretitledecor {
    width: 10vmax;
}
.window2handle2feature5 > .featuretitledecor {
    width: 15vmax;
}
.window2handle2feature6 > .featuretitledecor {
    width: 14vmax;
}
.window2handle2feature1:hover > .featuretitledecor {
    height: 2vmax;
}
.window2handle2feature2:hover > .featuretitledecor {
    height: 2vmax;
}
.window2handle2feature3:hover > .featuretitledecor {
    height: 2vmax;
}
.window2handle2feature4:hover > .featuretitledecor {
    height: 2vmax;
}
.window2handle2feature5:hover > .featuretitledecor {
    height: 2vmax;
}
.window2handle2feature6:hover > .featuretitledecor {
    height: 2vmax;
}