/*Background color*/
html {
background-color: #4A245E;
}
/*HEAD & HAIR*/
/* Position, size, color, and shape of the head */
#head {
margin: 10em;
height: 775px;
width: 600px;
background-color: #d2a679;
border: 2px solid black;
border-radius: 90% 90% 100% 100%;
}
/*Position, size, color, and shape of the hair.*/
.hair {
position: relative;
bottom: 33px;
left: 13px;
}
#topHair {
width: 575px;
height: 170px;
background-color: #1a0d00;
border-radius: 10% 10% 0% 0% / 90% 90% 0% 0%;
}
#leftHair {
top: 170px;
left: 0;
width: 0;
height: 0;
border-bottom: 60px solid transparent;
border-left: 60px solid #1a0d00;
}
#rightHair {
top: 110px;
left: 515px;
width: 0;
height: 0;
border-bottom: 60px solid transparent;
border-right:60px solid #1a0d00;
}
/*HEADPHONES*/
/*Position, size, and shape of headphone headband.*/
#headrest {
position: relative;
bottom: 2em;
height: 5em;
background-color: black;
border: 1px solid black;
border-radius: 130% 130% 40% 40%;
}
/*Position of the headphone's stems.*/
#leftStem, #rightStem {
position: relative;
}
/*Position, size, color, and shape of the left headphone stem.*/
#leftStem {
right: 2.3em;
float: left;
height: 500px;
width: 50px;
background-color: black;
border-radius: 200% 10% 70% 25%;
}
/*Position, size, color, and shape of the left headphone's ear-cup.*/
#leftEar {
position: relative;
top: 17.05em;
right: 5em;
height: 225px;
width: 100px;
background-color: black;
border: 1px solid black;
border-radius: 45% 0% 0% 45%;
}
/*Position, size, color, and shape of the right headphone stem.*/
#rightStem {
left: 2.4em;
bottom: 5em;
float: right;
height: 500px;
width: 50px;
background-color: black;
border-radius: 10% 200% 25% 70%;
}
/*Position, size, color, and shape of the right headphone's ear-cup.*/
#rightEar {
position: relative;
top: 17.05em;
left: 2em;
height: 225px;
width: 100px;
background-color: black;
border: 1px solid black;
border-radius: 0% 45% 45% 0%;
}
/*EYEBROWS*/
/*Position and size of the eyebrow container.*/
.eyebrowContainer {
margin-top: 10%;
height: 1.3em;
width: 600px;
}
/*Size and color of the eyebrows.*/
#leftBrow, #rightBrow {
width: 12em;
height: 1.5em;
background-color: #261a0d;
}
/*Position and shape of the left eyebrow.*/
#leftBrow {
float: left;
border-radius: 180% 20% 30% 45%;
}
/*Position and shape of the right eyebrow.*/
#rightBrow {
float: right;
border-radius: 20% 180% 45% 30%;
}
/*EYES*/
/* Positioning the eyes relative to the head */
#eyeArea {
margin-top: 5%;
margin-left: 20%;
margin-right: 20%;
}
/*Positioning all contents of the eye class to the center of (x,y), and making the size, color, and shape of the eye.*/
.eye {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
width: 100px;
background-color: #d9d9d9;
border-radius: 50%;
}
/*Position, size, color, and shape of the eye-color.*/
.eyeColor {
position: absolute;
height: 40px;
width: 40px;
background-color: #392613;
border-radius: 50%;
}
/*Center of the eye class, the pupil is the smallest circle within the eye. Position in z-index,
size, color, and shape of the pupil.*/
.pupil {
position: absolute;
height: 13px;
width: 13px;
background-color: black;
border-radius: 50%;
}
.topLid {
position: relative;
bottom: 25px;
height: 25px;
width: 100px;
background-color: #cc9966;
border: 1px solid #d2a679;
border-radius: 125px 125px 0 0;
}
.bottomLid {
position: relative;
top: 25px;
height: 30px;
width: 100px;
background-color: #cc9966;
border: 1px solid #d2a679;
border-radius: 0 0 200px 200px ;
}
/*Position of the left eye.*/
#leftEye {
float: left;
}
/*Position of the right eye.*/
#rightEye {
float: right;
}
/*GLASSES*/
/*Position, size, color, and shape of the glasses.*/
.glasses {
position: absolute;
z-index: 50;
height: 140px;
width: 200px;
border: 4px solid black;
border-radius: 35%;
border-width: 5px;
}
/*Position, size, and color of the glasses' ear hooks. Also applied to the nose bridge part of the
glasses.*/
.earHook, #bridge {
display: inline-block;
position: relative;
height: 4px;
width: 150px;
background-color: black;
}
/*Positions the glasses' left ear hook.*/
#leftEarHook {
float: left;
left: 100px;
position: absolute;
}
/*Positions and re-sizes the glasses' nose bridge.*/
#bridge {
left: 50px;
width: 60px;
}
/*Positions the glasses' right ear hook.*/
#rightEarHook {
float: right;
right: 70px;
position: absolute;
}
/*NOSE*/
/*Position and size of the nose container.*/
.nose {
position: relative;
display: inline-block;
left: 21px;
width: 115px;
height: 150px;
}
/*Position, size, color, and shape of the nose's ridge.*/
#noseRidge {
position: relative;
left: 25px;
z-index: 1;
height: 140px;
width: 60px;
background-color: #d2a679;
border: 3px solid #cc9966;
border-radius: 100% 100% 75% 75%;
}
/*Common position, size, color, and shape of the left and right nostril.*/
#leftNostril, #rightNostril {
position: relative;
bottom: 50px;
height: 40px;
width: 40px;
border: 4px solid #cc9966;
border-radius: 50%;
}
/*Left nostril's specific positioning.*/
#leftNostril {
float: left;
left: 10px;
}
/*Left nostril's specific positioning.*/
#rightNostril {
float: right;
right: 10px;
}
/*MOUTH*/
/*Position and size of the mouth container.*/
.mouthContainer {
position: relative;
display: flex;
align-items: center;
justify-content: center;
bottom: 20px;
left: 125px;
width: 350px;
height: 200px;
}
/*Size, color, and shape of the mouth.*/
#mouth {
height: 70px;
width: 220px;
background-color: #cc9966;
border-radius: 60px 60px 175px 175px;
}
/*Size, color, and shape of the mouth's lips together.*/
#lips {
height: 30px;
border-top: none;
border-bottom: 3px solid #bf8040;
border-radius: 60px 60px 175px 175px;
}