* {margin: 0; padding: 0; box-sizing: border-box;}

/* this sets the background color of the page and makes it the reference for the position of the doors */
body {position:relative; background-color: black;}

/* this rectangle is the white door frame of each door.  I have the rest of the contents of the door set inside of the frame with only the top and sides sticking out to appear like a door frame.  The size of the door frame gets set down below in pixels using an id selector for each door */
div.frame {
    background-color: white;
    position: relative;
    overflow: hidden;
}
/* this rectangle is the door itself.  It's a child of .frame. I'm using percentages for the width & height so they are scalable.  The color of the door gets set at the bottom of this page using an id selector to target this div for each door "object" */
div.door {
    width: 90%;
    height: 97.5%;
    margin: 5% 5% 0 5%;
}
/* this rectangle is the window of each door.  It is a child of .door so it gets placed on top of the door.*/
div.window {
    background-color: lightblue;
    width: 60%;
    height: 50%;
    position: absolute;
    top: 9%;
    left: 20%;
}
/* this rectangle is the glare of the window of each door.  It is a child of .window so it gets placed on top of each window */
div.glare {
    background-color: rgba(255, 255, 255, .5);
    width: 15%;
    height: 28%;
    position: absolute;
    top: 13%;
    left: 62%;
}
/* this circle is the door knob of each door.  It is a child of .door. */
div.knob {
    background-color: yellow;
    width: 10%;
    height: 4.96%;
    position: absolute;
    top: 61%;
    right: 10%;
    border-radius: 50%;
}
/* this rectangle is the beveled panel of each door.  It is a child of .door.  I'm using the border as the actual bevels with slightly different alpha values to add shading based on the sun being positioned to the top left */
div.bevel {
    background-color: transparent;
    border: 2em solid rgba(0, 0, 0, .5);
    border-left-color: rgba(0, 0, 0, .30);
    border-top-color: rgba(0, 0, 0, .20);
    border-right-color: rgba(0, 0, 0, .40);
    width: 60%;
    height: 20%;
    position: absolute;
    bottom: 13%;
    left: 20%;
}
/* this selector selects all divs inside of .tree to become triangles to look like tiers of the tree on the purple door */
div.tree div {
    width: 0;
    height: 0;
    border: 3em solid transparent;
    border-bottom-color: darkgreen;
}
/* this triangle is a child of the tree div so it gets the triangle shape and color set in the "div.tree div" selector.  It is meant to be the top tier of the tree */
div.top {
    position: absolute;
    top: -23%;
    left: 29%;
}
/* this triangle is a child of the tree div so it gets the triangle shape and color set in the "div.tree div" selector.  It is meant to be the middle tier of the tree */
div.middle {
    position: absolute;
    top: -3%;
    left: 29%;
}
/* this triangle is a child of the tree div so it gets the triangle shape and color set in the "div.tree div" selector.  It is meant to be the bottom tier of the tree */
div.bottom {
    position: absolute;
    top: 17%;
    left: 29%;
}
/* this rectangle is the trunk of the tree.  I didn't make it a child of .tree because I didn't want it to be a triangle */
div.trunk {
    position: absolute;
    top: 71%;
    left: 41.5%;
    background-color: saddlebrown;
    width: 13%;
    height: 22%;
}
/* this odd shape is the head of the golf club for the green door. */
div.head {
    width: 36px;
    height: 21px;
    background-color: silver;
    border-radius: 65% 35% 30% 70% / 55% 40% 60% 45%;
    transform: rotate(181deg);
    position: absolute;
    top: 75%;
    left: 20%;
}
/* this odd shape is the glare on the top of the head of the golf club */
div.head-glare {
    width: 55%;
    height: 12%;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 80% 20% 70% 30% / 100% 50% 50% 0%;
    transform: rotate(190deg);
    position: absolute;
    top: 75%;
    left: 20%;
}
/* this rectangle is the top texture line on the head of the golf club */
div.head-line-one {
    width: 70%;
    height: 10%;
    background-color: rgba(0, 0, 0, .2);
    position: absolute;
    top: 52%;
    left: 13%;
    transform: rotate(10deg);
}
/* this rectangle is the bottom texture line on the head of the golf club */
div.head-line-two {
    width: 60%;
    height: 10%;
    background-color: rgba(0, 0, 0, .2);
    position: absolute;
    top: 30%;
    left: 29%;
    transform: rotate(10deg);
}
/* this rectangle is the shaft of the golf club */
div.shaft {
    width: 2px;
    height: 93px;
    background-color: darkgray;
    position: absolute;
    top: 13%;
    left: 54%;
    transform: rotate(42deg);
}
/* this rectangle is the handle of the golf club */
div.handle {
    width: 4px;
    height: 30px;
    background-color: black;
    position: absolute;
    top: 2%;
    left: 74%;
    transform: rotate(42deg);
}
/* this circle is the parent shape of the two top parts of the heart on the blue door */
div.heart-top {
    background-color: red;
    width: 29.3375%;
    height: 50%;
    border-radius: 50%;
}
/* this circle is the top left part of the heart on the blue door */
div#heart-left {
    position: absolute;
    top: 14%;
    left: 23%;
}
/* this circle is the top right part of the heart on the blue door */
div#heart-right {
    position: absolute;
    top: 14%;
    left: 45%;
}
/* this square is the bottom part of the heart on the blue door, it's rotated 45 degrees to appear like a diamond */
div.heart-bottom {
    position: absolute;
    top: 32%;
    left: 34%;
    background-color: red;
    width: 29.3375%;
    height: 50%;
    transform: rotate(45deg);
}

/* this selector sets the dimensions and position of the purple door using the id "purple".  More specifically, it sets the size of the door frame in pixels.  All other sizing except some of the pictures on the doors are based on percentages to make the doors scalable.  This uses font-size so I can use "em" for the border size of the door bevels to keep them proportionate with each door. */
div#purple {
    width: 328px;
    height: 660px;
    font-size: 10px;
    position: absolute;
    top: 50px;
    left: 100px;
}
/* this sets the color of the purple door */
div#purple div.door {
    background-color: purple;
}
/* this sets the dimensions and position of the green door using the id "green".  More specifically, it sets the size of the door frame in pixels.  All other sizing except some of the pictures on the doors are based on percentages to make the doors scalable.  This uses font-size so I can use "em" for the border size of the door bevels to keep them proportionate with each door. */
div#green {
    width: 394px;
    height: 792px;
    font-size: 12px;
    position: absolute;
    top: 30px;
    left: 550px;
}
/* this sets the color of the green door */
div#green div.door {
    background-color: green;
}
/* this sets the dimensions and position of the blue door using the id "blue".  More specifically, it sets the size of the door frame in pixels.  All other sizing except some of the pictures on the doors are based on percentages to make the doors scalable.  This uses font-size so I can use "em" for the border size of the door bevels to keep them proportionate with each door. */
div#blue {
    width: 590px;
    height: 1188px;
    font-size: 18px;
    position: absolute;
    top: 60px;
    left: 1200px;
}
/* this sets the color of the blue door */
div#blue div.door {
    background-color: blue;
}