.frog .back{
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(179,255,189,1) 100%, rgba(0,212,255,1) 100%);
    top: 0vw;
    left: 0vw;
    width: 100vw;
    height: 100vh;
}
.frog .headTop{
    background-color: olivedrab;
    top: 10vw;
    left: 12.5vw;
    height: 20vw;
    width: 45vw;
    border-radius: 100%;
}
.frog .headBottom {
    background-color: olivedrab;
    top: 15vw;
    left: 10vw;
    height: 30vw;
    width: 50vw;
    border-radius: 100%; 
}
.frog .patternOne {
    background-color: olive;
    top: 10vw;
    left:27.5vw;
    width: 15vw;
    height: 5vw;
    border-radius: 40%;
}
.frog .rightEye {
    background-color: olivedrab;
    top: 5vw;
    left: 10vw;
    height: 20vw;
    width: 20vw;
    border-radius: 100%; 
}
.frog .leftEye {
    background-color: olivedrab;
    top: 5vw;
    left: 40vw;
    height: 20vw;
    width: 20vw;
    border-radius: 100%; 
}
.frog .whiteRight {
    background-color: white;
    top: 10vw;
    left: 15vw;
    height: 13vw;
    width: 13vw;
    border-radius: 100%;  
}
.frog .whiteLeft {
    background-color: white;
    top: 10vw;
    left: 42vw;
    height: 13vw;
    width: 13vw;
    border-radius: 100%;  
}
.frog .blackRight {
    background-color: black;
    top: 11vw;
    left: 16vw;
    height: 10vw;
    width: 10vw;
    border-radius: 100%; 
}
.frog .blackLeft {
    background-color: black;
    top: 11vw;
    left: 43vw;
    height: 10vw;
    width: 10vw;
    border-radius: 100%;
}
.frog .highlightRight {
    background-color: white;
    top: 11vw;
    left: 20vw;
    height: 7vw;
    width: 7vw;
    border-radius: 100%; 
}
.frog .highlightLeft {
    background-color: white;
    top: 11vw;
    left: 47vw;
    height: 7vw;
    width: 7vw;
    border-radius: 100%;
}
.frog .highlightThree {
    background-color: white;
    top: 17vw;
    left: 17vw;
    height: 5vw;
    width: 5vw;
    border-radius: 100%; 
}
.frog .highlightFour {
    background-color: white;
    top: 17vw;
    left: 44vw;
    height: 5vw;
    width: 5vw;
    border-radius: 100%;
}
.frog .highlightFive{
    background-color: white;
    top: 14vw;
    left: 17vw;
    height: 2vw;
    width: 2vw;
    border-radius: 100%; 
}
.frog .highlightSix{
    background-color: white;
    top: 14vw;
    left: 44vw;
    height: 2vw;
    width: 2vw;
    border-radius: 100%;
}
.frog .nostrilLeft {
    background-color: black;
    top: 24vw;
    left: 32vw;
    height: 3vw;
    width: 1vw;
    transform: rotate(-20deg);
    border-radius: 100%;
}
.frog .nostrilRight {
    background-color: black;
    top: 24vw;
    left: 37vw;
    height: 3vw;
    width: 1vw;
    transform: rotate(20deg);
    border-radius: 100%;
}
.frog .mouthTop{
    background-color: darkolivegreen;
    top: 29vw;
    left: 32vw;
    height: 6vw;
    width: 6vw;
    border-radius: 100%; 
}
.frog .mouthBottom{
    background-color: olivedrab;
    top: 28vw;
    left: 32vw;
    height: 6vw;
    width: 6vw;
    border-radius: 100%; 
}
.frog .blushLeft{
    background-color: darkolivegreen;
    top: 24vw;
    left: 12vw;
    height: 12vw;
    width: 14vw;
    border-radius: 100%;
}
.frog .blushRight{
    background-color: darkolivegreen;
    top: 24vw;
    left: 44vw;
    height: 12vw;
    width: 14vw;
    border-radius: 100%;
}