/* This section sets page-wide defaults */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* This is the background of the scene with a linear gradient at the bottom to provide some dimension  */
.canvas {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(0deg, rgba(0,0,0,0.93) 0%, rgb(166, 184, 185) 46%);
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -3;
}

/* this rug was commented out to be formed in the wholeshelf::after pseudo class section */
/* .rug {
    position: absolute;
    width: 110vmin;
    height: 60vmin;
    background: repeating-radial-gradient(ellipse, #522f2f, #522f2f 10%, #382020 15%);
    border-radius: 50%;
    bottom: -10%;
} */

/* This is the rectangle that houses the two shelves of items */
.wholeshelf{
    position: absolute;
    display: flex;
    justify-content: center;
    align-content: center;
    width: 60vmin;
    height: 100vmin;
    border-radius: 1%;
    background: #2e211d;
    box-shadow: 2px 2px #00000066;
}

/* This creates a rug for the shelf to stand on, that will move with the shelf when the screen is resized.
I used a repeating radial gradient to give it the look of a circular woven rug with its concentric layers
similar to an onion. */
.wholeshelf::after {
    content: "";
    position: absolute;
    width: 110vmin;
    height: 60vmin;
    background: repeating-radial-gradient(ellipse, #522f2f, #522f2f 10%, #382020 15%);
    border-radius: 50%;
    bottom: -40%;
    z-index: -1;
}

/* This is the top shelf, it is a container for the items inside.  The items inside this shelf will be
positioned relative to this div. */
.shelf1 {
    position: absolute;
    width: 57vmin;
    height: 40vmin;
    background-color: #1a1815;
    bottom: 54vmin;
    border-radius: 0.5%;
}

/* this is the blue book.  This and all the other books have a left and right translucent border to give
them some dimension for a slightly 3d look and to make the stand out from each other when stacked next to
or on top of each other.*/
.book1 {
    position: absolute;
    width: 5vmin;
    height: 25vmin;
    background: #3b577e;
    /* background: linear-gradient(90deg, #00000000, #1f2d3f 10%, #1f2d3f 90%, #00000005); */
    bottom: 0vmin;
    border-radius: 2%;
    border-left: 2px solid #00000033;
    border-right: 2px solid #00000033;
    /* box-shadow: 2px 0px #00000066; */
    /* z-index: 1; */
}

/* This is the slimmer brown book. */
.book2 {
    position: absolute;
    width: 4vmin;
    height: 23vmin;
    background: #402218;
    /* background: linear-gradient(90deg, #00000000, #402218 10%, #402218 90%, #00000005); */
    left: 5vmin;
    bottom: 0vmin;
    border-radius: 2%;
    border-left: 2px solid #00000033;
    border-right: 2px solid #00000033;
}

/* This is the brick-colored book, its dimensions are opposite of the previous books so it is laying horizontaly. */
.book3 {
    position: absolute;
    height: 5vmin;
    width: 23vmin;
    background: #522f2f;
    /* background: linear-gradient( #00000000, #522f2f 10%, #522f2f 90%, #00000005); */
    left: 10vmin;
    bottom: 0vmin;
    border-radius: 2%;
    border-top: 3px solid #00000033;
    border-bottom: 3px solid #00000033;
}

/* This is the pot for the plant.  Originally a square but shaped into a pot with the border-radius propery */
.pot {
    position: absolute;
    width: 12vmin;
    height: 12vmin;
    background: #85766e;
    left: 15vmin;
    bottom: 5vmin;
    border-radius: 7px 7px 25px 25px;
    z-index: 1;
}

/* This is a shadow to give the pot some texture/dimension using the border property.  I used the pseudo-class 
approach so that it is connect to the pot even when resizing the screen. */
.pot::after {
    content: "";
    position: absolute;
    width: 12vmin;
    height: 2vmin;
    background: transparent;
    border: 4px solid #00000099;
    border-top: transparent;
    border-left: transparent; 
    border-right: transparent;
    border-radius: 30%;
    top: 1vmin;
}

/* this is the middle leaf of the plant.  The transparent border sides are what give it the triangular shape. */
.plant {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 1.5vmin solid transparent;
    border-right: 1.5vmin solid transparent;
    border-bottom: 12vmin solid #557C55;
    border-radius: 10%;
    left: 19.5vmin;
    top: 12vmin;
    z-index: 0;
}

/* The before and after plant pseudo-classes below are used to duplicate the shape of the first plant leaf, 
without needing to create a new div.  The colors of the leaves and the orientation (via transform property)
are each a little different to give the plant an organic feel.  */
.plant::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 1.5vmin solid transparent;
    border-right: 1.5vmin solid transparent;
    border-bottom: 12vmin solid #557249;
    border-radius: 10%;
    left: -5vmin;
    top: 3vmin;
    transform: rotate(-15deg);
    z-index: 0;
}

.plant::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 1.5vmin solid transparent;
    border-right: 1.5vmin solid transparent;
    border-bottom: 12vmin solid #557255;
    border-radius: 10%;
    left: 1.05vmin;
    top: 3vmin;
    transform: rotate(21deg);
    z-index: 0;
}

/* This book is laying diagonally due to the transform property */
.book4 {
    position: absolute;
    width: 5vmin;
    height: 35vmin;
    background: #5c5c5b;
    right: 8.7vmin;
    bottom: -1.3vmin;
    border-radius: 2%;
    transform: rotate(31deg);
    border-left: 2px solid #00000033;
    border-right: 2px solid #00000033;
}

/* This is the container for the bottom shelf contents. */
.shelf2 {
    position: absolute;
    width: 57vmin;
    height: 40vmin;
    background-color: #1a1815;
    bottom: 7vmin;
    border-radius: 0.5%;
}

/* This is the large tan book sitting at the very bottom of the shelf. This and the rest of the books on this
bottom shelf are sized so they appear to be laying horizontally in the shelf (instead of upright). */
.book5 {
    position: absolute;
    width: 30vmin;
    height: 10vmin;
    background-color: #865439;
    bottom: 0vmin;
    border-radius: 2%;
    border-top: 3px solid #00000033;
    border-bottom: 3px solid #00000033;
}

/* This is the red book, placed off-center for a whimsical look. */
.book6 {
    position: absolute;
    width: 25vmin;
    height: 3vmin;
    background-color: #4d0f0f;
    bottom: 10vmin;
    border-bottom: 1px solid #00000033;
    border-radius: 3%;
    left: 1vmin;
    border-top: 2px solid #00000033; 
    border-bottom: 2px solid #00000033;
}

/* This is the green book, also placed off-center for a whimsical/organic look. */
.book7 {
    position: absolute;
    width: 23vmin;
    height: 5vmin;
    background-color: #557255;
    bottom: 13vmin;
    border-bottom: 1px solid #00000033;
    border-radius: 3%;
    left: 4vmin;
    border-top: 2px solid #00000033;
    border-bottom: 2px solid #00000033;
}

/* The apple was created using two ellipses (.apple is left ellipses and .apple::after is the right ellipses) that
were rotated away from each other and then layered on top of each other to create the apple shape.  A translucent
border was also added to the right and the bottom to give the apple dimension and render some contour. */
.apple {
    position: absolute;
    width: 5vmin;
    height: 7vmin;
    background-color: #771616;
    /* background: radial-gradient(ellipse at center, #771616, #400C0C); */
    border-radius: 45%;
    transform: rotate(-15deg);
    left: 6vmin;
    bottom: 18vmin;
    z-index: 1;
    border-right: 5px solid #00000033;
    border-bottom: 3px solid #00000033;
}

/* I used the pseudo-class approach so that I could duplicate the .apple shape without the need for an
additional div.  A translucent border was placed on the right to render some dimensionality.
I also used asymmetric border radius numbers to give it a more organic/imperfect shape.  */
.apple::after {
    content: "";
    position: absolute;
    width: 5vmin;
    height: 7vmin;
    background-color: #771616;
    /* background: radial-gradient(ellipse at center, #771616, #400C0C); */
    /* border-radius: 45%; */
    border-radius: 48% 52% 24% 31% / 33% 42% 12% 27%;
    transform: rotate(45deg);
    left: 2.65vmin;
    bottom: -.4vmin;
    z-index: 1;
    border-right: 2px solid #00000033;
}

/* I used a triangular shape created by setting two of the borders to transparent, to create the apple's stem.
It is also placed on a lower z-index than the apple to give the appearance of the stem coming from within the apple. */
.stem {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 1px solid transparent;
    border-right: 1vmin solid transparent;
    border-bottom: 4vmin solid #557C55;
    border-radius: 10%;
    left: 3.65vmin;
    top: -1.8vmin;
    transform: rotate(165deg);
    z-index: 0;
}

/* I created a circule using the border-radius for the 8-ball shape.  I also set the overflow property
to hidden so that it would in effect clip the part of the white circle and the number 8 we shouldn't be
able to see from this angle.  It creates the effect of seeing the ball as if it had it's number pointed upward away from
our point of view. */
.eightball {
    position: absolute;
    width: 9vmin;
    height: 9vmin;
    background-color: black;
    border-radius: 50%;
    overflow: hidden;
    bottom: 18vmin;
    left: 12vmin;
    border-top: 2px solid #ffffff22;
    /* border-right: 2px solid #ffffff22; */
}

/* I used a pseudo-class to create a curved highlight for the 8ball using a translucent white border on the right side. */
.eightball::after {
    content: "";
    position: absolute;
    width: 8vmin;
    height: 8vmin;
    border-radius: 50%;
    border-right: 3px solid #ffffff33;
    left: 0vmin;
    top: 0vmin;
    transform: rotate(45deg);

}

/* This is a white ellipse that has had the top portion cut off by the 8-ball's border. It is the background for the "8"
label on the ball. */
.whitecircle {
    position: absolute;
    width: 6vmin;
    height: 3vmin;
    background-color: white;
    border-radius: 59%;
    left: 1.5vmin;
    top: -1vmin;
}

/* .eight and its ::after pseudo-class are two transparent circles with black borders that are connected 
to form the number 8.  The pseudo-class was used to duplicate the shape without needing to create an extra div. */
.eight {
    position: absolute;
    width: 2vmin;
    height: 2vmin;
    border: 3px solid black;
    background: white;
    border-radius: 50%;
    left: 2.5vmin;
    top: -0.85vmin;
}

.eight::after {
    content: "";
    position: absolute;
    width: 1.5vmin;
    height: 2vmin;
    border: 3px solid black;
    background: transparent;
    border-radius: 50%;
    top: -1.5vmin;
    left: 1.2vmin;
}

/* This is a cardboard box sitting on the bottom shelf.  Translucent borders have been used to give it some
dimension on the sides. */
.box {
    position: absolute;
    width: 15vmin;
    height: 15vmin;
    background: #876445;
    bottom: 0vmin;
    right: 3vmin;
    border-left: 2px solid #00000033;
    border-right: 2px solid #00000033;
}

/* This is the lid of the box.  It has translucent border on the bottom as well as the sides to give the effect
of the lid sitting over the top edge of the box. */
.box::after {
    content: "";
    position: absolute;
    width: 15vmin;
    height: 3vmin;
    background-color: #876445;
    right: -0.5vmin;
    bottom: 14vmin;
    border: 2px solid #00000033;
    border-top: none;
}


/* This is the color scheme I started with and then added to as needed: 
marsala: #522f2f
espresso: #2e211d
dark coffee: #402218
medium coffee: #865439
camel: #C68B59
dark beige: #D7B19D*/