/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

:root{
    --emblemBack: #abfeff;
    --turtleSkin: black;
    --turtleShell: black;
}

.TurtleFam {
    position: absolute;
    width: 50vh;
    height: 50vh;
    right: 10vh;
    top: 15vh;

}

#Turtle1, #Turtle2, #Turtle3 {
    position: absolute;
    background-color: var(--emblemBack);
    border-radius: 50%;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}

#Turtle1 {
    right: 0;
    width: 66.7%;
    height: 66.7%;
}

#Turtle2 {
    width: 33.3%;
    height: 33.3%;
    left: 55%;
    top: 65%;
}
#Turtle3 {
    width: 33.3%;
    height: 33.3%;
    top: 12%;
    left: 2%;
}

#turtleHead {
    position: absolute;
    top: 0;
    left: 40%;
    display: block;
    width: 17%;
    height: 20%;
    background-color: var(--turtleSkin);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    overflow: hidden;
}

#turtleShell {
    position: absolute;
    border-radius: 50% 50% 50% 50%;
    background-color: var(--turtleShell);
    width: 40%;
    height: 50%;
    left: 29%;
    top: 23%;
    z-index: 1;
}

#turtleLeftArm {
    position: absolute;
    width: 25%;
    height: 25%;
    
    -webkit-transform:
        scale(1.1)
        rotate(45deg);
    
        -ms-transform:
        scale(1.1)
        rotate(45deg);
    
            transform:
        scale(1.1)
        rotate(45deg);
    top: 23%;
    left: 17%;
}

#turtleRightArm {
    position: absolute;
    width: 25%;
    height: 25%;
    top: 23%;
    right: 19%;
    
    

    
    -webkit-transform: 
        scaleX(-1.1)
        scaleY(1.1)
        rotate(45deg);
    
    

    
        -ms-transform: 
        scaleX(-1.1)
        scaleY(1.1)
        rotate(45deg);
    
    

    
            transform: 
        scaleX(-1.1)
        scaleY(1.1)
        rotate(45deg);
    
}

#turtleLeftLeg {
    position: absolute;
    top: 55%;
    left: 20%;
    width: 25%;
    height: 25%;
    -webkit-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
            transform: rotate(-5deg);
}


#turtleRightLeg {
    position: absolute;
    top: 55%;
    right: 22%;
    width: 25%;
    height: 25%;
    -webkit-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
            transform: rotate(-5deg);
    -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
            transform: scaleX(-1);
}

#turtleLegFin {
    background-color: var(--turtleSkin);
    position: absolute;
    width: 100%;
    height: 120%;
    border-radius: 50%;
    top: 24%;

}
#turtleFoot {
    position: absolute;
    background-color: var(--turtleSkin);
    width: 36%;
    height: 40%;
    border-radius: 50%;
    top: 94%;
    left: 10%;
}
#turtleLegNeg1 {
    position: absolute;
    background-color: var(--emblemBack);
    width: 80%;
    height: 100%;
    border-radius: 50%;
    left: 40%;
    top: 36%;

}
#turtleLegNeg2 {
    position: absolute;
    background-color: var(--emblemBack);
    width: 60%;
    height: 68%;
    border-radius: 49%;
    left: 32%;
    top: 0%;

}

#turtleLegNeg3 {
    position: absolute;
    background-color: var(--emblemBack);
    width: 50%;
    height: 50%;
    top: 104%;
    left: 24%;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);

}

@media (max-width: 1024px) {
    #Turtle1, #Turtle2, #Turtle3 {
        -webkit-transform: rotate(55deg);
            -ms-transform: rotate(55deg);
                transform: rotate(55deg);

    }
    #Turtle1 {
        right: 10vw;
    }
    #Turtle2 {
        top: calc(13vh + 20vw);
        left: -57vw;
    }
    #Turtle3 {
        top: calc(13vh + 27vw);
        left: -64vw;
    }
    .TurtleFam {
        right: 0;
        width: 25vw;
        height: 25vw;
    }

}

@media (min-width: 600px) and (max-width: 1024px){
    #Turtle2 {
        top: calc(13vh + 21vw);
        left: -58vw;
    }
    #Turtle3 {
        top: calc(13vh + 28vw);
        left: -65vw;
    }

}

@media (min-width: 1024px) {

    .TurtleFam {
        width: 25vw;
        height: 25vw;
    }
}