Trying to create CSS art for an eye, but struggling with keeping all parts of the eye together when the screen size changes. The pupil seems to move around a lot. Any suggestions?
Having trouble submitting due to code/comment ratio, hopefully it works now.
body {
background-color: grey;
}
p {
top: 50%;
position: relative;
}
.eye-outline {
width: 600px;
height: 350px;
background-color: black;
border-radius: 50%;
position: relative;
}
.eye-white {
width: 580px;
height: 330px;
background-color: white;
border-radius: 50%;
position: relative;
top: 3%;
left: 1.8%;
}
.iris-outline {
width: 325px;
height: 325px;
border-radius: 50%;
background-color: black;
position: relative;
left: 23%;
bottom: 97%;
}
.iris {
width: 300px;
height: 300px;
background-color: blue;
bottom: 186.5%;
left: 25%;
border-radius: 50%;
position: relative;
}
.pupil {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: black;
left: 20%;
top: -20%;
position: relative;
}