/*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;

        }